JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript ES6 Features

ECMAScript 2015 (or ES6) is the sixth and major edition of the ECMAScript language specification standard.

It defines the standard for the JavaScript implementation.

This chapter will introduce some of the new features in ES6:

  • JavaScript let keyword
  • JavaScript const keyword
  • Exponentiation (**) operator
  • JavaScript Default parameter values
  • New Array Methods
  • New Number Properties
  • New Number Methods
  • Arrow Functions
  • Classes
  • Rest Parameters
  • Destructuring Assignment

In this chapter, we will discuss these ES6 features.


Browser Compatibility for ES6 (ECMAScript)

The numbers in the table specify the first browser version that fully supports the ES6:

Features
ECMAScript 6 58 54 55 10 14

JavaScript let Keyword

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

Block scoping means that a new scope is created between a pair of curly brackets {...}.

Run code

JavaScript const Keyword

The const keyword declares a read-only named constant.

Declaring a variable with const is similar to let when it comes to Block Scope.

Run code

Note: The value of a constant cannot change through reassignment, and it can't be redeclared.


JavaScript Exponentiation Operator

The exponentiation operator (**) raises the first operand to the power of the second operand.

Run code

Math.pow(a, b) produces the same result as a**b:

Run code

JavaScript Default Parameter

ES6 lets you specify default values to the function parameters.

This means that if no arguments are provided to function when it is called these default parameters values will be used.

Run code

Template Literals

Template literals provide an easy and clean way create multi-line strings and perform string interpolation.

Template literals are created using back-tick (` `) character instead of the usual double or single quotes.

Run code

One special feature of the template literal feature is the ability to include expressions and variables within a string. Instead of having to use concatenation, we can use the ${} syntax to insert a variable.

Run code

New Array Methods

ES6 added 2 new methods to the Array object:


Array.find()

The Array.find() method returns the value of the first element in the array that satisfies the provided testing function.

In the following example we will find the first element that is equal to or larger than 18:

Run code

Note that the testing function takes 3 arguments:

  • The element value (required)
  • The element index (optional)
  • The array itself (optional)

Array.findIndex()

The Array.findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

In the following example we will find the index of the first element that is equal to or larger than 18:

Run code

Note that the testing function takes 3 arguments:

  • The element value (required)
  • The element index (optional)
  • The array itself (optional)

New Number Properties

ES6 added 3 new static properties to the Number object:

  • Number.EPSILON
  • Number.MIN_SAFE_INTEGER
  • Number.MAX_SAFE_INTEGER
Run code

The Number.EPSILON property represents the difference between 1 and the smallest floating point number greater than 1.

The Number.MIN_SAFE_INTEGER property represents the minimum safe integer in JavaScript -(253 - 1).

The Number.MAX_SAFE_INTEGER property represents the maximum safe integer in JavaScript (253 - 1).


New Number Methods

ES6 added 2 new methods to the Number object:


Number.isInteger() Method

The Number.isInteger() method determines whether the passed value is an integer.

If the passed argument is an integer, return true, otherwise return false.

Run code

Number.isSafeInteger() Method

The Number.isSafeInteger() method determines whether the provided value is a number that is a safe integer.

Run code

A safe integer is an integer that can be exactly represented as an IEEE-754 double precision number, and whose IEEE-754 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation.


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.

Run code

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 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.

Run code

JavaScript Classes

Classes are introduced in ES6 which looks similar to classes in other object oriented languages, however they do not work exactly the same way.

You can declare a class using the class keyword followed by a class-name.

Run code

The Rest Parameters

The rest parameter syntax allows us to pass an indefinite number of arguments to a function as an array.

This is particularly helpful in situations when you want to pass arguments to a function but you have no idea how many you will need.

A rest parameter is specified by prefixing a named parameter with rest operator (...) i.e. three dots.

Run code

Destructuring Assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The object and array literal expressions provide an easy way to create ad hoc packages of data.

The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.

Run code

This capability is similar to features present in languages such as Perl and Python.