ES6, also known as ECMAScript 2015, is a significant update to the language, and the first update to the language after ES5 was standardized in 2009.
In these series of posts, I will try to cover the main changes that have been introduced in ES6.
Features
- let and const
- arrow functions
- template literals
- spread and rest operators
- destructuring arrays and objects
let and const
let and const keywords allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which declares a variable globally, or locally to an entire function regardless of block scope.
The const declaration creates a read-only reference to a value so it can not be reassigned.
Example
Browser compatibility
const
let
Arrow functions
An arrow function expression is a compact alternative to a traditional function expression
Differences & Limitations:
- Does not have its own bindings to this or super, and should not be used as methods.
- Does not have arguments, or new.target keywords.
- Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
- Can not be used as constructors.
- Can not use yield, within its body.
Example
Browser compatibility
Template literals
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Example
Browser compatibility
Spread and rest operators
Spread syntax (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Example
Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax “expands” an array into its elements, while rest syntax collects multiple elements and “condenses” them into a single element.
Example
Browser compatibility
Destructuring arrays and objects
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Browser compatibility
Summary
Marat Badykov
Full-stack web developer. I enjoy writing Php, Java, and Js.