DEV Community

loading...

What's your favorite addition to ES2015+

laurieontech profile image Laurie 惻1 min read

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
}
Enter fullscreen mode Exit fullscreen mode

Instead of this

(data) => {
    data.data.item
}
Enter fullscreen mode Exit fullscreen mode

Discussion (36)

pic
Editor guide
Collapse
jrios profile image
Jake Rios

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.


let numbers = [1, 2, 3]

numbers = [...numbers, 4]

// [1, 2, 3, 4]

Collapse
laurieontech profile image
Laurie Author

Spread operator is wonderful. What's crazy to me is how many different ways it can be used. Like arrays vs. objects.

Collapse
kenbellows profile image
Ken Bellows

oh man, Object spread is the best thing... maybe I should change my answer šŸ¤”

Collapse
itsjzt profile image
Saurabh Sharma

I wish there could be such an easy way to remove elements from array.

Collapse
lexlohr profile image
Alex Lohr

Async/await is so great. No more callback hell ever again.

Collapse
jckuhl profile image
Jonathan Kuhl

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.

Collapse
anastely profile image
Anas T

Example?

Collapse
lexlohr profile image
Alex Lohr

Let's say, you need to sequentially resolve three promises. Callback hell looks like this:

function asyncJob(callback) {
  asyncA(xyz, (err, buffer) => {
    if (err) { throw err; }
    asyncB(buffer, (err, result) => {
      if (err) { throw err; }
      asyncC(result, (err, response) => {
        if (err) { throw err; }
        if (response.ok()) { return callback(); }
        throw new Error('Could not send result');
      });
    })
  });
}

Now the same with Promises:

const asyncJob = () => asyncA(xyz)
.then((buffer) => asyncB(buffer))
.then((result) => asyncC(result))
.then((response) => {
  if (response.ok()) { return Promise.resolve(); }
  throw new Error('Could not send result');
});

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:

const asyncJob = async () => {
  const buffer = await asyncA(xyz);
  const result = await asyncB(buffer);
  const response = await asyncC(result);
  if (!response.ok()) {
    throw new Error('Could not send result');
  }
};
Thread Thread
laurieontech profile image
Laurie Author

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.

Thread Thread
lexlohr profile image
Alex Lohr

.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.

Collapse
laurieontech profile image
Laurie Author

Ah callback hell. Such fun.

Collapse
maxwell_dev profile image
Max Antonucci

Arrow functions. I love the clean, simple syntax for managing functions. We can go from this:

const add = function(a, b) {
  return a + b;
}

To just this:

const add = (a, b) => a + b;

There are learning and readability curves here, but it's not bad and I think well worth it.

Collapse
laurieontech profile image
Laurie Author

Always a solid choice!

Collapse
rhymes profile image
rhymes

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

Collapse
laurieontech profile image
Laurie Author

You can't have 5 favorites rhymes! Just kidding, love it.

Collapse
rhymes profile image
rhymes

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

Collapse
jckuhl profile image
Jonathan Kuhl

Destructuring

So before ES2015 and destructuring we had this:

var width = this.state.width;
var height = this.state.height;
var position = this.state.position;

or for arrays

var width = this.state[0];
var height = this.state[1];
var position = this.state[2];

Now it's prettier with

const { width, height, position } = this.state;

or for arrays:

const [ width, height, position ] = this.state;

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:

const entries = Object.entries(obj);
for([key, value] of entries) {
   // do something with the key and value
}

Or this

Object.entries(obj).filter(([key, value]) => {
    if(value > 10)
       return key;
});

It's nice, like python packing/unpacking:

value1, value2 = sys.argv[1:2]

I mean, sure it can get ugly:

const {
   width,
   height,
   position,
   color,
   font,
   kerning,
   linespacing,
   border,
   background,
   textcontent
} = this.state;

but that goes for anything in programming.

Collapse
laurieontech profile image
Laurie Author

Definitely my favorite!

Collapse
cathodion profile image
Dustin King

Class syntax.

Collapse
adam_cyclones profile image
Adam Crockett • Edited

I am looking forward to the up and coming class field syntax to fix the broken syntax that is class syntax. Syntax šŸ˜‚

Collapse
laurieontech profile image
Laurie Author

Oh yes, definitely an awesome addition.

Collapse
kenbellows profile image
Ken Bellows

Ooooph tough decision... probably the combination of proper native iterators, the for ... of loop, and generators, which all combine together to amazing effect.

Collapse
laurieontech profile image
Laurie Author

I watched an awesome talk on generators last week. Not something Iā€™d used before!

Collapse
kenbellows profile image
Ken Bellows

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!

Thread Thread
laurieontech profile image
Laurie Author

Oh awesome. Will check it out!

Collapse
davidchase profile image
David Chase

How about Proxies and Map/Sets ?

Collapse
laurieontech profile image
Laurie Author

Ooh, that's a new answer!

Collapse
davidchase profile image
David Chase

Yah trying to mix it up šŸ˜‚

Collapse
adam_cyclones profile image
Adam Crockett

But I said metaprogramming so that is the category that proxies sit under .. anyway here's how to break JavaScript with proxies.

Collapse
jaffparker profile image
Jaff Parker

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

Collapse
itsjzt profile image
Saurabh Sharma

native support for import/export šŸ˜‚ and certainly those bacticks

`Hello ${World}`

and

styled.div`
  color: blue
`
Collapse
adam_cyclones profile image
Adam Crockett

Metaprogramming for sure! It's probably not healthy to have that much power though, I still love it.

Collapse
laurieontech profile image
Laurie Author

Haha, with great power...

Collapse
silvestricodes profile image
Jonathan Silvestri

The spread operator and I are very good friends.

Collapse
laurieontech profile image
Laurie Author

Understandably :)

Collapse
prachurjya15 profile image
Prachurjya Basistha

The easy arrow function syntax to make small function really short and less cramy like eg:

 const square= num => num*num 

instead of old pre ES-6 syntax