ECMAScript 6 - The latest standardized version of JavaScript adopted in June 2015. At the moment, features of ES6 are just partially available through modern browsers. Useful information gathered in ES6 compatibility table reflects the new features supported by browsers and transpilers.
Let's take a look at the 10 most important innovations, although ES6 provides much more. To access the advanced features, you can:
- use a modern browser with ECMAScript 6 support (e.g. Google Chrome version 47), but be sure to add 'use strict' instruction in js files
- use ECMAScript 6 by installing Gulp-Babel plugin
- use Babel transpiler. Enter ECMAScript 6 code on the left side, and it will be converted into ECMAScript 5 on the right side.
Let's have a look into the details.
1. The let Keyword
Variables defined by the let
keyword have a number of advantages:
- Given this way, the variable is visible only within the block
- Variable
let
cannot be used until it has been declared
console.log(name);
let name = 'John';
By declaring the let
variable in a “for
” or “while
” loop, it will be only active within the loop itself. The same is true about if
blocks:
for (let num = 5; num < 10; num++) {
console.log(num);
}
console.log(num);
var number = 1;
if(number < 10) {
let v = 1;
v = v + 21;
v = v * 100;
v = v / 8;
console.log(v);
}
console.log(v);
It is important to note that it is forbidden to declare let
variable twice. The following example leads to the error:
let name;
let name;
2. Classes
To describe a class in earlier versions of JavaScript, it was necessary to write the following:
function Product(price, category, description) {
this.price = price;
this.category = category;
this.description = description;
this.isPublished = false;
}
Product.prototype.publish = function publish() {
this.isPublished = true;
};
Product.prototype.unpublish = function unpublish() {
this.isPublished = false;
};
In ECMAScript 6, to declare a class, one should use keywords class and constructor. Now you can as well inherit new classes using the "class Child extends Parent
" syntax, which might be familiar to you because of other object-oriented programming languages (e.g. PHP). Static
methods can also be declared in classes. Let’s take the following example as illustration to the statement:
class Product {
constructor(price, category, description) {
this.price = price;
this.category = category;
this.description = description;
this.isPublished = false;
}
publish() {
this.isPublished = true;
}
unpublish() {
this.isPublished = false;
}
static getDate() {
return new Date();
}
}
class DownlowdableProduct extends Product{
}
To create an instance of the class, you can use keyword new
.
3. Default Values
ES6 introduces the possibility to set default values for parameters. The syntax of this feature is self-explanatory. The default values are specified when function is called. Here is an example, where isPublished
is set by default:
class Product {
constructor(price, category, description, isPublished = false) {
this.price = price;
this.category = category;
this.description = description;
this.isPublished = isPublished;
}
publish() {
this.isPublished = true;
}
unpublish() {
this.isPublished = false;
}
}
Expressions can be set as default values for parameters.
function sayHello(name = getCurrentUser().toUpperCase()) {
console.log('Hello, ' + name);
}
function getCurrentUser() {
return 'Guest';
}
sayHello();
4. The const keyword
To declare a constant, you can use const
keyword, thus creating a variable that cannot be changed:
const MAX_NUM = 5;
MAX_NUM = 10;
Note that if an object is assigned to constant, you cannot change the very constant, but you can modify properties within it. This also applies to arrays or other object values.
const person = {
screenName: "Guest"
};
person.screenName = "John";
person = 5;
5. Template Strings
ECMAScript 6 has a new way of specifying template string
s: they begin and end with quotation mark (`).
let string = `New String`;
In case you use single and double quotation marks, it is allowed to use new lines and substitute expressions using braces ${variable}
.
class Product {
constructor(price, description, isPublished = false) {
this.price = price;
this.description = description;
this.isPublished = isPublished;
}
publish() {
this.isPublished = true;
}
unpublish() {
this.isPublished = false;
}
}
class DownlowdableProduct extends Product {
constructor(price, link, title, description, isPublished = false) {
super(price, description, isPublished);
this.link = link;
this.title = title;
}
toString() {
return `<li>
${this.title} - ${this.link} <span>${this.price}</span>
</li>`;
}
}
6. Destructuring
Destructuring is a convenient way of extracting values from data stored in (possibly nested) objects and arrays. It can be used in locations that receive data (such as the left-hand side of an assignment).
var [firstName, lastName, city] = ["John", "Doe", "Moscow"];
So firstName
includes "John
", lastName
- "Doe
" and city
- "Moscow
".
If you want to discard unwanted items, you need to put an extra comma:
let [, , lastName] = "Hello John Doe".split(" ");
console.log(lastName);
For objects, the code will be as follows:
var contact = {
email: "john@mail.com",
url: "http://google.com"
}
var {email, url} = contact;
This code is similar to the following:
var contact = {
email: "john@mail.com",
url: "http://google.com"
};
var email = contact.email;
var url = contact.url;
You can easily split into variables an array or an object, which in turn contain other arrays or objects.
let settings = {
params: {
w: 100,
h: 200
},
elements: ["Home", "Contact Us"]
}
let { title="Menu", params: {w, h}, elements: [item1, item2] } = settings;
console.log(title);
console.log(w);
console.log(h);
console.log(item1);
console.log(item2);
7. Object Literals
Consider a typical JavaScript example:
function makeRequest(method, url) {
return {
method: method,
url: url
}
}
Object literal will be created with method and url keys when makeRequest
function is called. In ECMAScript 6, the same can be done in a shorter way:
function makeRequest(method, url) {
return {
method,
url
}
}
8. Symbols
Symbol
- the type of data, similar to Number
and String
, which can be used to generate unique identifiers. Every symbol is unique.
let unique = Symbol(‘sym’);
Note that the Symbol
is used without the keyword new
, as it is primitive type. This function can be used to create unique constants.
const FIRST = Symbol('my symbol');
const SECOND = Symbol('my symbol');
typeof FIRST === 'symbol';
FIRST === SECOND;
The optional argument description can be used to describe the symbol and is useful for debugging:
let unique = Symbol("sym"); console.log( unique.toString() );
9. Rest & Spread
To obtain an array of arguments, it became possible to use the operator ... as shown below:
function printInfo(first, last, ...other) {
console.log(first + ' ' + last + ' - ' + other);
}
printInfo("John", "Doe", "student");
In other
will be written an array of arguments, starting with the second one. It can be seen that other
is a normal array which uses standard methods such as map
, forEach
and other
, which are not available for arguments pseudoarray .
Operator … must always be at the end and can be used to read the parameters in the function declaration. It can as well be applied when calling a function to pass an array of parameters in form of a list:
let nums = [9, 3, 20];
let maxNumber = Math.max(...nums);
console.log( maxNumber );
10. Arrow Function
Let's look at the following example:
class Contact {
constructor(attachment, mail, sender) {
this.attachment = attachment;
this.mail = mail;
sender.onclick = function(event) {
sendEmail(this.mail);
}
}
}
When I press the button, I want to use sendEmail
function and pass it a parameter this.mail
. But this will be used in the context of the sender, and not in the context of a Contact
. Some people assign this variable out of scope:
class Contact {
constructor(attachment, mail, sender) {
this.attachment = attachment;
this.mail = mail;
var that = this;
sender.onclick = function(event) {
sendEmail(that.mail);
}
}
}
There is a new way to create a function, using the arrow:
class Contact {
constructor(attachment, mail, sender) {
this.attachment = attachment;
this.mail = mail;
sender.onclick = (event) => {
sendEmail(this.mail);
}
}
}
Thus, it is possible to create simple functions.
var numArray = [2,4,6,8,10];
var newNumArray = numArray.map((elem) => elem * 2);
console.log(newNumArray);
Conclusion
Support for ECMAScript 6 is still very limited, and many features are under development. But very soon, it will be possible to make full use of these features.