Laurie

Posted on Jun 11, 2019

What's your favorite addition to ES2015+

#discuss #javascript #webdev

If you're unfamiliar with ECMAScript I have an explanation here

The Layers of Javascript

Laurie ・ Mar 26 '19 ・ 3 min read

#javascript #learning #react

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)

Jake Rios • Jun 11 '19

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]

Laurie • Jun 11 '19

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

Ken Bellows • Jun 11 '19

oh man, Object spread is the best thing... maybe I should change my answer 🤔

Saurabh Sharma • Jun 12 '19

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

Alex Lohr • Jun 11 '19

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

Jonathan Kuhl • Jun 11 '19

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.

Anas T • Jun 12 '19

Example?

Alex Lohr • Jun 12 '19

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');
  }
};

Laurie • Jun 12 '19

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.

Alex Lohr • Jun 12 '19

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

Laurie • Jun 11 '19

Ah callback hell. Such fun.

Max Antonucci • Jun 11 '19

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.

Laurie • Jun 11 '19

Always a solid choice!

rhymes • Jun 11 '19

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

Laurie • Jun 11 '19

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

rhymes • Jun 11 '19

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

Jonathan Kuhl • Jun 11 '19

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.

Laurie • Jun 11 '19

Definitely my favorite!

Dustin King • Jun 11 '19

Class syntax.

Adam Crockett 🌀 • Jun 11 '19 • Edited

I am looking forward to the up and coming class field syntax to fix the broken syntax that is class syntax. Syntax 😂

Laurie • Jun 11 '19

Oh yes, definitely an awesome addition.

Ken Bellows • Jun 11 '19

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

Laurie • Jun 11 '19

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

Ken Bellows • Jun 11 '19

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

#javascript #es2015 #es6 #intermediate

Laurie • Jun 11 '19

Oh awesome. Will check it out!

David Chase • Jun 11 '19

How about Proxies and Map/Sets ?

Laurie • Jun 11 '19

Ooh, that's a new answer!

David Chase • Jun 11 '19

Yah trying to mix it up 😂

Adam Crockett 🌀 • Jun 11 '19

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

Jaff Parker • Jun 12 '19

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

Saurabh Sharma • Jun 12 '19

native support for import/export 😂 and certainly those bacticks

`Hello ${World}`

and

styled.div`
  color: blue
`

View full discussion (36 comments)

DEV Community

What's your favorite addition to ES2015+

The Layers of Javascript

Laurie ・ Mar 26 '19 ・ 3 min read

Top comments (36)

The JavaScript Iteration Protocols and How They Fit In

Ken Bellows ・ 12 min read

Read next

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Mastering REST API Best Practices in Python 🐍

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Experimenting with "following" tab — will give more details once more fully launched. Folks have been asking for something like this for a while.