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.