JavaScript 2015 (ES6)

Browser Support for ES6 (2015)

ES6 has been fully supported in all modern browsers since June 2017:

• Chrome 51 (May 2016)
• Edge 15 (April 2017)
• Firefox 54 (June 2017)
• Safari 10 (September 2016)
• Opera 38 (June 2016)

Note: ES6 is not supported in Internet Explorer.

JavaScript let

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

Example:

var a = 10; // Here a is 10 { let a = 3; // Here a is 3 } // Here a 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 b = 20; // Here b is 20 { const b = 5; // Here b is 5 } // Here b is 20

Read more about const in the chapter: JavaScript Const.

Arrow Functions

Arrow functions provide a concise syntax for writing function expressions. You don't need the function keyword, the return keyword, and the curly brackets.

Example:

‍

// ES5 var multiply = function(x, y) { return x * y; } // ES6 const multiply = (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 omit the return keyword and the curly brackets if the function is a single statement.

Example:

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

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

Object Destructuring

Destructuring assignment simplifies assigning array values and object properties to variables.

Example:

Note: When destructuring an object, you must use the same name for the variables as the corresponding object keys (names). The order of the keys (names) does not matter.

Array Destructuring

Destructuring assignment makes it easy to assign array values and object properties to variables.

Example:

// Create an Array const colors = ["Red", "Blue", "Green", "Yellow"]; // Destructuring Assignment let [color1, color2] = colors;

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", "Dec"]; const year = [...q1, ...q2, ...q3, ...q4];

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

Example:

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

The For/Of Loop

The JavaScript for/of statement loops through the values of iterable objects. It allows you to loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.

Example:

const animals = ["Dog", "Cat", "Elephant"]; let result = ""; for (let animal of animals) { result += animal + " "; }

Looping over a string:

Example:

‍

JavaScript Maps

Maps allow using an Object as a key.

Example:

const produce = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]);

Learn more about Map objects and the difference between a Map and an Array in the chapter: JavaScript Maps.

JavaScript Sets

Example:

// Create a Set const letters = new Set(); // Add some values to the Set letters.add("x"); letters.add("y"); letters.add("z");

Learn more about Set objects in the chapter: JavaScript Sets.

JavaScript Classes

JavaScript Classes are templates for JavaScript Objects. Use the keyword class to create a class. Always add a method named constructor():

Syntax:

class ClassName { constructor() { ... } }

Example:

class Vehicle { constructor(make, model) { this.make = make; this.model = model; } } // Creating Objects from the Class const myCar1 = new Vehicle("Toyota", 2020); const myCar2 = new Vehicle("Honda", 2019);

Learn more about classes in the chapter: JavaScript Classes.

JavaScript Promises

A Promise is a JavaScript object that links "Producing Code" and "Consuming Code". "Producing Code" can take some time, and "Consuming Code" must wait for the result.

Syntax:

const myPromise = new Promise(function(resolve, reject) { // "Producing Code" (may take some time) resolve(); // when successful reject(); // when error }); // "Consuming Code" (must wait for a fulfilled Promise) myPromise.then( function(value) { /* code if successful */ }, function(error) { /* code if some error */ } );

Example Using a Promise:

const myPromise = new Promise(function(resolve, reject) { setTimeout(function() { resolve("Hello World!"); }, 3000); }); myPromise.then(function(value) { document.getElementById("demo").innerHTML = value; });

Learn more about Promises in the chapter: JavaScript Promises.

The Symbol Type

A JavaScript Symbol is a primitive data type just like Number, String, or Boolean. It represents a unique "hidden" identifier that no other code can accidentally access.

Example:

const person = { firstName: "Bob", lastName: "Brown", age: 30, eyeColor: "brown" }; let id = Symbol('id'); person[id] = 123456; // Now person[id] = 123456 // but person.id is still undefined

Note: Symbols are always unique. If you create two symbols with the same description, they will have different values.

Example:

Symbol("id") == Symbol("id"); // false

Default Parameter Values

ES6 allows function parameters to have default values.

Example:

function greet(name, greeting = "Hello") { return `${greeting}, ${name}`; } greet("Alice"); // returns "Hello, Alice"

Function Rest Parameter

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array.

Example:

function sum(...numbers) { let total = 0; for (let num of numbers) total += num; return total; } let totalSum = sum(4, 9, 16, 25, 29, 100, 66, 77);

String includes()

The includes() method returns true if a string contains a specified value, otherwise false.

Example:

let text = "Hello world, welcome to the universe."; text.includes("world"); // returns true

String startsWith()

The startsWith() method returns true if a string begins with a specified value, otherwise false.

Example:

let text = "Hello world, welcome to the universe."; text.startsWith("Hello"); // returns true

String endsWith()

The endsWith() method returns true if a string ends with a specified value, otherwise false.

Example:

let text = "Jane Doe"; text.endsWith("Doe"); // returns true

Array entries()

Example:

Create an Array Iterator, and then iterate over the key/value pairs:

const items = ["Notebook", "Pencil", "Eraser", "Ruler"]; const iterator = items.entries(); for (let entry of iterator) { document.getElementById("demo").innerHTML += entry; }

The entries() method returns an Array Iterator object with key/value pairs:

csharp

[0, "Notebook"] [1, "Pencil"] [2, "E

‍