Javascript ES6

ECMAScript 2015 was the second major revision to JavaScript.

ECMAScript 2015 is also known as ES6 and ECMAScript 6.

This chapter describes the most important features of ES6.

New Features in ES6

  • The let keyword
  • The const keyword
  • Arrow Functions
  • The ... Operator
  • For/of
  • Map Objects
  • Set Objects
  • Classes
  • Promises
  • Symbol
  • Default Parameters
  • Function Rest Parameter
  • String.includes()
  • String.startsWith()
  • String.endsWith()
  • Array.from()
  • Array keys()
  • Array find()
  • Array findIndex()
  • New Math Methods
  • New Number Properties
  • New Number Methods
  • New Global Methods
  • Object entries
  • JavaScript Modules

Browser Support for ES6 (2015)

ES6 is fully supported in all modern browsers since June 2017:

         

Chrome
51

Edge
15

Firefox
54

Safari
10

Opera
38

May 2016

Apr 2017

Jun 2017

Sep 2016

Jun 2016

ES6 is not supported in Internet Explorer.


JavaScript let

The let keyword allows you to declare a variable with block scope.

Example

var x = 10;
// Here x is 10
{
  
let x = 2;
  
// Here x is 2
}
// Here x is 10

- »

Read more about let in the chapter: JavaScript Let.


JavaScript const

The const keyword allows you to declare a constant (a JavaScript variable with a constant value).

Constants are similar to let variables, except that the value cannot be changed.

Example

var x = 10;
// Here x is 10
{
  
const x = 2;
  
// Here x is 2
}
// Here x is 10

- »

Read more about const in the chapter: JavaScript Const.



Arrow Functions

Arrow functions allows a short syntax for writing function expressions.

You don't need the function keyword, the return keyword, and the curly brackets.

Example

// ES5
var x = function(x, y) {
  
 return x * y;
}

// ES6
const x = (x, y) => x * y;

- »

Arrow functions do not have their own this. They are not well suited for defining object methods.

Arrow functions are not hoisted. They must be defined before they are used.

Using const is safer than using var, because a function expression is always a constant value.

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:

Example

const x = (x, y) => { return x * y };

- »

Learn more about Arrow Functions in the chapter: JavaScript Arrow Function.


The Spread (...) Operator

The ... operator expands an iterable (like an array) into more elements:

Example

const q1 = ["Jan""Feb""Mar"];
const q2 = ["Apr""May""Jun"];
const q3 = ["Jul""Aug""Sep"];
const q4 = ["Oct""Nov""May"];

const year = [...q1, ...q2, ...q3, ...q4];

- »

The ... operator can be used to expand an iterable into more arguments for function calls:

Example

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

- »


The For/Of Loop

The JavaScript for/of statement loops through the values of an iterable objects.

for/of

Login
ADS CODE