Small shanges

Better unicode support

• Support UTF-16
• Added unicode flag to Regexp

String changes

• includes() 
• startsWith() 
• endsWith()
• repeat() 

Array changes

ES6

Array comprehensions

Block bindings

ES5

ES6

Constants

ES6

Object destructing

ES6

Array destructing

ES6

Map + Set + WeakMap + WeakSet

• The keys of an Object are Strings, where they can be any value for a Map.
• You can get the size of a Map easily while you have to manually keep track of size for an Object.

Map

Set

• The Set object lets you store unique values of any type, whether primitive values or object references.

• The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values.

WeakMap

• The WeakSet object lets you store weakly held objects in a collection.

WeakSet

Functions

Default parameters

ES5

ES6

Rest Parameters

ES5

ES6

Spread Parameters

ES6

The name Property

ES6

Arrow functions

• Lexical this binding - The value of this inside of the function is determined by where the arrow function is defined not where it is used.
• Not newable - Arrow functions do not have a [[Construct]] method and therefore cannot be used as constructors. Arrow functions throw an error when used with new.
• Can’t change this - The value of this inside of the function can’t be changed.
• No arguments object - You can’t access arguments through the arguments object.

Arrow functions

Syntax

Arrow functions

Syntax

Arrow functions

ES5

ES6

Objects

Property initializer Shorthand

ES5

ES6

Method Initializer Shorthand

ES5

ES6

Computed Property Names

ES6

Object.assign()

ES6

ES5

Duplicate Object Literal Properties

ES6

ES5

Super References

ES6

Symbols

• ECMAScript 6 symbols began as a way to create private object members, a feature JavaScript developers have long wanted. The focus was around creating properties that were not identified by string names.
• Symbols are actually a new kind of primitive value, joining strings, numbers, booleans, null, and undefined.
• The ECMAScript 6 standard uses a special notation to indicate symbols, prefixing the identifier with @@, such as @@create.

Creating Symbols

ES6

Sharing Symbols

ES6

ECMAScript 6 provides a global symbol registry that you can access at any point in time.

Well-Known Symbols

In addition to the symbols you defined, there are some predefined symbols as well (called well-known symbols in the specification). These symbols represent common behaviors in JavaScript that were previously considered internal-only operations.

• @@hasInstance - a method used by instanceof to determine an object’s inheritance.
• @@iterator - a method that returns an iterator
• @@toStringTag - a string used by Object.prototype.toString() to create an object description.

Classes

Class Declarations

ES5

ES6

Keep in mind:

• Class declarations are not hoisted.
• All code inside of class declarations runs in strict mode automatically.
• All methods are non-enumerable.
• Calling the class constructor without new throws an error.

Accessor Properties

ES6

Static members

ES6

ES5

Class extending

ES6

Iterator and Generators

Iterators

ES6

Generators

A generator is a special kind of function that returns an iterator.​

ES6

Generators

The most interesting aspect of generator functions is that they stop execution after each yield statement

ES6

Iterables and for-of

Closely related to the concept of an iterator is an iterable. The for-of loop is similar to the other loops in ECMAScript except that it is designed to work with iterables.

ES6

Custom iterators

Developer-defined objects are not iterable by default, but you can make them iterable by using the @@iterator symbol. For example:

ES6

Built in iterators

Another way that ECMAScript 6 makes using iterators easier is by making iterators available on many objects by default.

• entries() - returns an iterator whose values are a key-value pair.
• values() - returns an iterator whose values are the values of the collection.
• keys() - returns an iterator whose values are the keys contained in the collection.

Built in iterators

ES6

Result

Strings

Template strings

• Multiline strings - JavaScript has never had a formal concept of multiline strings.
• Basic string formatting - The ability to substitute parts of the string for values contained in variables.
• HTML escaping - The ability to transform a string such that it is safe to insert into HTML.

In reality, though, template strings are ECMAScript 6’s answer to several ongoing problems in JavaScript:

Basic syntax

ES6

Substitutions

ES6

Proxy

Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc.

ES6

Promise

The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:

• pending: initial state, not fulfilled or rejected.
• fulfilled: successful operation
• rejected: failed operation.
• settled: the Promise is either fulfilled or rejected, but not pending.

ES6

executor

Function object with two arguments resolve and reject. The first argument fulfills the promise, the second argument rejects it. We can call these functions once our operation is completed.

Promise methods

• Promise.all(iterable)
• Promise.race(iterable)
• Promise.reject(reason)
• Promise.resolve(value)

 

ES6

Modules

Standart of ES6 Modules consist from two parts:

• Declarative syntax (for importing and exporting).
• Programmatic loader API: to configure how modules are loaded and to conditionally load modules.

Example (declarative)

ES6

Example (programmatic)

ES6

What next?

 

How to use it now?

1. Use Transpilers: Babel, Traceur compiler, etc.
2. Check updates of your browser...