ES6: New things in JavaScript

Today I read 4 Modern JavaScript (ES6+) Features You Should Be Using Now, by Mosh Hamedani. He says these are “the 20% of features that you use 80% of the time.” Plus, they are all “natively supported in all modern browsers.” (Here’s a nice link to a chart showing which features are supported in which browsers.)

Aside: This is the best ES6 reference I know. It’s by Luke Hoban.

var message = 'Hi ' + name + ',';

var message = `Hi ${name},`;

Top: Old way to concatenate strings and variables. Bottom: New way, using “template literals.” Note the two backticks in the bottom line.

Use of let and const instead of var: Both of these define variables scoped to the containing block, such as a for-loop.

var square = function(number) { 
   return number * number; 
} 

Above, the old way of writing an anonymous function. Below, the new way, with the “fat arrow” (=>):

const square = (number) => { 
   return number * number; 
} 

Lots more about those fat-arrow functions in Mosh’s post.

Destructuring lets us “extract properties from an object, or items from an array.” The syntax is like this:

const { street, city, state } = address;

That creates three new variables, with the values of address.street, address.city, and address.state from an existing object, address, with those properties. Syntax for extracting from an array is similar; see the post for an example.