My favourite ES6 features

Two days ago, I wrote a post called Old does not mean dead. The point of it is that "new does not mean best". That we should embrace old, boring methods wherever possible. Sometimes, though, the new features are better. These are my favourite features of ES6.

Template literals

Template literals are awesome. You can insert expressions straight into them without needing to constantly open/close quotes and concatenate strings. They also support multiple lines. Here's a simple example from my noughts and crosses project.

This is a function that uses a template literal:

function createWinHTML (props) {

  return `
    <h2>🎉 The winner is ${props.winner}! 🎉</h2>
    <button type="button" data-reset>Play Again</button>
  `;

}

This is the same function using old-school string concatenation:

function createWinHTML (props) {

  return (
    "<h2>🎉 The winner is " + props.winner + "! 🎉</h2>" +
    "<button type='button' data-reset>Play Again</button>"
  );

}

The template literal is objectively easier to write and reason with.

The `let` statement

I've yet to use the let statement regularly, but I love it. It's block-scoped, which means it only exists within its containing curly braces {}. This means you can keep using the same iterator variable over and over again inside separate for loops.

Assume two arrays, fruits and vegetables.

Using the let statement, you can do this:

// Loop through the fruits array
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Loop through the vegetables array
for (let i = 0; i < vegetables.length; i++) {
  console.log(vegetables[i]);
}

Each for loop has its own separate i variable.

With the older var statement, you'd have to use different letters:

// Loop through the fruits array
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Loop through the vegetables array
for (var n = 0; n < vegetables.length; n++) {
  console.log(vegetables[n]);
}

To be honest, though, I don't work with for loops very often. The Array.forEach() method is so much easier.

Shorthand object properties

If you have a property and value with the same name, you can write them much more cleanly in ES6. Here's an example from the clock I built.

Using ES6, I was able to do this:

var updateTime = function () {
  var time = new Date().toLocaleString();
  app.setData({ time });
};

This works because the property and value are both called time. In ES5, I would have had to do this:

var updateTime = function () {
  var time = new Date().toLocaleString();
  app.setData({ time: time });
};

Learn more: Object Property Value Shorthand in JavaScript with ES6 →

Note: Reef has been updated and no longer uses a setData() method. This is still a great example of the ES6 shorthand, though.

The `Array.from()` method

The Array.from() method is bloody brilliant. I use it all the time in combination with the querySelectorAll() method. The latter returns a NodeList, not a true array, so I can use Array.from() to convert it:

// This returns a NodeList, not an array
var paragraphs = document.querySelectorAll("p");

// Now it's a true array
paragraphs = Array.from(paragraphs);

The old-school way requires using Array.prototype.slice.call(), which is quite verbose and less readable.

Some people like to do it using spread syntax (also ES6), but it's not my cup of tea. I just think it's extremely unreadable:

// This returns a NodeList, not an array
var paragraphs = document.querySelectorAll("p");

// Now it's a true array
paragraphs = [...paragraphs];

Promises and the Fetch API

ES6 brought native promises to JavaScript along with the Fetch API. They make it so much easier to work with AJAX requests. This post would get pretty long if I explained them, so I'll defer to these ones instead: