If you're unfamiliar with ECMAScript I have an explanation here
I'd love to hear about everyone's favorite piece of ES2015+ syntax and how it makes your JavaScript development experience better!
I'll start with mine, destructuring assignment! I love that I can do this
({data}) => {
data.item
}
Instead of this
(data) => {
data.data.item
}
Top comments (36)
Using the spread operator to append/prepend elements to an array. It also returns the array rather than the length of the array, which I've never found that useful.
Spread operator is wonderful. What's crazy to me is how many different ways it can be used. Like arrays vs. objects.
oh man, Object spread is the best thing... maybe I should change my answer π€
I wish there could be such an easy way to remove elements from array.
Async/await is so great. No more callback hell ever again.
First time I used Async/Await was a Vue project with a Java Servlet backend. Plopped await in front of the fetch that connected with my back end, and async in front of vue's
mounted()
method and squealed in delight when my component rendered with my data base information for the first time.Multiple moments of triumph at once, first use Async/Await, first success with a servlet, and was still new to Vue.JS.
Example?
Let's say, you need to sequentially resolve three promises. Callback hell looks like this:
Now the same with Promises:
Reads a lot better, doesn't it? Still, it's pretty terse and has a lot of repetition, so async/await is a big improvement when it comes to reading flow:
We call the second thenable hell.
I'm a fan of Promise.all as a solution, but I acknowledge async/await is a great option too.
.then(...)
still takes a callback. So while it reads much more congruently, it's basically still good old callback hell, just in a better suit and with better manners. Async/await is a game changer when it comes to readability of asynchronous code.Ah callback hell. Such fun.
Arrow functions. I love the clean, simple syntax for managing functions. We can go from this:
To just this:
There are learning and readability curves here, but it's not bad and I think well worth it.
Always a solid choice!
Definitely destructuring, spread, arrow functions, template literals for string interpolation, generators (even if I'm not currently using them), array includes, async/await. Curious to see how async interation works
You can't have 5 favorites rhymes! Just kidding, love it.
hahahah ok, so if I have to choose one I'm going to say destructuring.
You can live without spread, arrow functions, literals, generators, includes and asnc await.
Destructuring in function arguments makes the code much more readable instead of having either a super long list of parameters or
options
as an argument.Destructuring FTW
Destructuring
So before ES2015 and destructuring we had this:
or for arrays
Now it's prettier with
or for arrays:
It comes really handy when iterating over
Object.entries
, which gives you an array like:[ [key1, value1], [key2, value2] . . . . [keyN, valueN] ]
Because you can do this:
Or this
It's nice, like python packing/unpacking:
I mean, sure it can get ugly:
but that goes for anything in programming.
Definitely my favorite!
Class syntax.
I am looking forward to the up and coming class field syntax to fix the broken syntax that is class syntax. Syntax π
Oh yes, definitely an awesome addition.
Ooooph tough decision... probably the combination of proper native iterators, the
for ... of
loop, and generators, which all combine together to amazing effect.I watched an awesome talk on generators last week. Not something Iβd used before!
They're super cool and can really clean up your code in some cases, especially when you get into async iterators/generators. My second article ever on dev.to was actually about iterators, generators, symbols,
for ... of
, and how it all fits together!The JavaScript Iteration Protocols and How They Fit In
Ken Bellows γ» 12 min read
Oh awesome. Will check it out!
How about Proxies and Map/Sets ?
Ooh, that's a new answer!
Yah trying to mix it up π
But I said metaprogramming so that is the category that proxies sit under .. anyway here's how to break JavaScript with proxies.
Spread, destructuring, arrow functions, async-await - they made me actually see JavaScript for what it is instead of just a browser scripting language π now I'm just waiting for the pipeline operator
native support for import/export π and certainly those bacticks
and