Our favourite ES2018 features 💖

[@OfficialDevTips]

That cool inline evaluation thing is called *Quokka* quokka.devtipsshow.com

[@ablgmv]

And gonna save twenty six minutes of your time 1. let { city, ...restOfTheObject } = sourceObject restOfTheObject will have all other properties of the sourceObject without 'city' property. 2. regexp match() is cool. 3. 'for ... of' is here for iterating all iterable objects. Also can be used for asynchronous operations, just insert 'await' just after the 'for'.

[@ColinRichardson]

I didn't know const { city, email, ...restOfObject } = originalObject; was a secret that noone knew about.. Tho, I would have done let filteredObject; { const { city, email, ...rest } = originalObject; filteredObject = rest; } That way city and email variables are not littering your active variables

[@BuzzedAldrin1]

You could also use: Promise.all(ArrayOfItems.map(async (Item) => { const ret = await asynchronousMethod(item); // Do something with ret })); If you want to wait on a bunch of promises based on array data. I believe this is also a bit more efficient

[@mtheoryx83]

I don't watch this channel to really "save time". It's entertainment as well. But I understand what you meant. I think.

[@ablgmv]

@@mtheoryx83 Yeah, I'm sorry a bit for this comment. But on the other hand I wanted write it too much and couldn't do anything with myself. Sorry again. I can remove it.

[@erikw4193]

you missed the entire cookie break

[@tyreldelaney]

I really like this kind of video. Just chatting about interesting things.

[@ezekielsaturday2637]

yeah, same here

[@bjornkihlberg2103]

Excluding fields with destructuring is really nice as well because it's not mutating anything. It's all pure.

[@gokaygurcan5704]

According to Wikipedia article, the first manual models, were developed in the 1860s, and the first motorized designs appeared at the turn of the 20th century.

[@DoktorKumpel]

Also works with arrays [first, second, ...rest] = someArray

[@YamenSharaf]

Arrays have the added benefit of not having to add unnecessary variables to your namespace if you only wanted to grab the third item of the array for example const [, , third, ...rest] = someArray; Now you don't have first and second variables if you don't need them.

[@bramus]

Thanks for the mention! :)

[@nikodemwrona1011]

All of stuff was easy to follow and on point :)

[@BrianDriesenga]

Would love to see further discussion of features in ES2018 that you guys see as important. Also, please post links to the important stuff (where to order that fika food online)! By the way, the first vacuum sweepers (precursor to vacuum cleaners) were introduced in the 1860's. ;-)

[@HygorZorak]

What is the vs code extension to show the contents of the variable?

[@Victor_Marius]

Wow, that RegExp feature I saw it in python few days ago and I thought I probably will never use it. But now, when I found out that is in javascript also, I changed my mind. Thanks for changing my mind :)

[@natluenthaisong]

how you do the " //? " thing what tool is it?

[@Sets_21]

Quokka

[@OfficialDevTips]

it's called Quokka. It has both a free tier and a pro tier. Check it out here kzbin.info/www/bejne/jWXFo3Sll6hlfsU or on their site quokkajs.com/

[@natluenthaisong]

@@OfficialDevTips ,Sets, thank you very much

[@ezekielsaturday2637]

its Quokka - pretty cool stuff ⚡️✨ But depending on what you have running on your CMD, it might make you experience some system lags

[@stephenjames2951]

`let x = (...args) => { console.log(args); }` This kind of allows you to use "arguments" in an arrow function.

[@ezekielsaturday2637]

To answer David's question, for me it wasnt difficult to understand, I already use most of these Es6 features so I found it pretty cool. But the for await was a cool thing to witness tho.

[@shadymohammed3197]

You're awesome, guys 🔥

[@RockCYP]

A note on 'for...of' -> its used for arrays, 'for...in' is used for objects. As for the spread object yes its new but when using Arrays you could do that since es2015 i believe.

[@sachinthakur5493]

Which extension are you using for live logs whenever you write certain variable or functions?

[@ljprib305]

5:10 is great to pass React props around.

[@markusgattol]

bring it on... complicated stuff is only complicated until understood... and that's why people meet here :)

[@klausklemper5987]

I love the humor !!

[@oeschw7650]

The rest operator is useful to get new objects with keys removed to test react components/props when fiddling w enzyme/jest ie

[@TommiSvaerd]

I would want more videos like this! Maybe go a bit deeper into diffrent libraries/methods like promises, Observable etc? Cheers!

[@OfficialDevTips]

Yay! For generators and Observable, check out MPJ's video here kzbin.info/www/bejne/g561nquwp9dnos0, David also did a video with Observable and physics here kzbin.info/www/bejne/famVZYafoLKZfdk

[@tonysmarks3578]

Sir, please tell me about the extension that you are using which can check your code.

[@mtheoryx83]

Really like this format as something to throw into the mix!

[@RagePeanut]

11:14 Actually, if you didn't get a first name theMatch[1] would be undefined. You can even see that at 11:30 when you changed the regular expression. Still, I'm looking forward to named capturing groups, will be a game changer !

[@OfficialDevTips]

Yup you're right!

[@williamchou9067]

Curious what this ide plugin is to display the shape of objects!

[@sakransaleh4110]

I love you this episode very much. Especially when you are talking about the ES6 2018 feature. Because I had today I am study little bit about destructuring. I think care if you can make you episode add different features of JavaScript base then I think that show will be more effective and more enjoyable for us.

[@catwhisperer911]

const {email, ...userWithoutPII} = user will unfortunately cause a linting error of assigned value is never used for email. In eslint you can turn off the rule so it won't cause the error. just thought you'd like to know :)

[@MrMine2000]

Maybe changing it to '_email' can disable the warning?

[@catwhisperer911]

@@MrMine2000 it might but I personally never use pseudo visibility makers because module patterns make that unnecessary.

[@catwhisperer911]

Meant to say markers, not makers :)

[@ryanf591]

Content wasn't too complex. It's good to get info for professional JS examples. Thanks

[@FauroOficial]

what is the name of extension, less dont use console.log for see de result??

[@jajasaria]

OH MY GOD! How come i only know this channel just NOW? love this kind of video. Keep it up guys. SUBSCRIBE

[@vinisr12]

JS feels like it's becoming Elixir more and more. The matching scheme is there.

[@koodauskanava9096]

Video starts at 1:40

[@blackbird9854]

So with the first thing, what if i want only small part of a huge object? is there a way to do it using ... notation?

[@GifCoDigital]

If you want those small parts of the huge object in their own variables just omit the ... and just use destructuring. bigObj = { name : 'Bob', age : 32, sex : 'male', lots more key value pairs} {name, age} = bigObj You now have a variable name and a variable age. If however you want those "small parts" of the huge object all in one variable in their own object just create a new object and pick the parts you want to put in it. smallObj = { name : bigObj.name, age : bigObj.age }

[@blackbird9854]

GifCo also you can create and deconstruct object at the same time eg. const smallObj = { name, age, sex } = obj 'problem' with that is that you also create all the variables, i hope you could bo it better with ... notation, oh well thanks for answer anyways

[@rothbardfreedom]

"I like a lot of things that people hate." Java programmer.

[@kappe-n3v]

Oh this DEV-TIPS animation intro 👌 .... where do u got it from ? :D

[@rolfnoduk]

You keep explaining destructuring but rarely use it by default. Would you be able to use it more often when doing other stuff so it's more familiar to people?

[@ablgmv]

Why do you still use var?

[@OfficialDevTips]

It depends on if you are looking for function scope (var) or block scope (const, let). Also it is just plain old habit to use var to not have to bother about browser compatibility. Mostly being lazy to be honest.

[@ablgmv]

@@OfficialDevTips Get it, thanks)

[@j3bb9z]

Actually, Bluebird is still useful alternative to native promises, because it has better performance and some extra features.

[@ragnarlothbrok367]

How to configure VSCode like that?

[@compton8301]

I'm also waiting for this answer.

[@compton8301]

Actually search for an extension called Quokka on vs code's marketplace and install it.

[@herbertk9266]

Thks cool tutorial

[@tusharborole6155]

how is a red and green dot on every line of code appear in your ide?

[@OfficialDevTips]

Quokka

[@jonwalzmusic]

I guess I didn't realize people weren't already using this stuff...

[@stephenjames2951]

Maybe it would be clearer if you don't assign a city variable. `let { city: _, ...newObj} = obj;` Using the _ to make it clearer that it is not used

[@Chrosam]

0:16 nice animation ;)

[@zeocamo]

i love to see you videos, remind me of the time when i also only got like 3 years of exp. keep on coding guys, you will learn to understand the world of programing one day :)

[@agorafobicoMusica]

1:35 Let's create a var.. I mean...let...I mean...const

[@artalar]

How to delete computed property with immutability? ``` const object = { key1: 1, key2: 2 }; const deletePropertyName = "key1"; const { [deletePropertyName ]: anyUnusedVariableName, ...newObjectWithoutComputedProperty } = object; newObjectWithoutComputedProperty // { key2: 2 } ```

[@drsfn101]

Guys thank you for the video and i really like you why of making it but realize that you focus only on the developing of the channel and you forget about the design part of it the channel name was dev tips for designers what the last time you made video about html templating or ui/ux trends or visual design ... Etc i hope you get my point

[@OfficialDevTips]

We know what you mean. Problem is we are pretty terrible designers... We're hearing you though! There are many topics around design stuff tied to development that is not as techy as this video.

[@szabikeresztes1157]

Always like to be challenged mate!

[@developingdeveloper7441]

fluffykiiiiiins!!!

[@CoryTheSimmons]

Give me ? chaining or give me death... so damn sick of `foo && foo.bar && foo.bar.baz` littering everything.

[@oktavic777]

There is a proposal in Stage: 1 called "Optional Chaining". So `foo && foo.bar && foo.bar.baz` will be `foo?.bar?.baz`

[@joel_ricci]

I couldn't agree more. If ES2018 should bring anything new, that should be it! 😩

[@maged.william]

Yeah yeah guys be as JS nerdy all you wan't

[@h3rteby]

While I understand the destructuring rest hack, I think it's pretty terrible for readability. Also, declaring the "email" variable just for the side-effect? 🤨 I'd rather see lodash.omit and lodash.pick brought in as Object.omit and Object.pick. They're dead simple to understand.

[@ablanchi]

Yoansson

[@jerzees]

Just watched the first few minutes, but why would call destructing with the spread operator a "sort of like a hack!"? Its the intended use, and you seem so confused about the entire feature, the other guy responds like its magic, its been around for a while. Is this just KZbin acting or what is the intention? Sorry dont want to be a downer but I used to follow this channel with the "previous owner", I dont know who you guys are and im trying to determine if I should keep following or not. Feels like the skill level has dropped quite a bit, is this channel now targeting more like beginners?

[@blackbird9854]

jerzees What if they do that on purpose? I'm pretty sure most of people don't watch these videos if they already know all that. So if one of them doesn't understand or pretends to, people watching this videos that acually don't understand the subject get more examples or explanation, asking questions is really good way to learn but you can't ask pre recorded video a question so they do that for you.

[@jerzees]

That was kind of my question, if this is "an act". Either way, my personal preference is to watch people with knowledge talk and explain a feature, show examples in a normal way. Like Jake Archibald and Surma does in Google´s HTTP203 for example. Anyway, just gonna unsubscribe, dont feel like this channel speaks to my taste anymore, bye!

[@aqua123670]

oh god please no! now they lost 1 subscriber of 305k. That's 0.000327868%, wow !! significant ! they must be desperate

[@jerzees]

@@aqua123670 well, you know there might be more people that feel the same way? And if you add them together... As a channel owner, I believe they want to know what the viewers think, and why they might leave

[@jerzees]

@@dohnjoe342 well, feedback on why people leave is helpful sometimes

[@imorganmarshall]

"I like a lot of things people hate" -MPJ

[@elmirmahmudov6215]