ECMAScript 6 Complete Tutorial

JavaScript is a superset of ECMAScript scripting language. ECMAScript forms the language base for JavaScript, JScript and ActionScript. In this tutorial series we will look at ECMAScript 6, a new version of ECMAScript providing a new set features and fixes to JavaScript.

ECMAScript6 is also called as “ES6″, “Harmony” and “ES.next”.

Categorizing ES6 Features

All the new features of ES6 can be categorized in 7 categories. Here is the list of categories:

Variables and Parameters
Classes
Proxies
Build-in Objects and Prototype based features
Promises
Reflect API
Modules
Iterators and Generators

ECMAScript 6 Compatibility

Kangax has created a ES6 compatibility table which lists the ES6 features and browsers which support or don’t support them.

You can also use caniuse.com to find the support of various ES6 features on various different browsers.

Running ECMAScript 6 in an Incompatible Browser

If you are writing ES6 for your website on development phase then you can embed the Traceur compiler in your webpages which will compile the ES6 to simple browser supportable JavaScript code on the fly in the browser.

Here is how to embed Traceur in your website

<!doctype html>
<html>
<head>...</head>
<body>
...


<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
//Place ES6 code here
</script>
</body>
</html>

On production site compiling ES6 to browser supportable JS on every page load can be a resource & time consuming task and can effect the site performance. Its recommend that you use Traceur’s node compiler to compile once for all time and embed the compiled JS in your pages.

If you don’t like this compile idea then you can use ES6 polyfills. Polyfill is not available for every ES6 feature.

This series just provides an overview of some important and most used ES6 features. If you want to learn ES6 in depth they you can get my book Learning ECMAScript 6 which is published by Packt.

Here is the series:

JavaScript "let" Keyword
"let" keyword was introduced in ES6. It lets you define block scope(bracket scope) variables in JavaScript. Initially JavaScript only supported functi ...Continue Reading
JavaScript "const" Keyword
"const" keyword was introduced in ES6. It lets you define read only variables using JavaScript. Variables created using "const" are block scoped(or br ...Continue Reading
JavaScript Function Return Multiple Values
There were many different ways purposed by JavaScript developers for returning multiple values in an function. But ECMAScript 6 has come up with an ea ...Continue Reading
Default Function Arguments Values in JavaScript
ES6 provides a new syntax that can be used to define default values to function parameters: function myFunction(x = 1, y = 2, z = 3) { con ...Continue Reading
JavaScript "..." Operator
ES6 introduced "..." operator which is also called as spread operator. When "..." operator is applied on an array it expands the array into multiple v ...Continue Reading
Python like Multiline Strings In JavaScript
One of the most loved python language features is multiline strings. In JavaScript there is actually no support for multiline strings. But by doing so ...Continue Reading
JavaScript "class" Keyword
ECMAScript 6 introduced "class" keyword to define classes in JavaScript. Earlier to ES6, we had to use constructor function. Here is an example cod ...Continue Reading
JavaScript Arrow "=>" Function
ECMAScript 6 provides a new way to create functions which just contain one line of statement. This new type of function is called lambda or arrow func ...Continue Reading
JavaScript "for of" Loop Tutorial
for of loop was introduced in ES6 which allows you to easily iterate over elements of an collection.for of iterates over the values of elements of a c ...Continue Reading
JavaScript "yield" Keyword and "function*()" Syntax
ECMAScript 6 specification introduced a new JavaScript feature called as JavaScript Generators. JavaScript's yield keyword and function*() syntax toge ...Continue Reading
JavaScript "0o" Literal
"0o" is a new way of creating a number using octal value in ES6. Earlier to ES6, JS developers had to use "0" in front of numbers to specify its a oct ...Continue Reading
JavaScript "0b" Literal
"0b" lets you create a number using binary of the number directly. Developers usually provide number in decimal representation and it was converted to ...Continue Reading
JavaScript "Set" Object
JavaScript "Set" object is a collection of unique keys. Keys are object references or primitive types. Arrays can store duplicate values but Sets ...Continue Reading
Difference between Set and WeakSet in JavaScript
JavaScript Set and WeakSet objects allows you to store collection of unique keys. But there are some key differences between them. Here are the differ ...Continue Reading
JavaScript "Map" Object
JavaScript “Map” object is a collection of unique keys and corresponding values. Keys and Values can be object references or primitive types. 2 ...Continue Reading
Difference between "Map" and "WeakMap" in JavaScript
JavaScript "Map" and "WeakMap" objects allows you to store collection of unique keys and their corresponding values. But there are some key difference ...Continue Reading
Creating JavaScript Modules
In nutshell JavaScript modules are just a way of packaging related JavaScript code in its own scope which can be consumed by other JavaScript programs ...Continue Reading
ES6 Reflect API Tutorial
Object reflection is an language ability to able to inspect and manipulate object properties at runtime. JavaScript already had been supporting APIs f ...Continue Reading