What is ES6?. It is short form of ECMA (European Computers Manufacturers Association) Script 6. ES6 is the 6th edition which was released in 2015. Please check the browser compatibility before using any of ES6 features.
Let us concentrate on the aim of this post, which is to see what’s new in javascript and how will it help us to make the development faster.
1.Constants
Support for constants (also known as Immutable Variable) i.e,variables which can not be
reassigned a new content. This only makes the variable itself immutable not it’s assigned content,therefore the object or an array assigned to a const variable can still be altered.
1 2 | const PI=3.141593; PI > 3; //true |
2.Arrow Functions
An arrow function expression has shorter syntax than a function expression and does not bind its own ‘this, arguments, super or new.target’. These function expressions are best suited for non-method functions and hence they cannot be used as constructors.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //ES6 result = Array.map(v => v + 1); //ES5 result = Array.map(function(v){ return v+1; }); //ES6 nums.forEach(V => { if(V % 5 == 0) fives.push(V) }); //ES5 nums.forEach(function(v){ if(v % 5 == 0) fives.push(v); }); |
3.Changes in parameters
Default parameter values
Simple and intuitive default values for function parameters in addition to earlier parametrs.
1 2 3 4 5 | function f(x,y=7,z=42){ return x+y+z; } f(1);//50 |
Rest parameter
The parameter with three dots in the beginning will handle all the parameters from that point. This could be especially used when we aren’t sure about the number of parameters which will be sent.
1 2 3 4 | function f(x,y,...a){ return (x+y) * a.length; } f(1,2,"hello",true,7);//9 |
4.String Interpolation
Intuitive expression interpolation for a single line and multi-line strings.
1 2 3 4 5 | var customer = {name:"Foo"}; var card = {amt:7,prd:"Bar"}; var msg = `Hello ${customer.name}, want to buy ${card.amt}${card.prd}?`; //Hello Foo, want to buy 7Bar? |
make sure you don’t use quotes instead of ‘grave’ which is present with tilde in your keyboard and make the mistake which i did at first.
5.Binary and Octal literal
Finally, direct support for safe binary and octal literals.
1 2 3 4 5 6 | 0b111110111 = 503; 0o767 = 503; //ES5 parseInt("111110111",2) = 503; parseInt("767",8) = 503; |
6.Enhanced object properties
I found it little tricky to understand some of the changes, May be,I would recommend going through the concept by your own once again.
a. Property shorthand
obj = {x,y}; is equivalent to obj = {x:x,y:y};
b. Computed property names
Support for computed names in object property definition.
1 2 3 4 5 6 7 8 9 | var obj = { foo : "bar", ["bar"+variable] : 43 }; //ES5 var obj = { foo : "bar", }; obj["bar"+variable] = 43; |
c. Method properties
Support for method notation in object property definitions for both regular functions
and generator functions in addition to computed property names. As a result we do not
have to specify the function expression separately.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //ES6 var obj = { foo(a,b){ ... }, *genf(x,y){ ... } }; //ES5 var obj = { foo : function(a,b){ ... }, //generator methods weren't present in ES5 }; |
7.Modules
Support for export/importing values from/to modules without global namespace pollution. It is better to go with default javascript rather than using AMDs like Require.js just for modularity.
1 2 3 4 5 6 7 8 9 10 11 | //mod/operations.js export function sum(x,y) return x+y;} export var pi = 3.141593; //other.js import * as ope from "mod/operations"; console.log("2π=" ope.sum(ope.pi + ope.pi)); //some_other.js import {sum,pi} from "mod/operations"; console.log("2π="+sum(pi+pi)); |
8.for…of Operator
The for…of statement creates a loop iterating over iterable objects(including Array, Map, Set, String, TypedArray, arguments), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
Syntax:
for(variable of iterable){
statements
}
variable: – on each iteration, a value of a different property is assigned to variable.
iterable: – Object whose enumerable properties are iterated.
1 2 3 4 5 6 7 8 9 10 11 | var iterable = [10,20,30]; for(var value of iterable){ console.log(value); } //Iterating over arguments (function(){ for(var argument of arguments){ console.log(argument) } })(1,2,3); |
9.Generator function
The function* declaration defines a generator function, which returns a generator object.
We can also define generator functions using the ‘Generator function’ constructor and a function* expression.
Syntax: –
function* fname([param[,param….]]){
statements
}
Concept
Generators are functions which can be exited and later re-entered. Their context will be saved across all re-entrances. Calling a generator function does not execute its body immediately; an iterator object is returned instead.
When the iterator’s next() method is called the generator function’s body is executed until the first yield expression, furthermore specifying the value to be returned from the iterator Or with yield*, delegates to another generator function.
The next() method returns an object with a ‘value’ property containing the yielded value and a ‘done’ property which indicates whether the generator has yielded its last value as a boolean.
Calling the next() method with an argument will resume the generator function execution replacing the yield statement where execution was paused with the argument from next().
1 2 3 4 5 6 7 8 | function* idMaker(){ var index = 0; while(index<3){ yield index++; } var gen = idMaker(); console.log(gen.next().value);//0 console.log(gen.next().done);//false |
Mozilla Developers Network is the best place to learn them.