Some new ES6 features you use maximum when code

The current scenario of web development is very puzzled. Lots of css frameworks, JavaScript frameworks are dominating the tech world. The new ES6 or you can call it ES2015 is awesome new thing currently. This is next generation JavaScript standard. ES6 bring lots off cool logical stuff with some new syntaxes as well. If you currently working as a JavaScript developer or you are new to the JavaScript world then you need to definitely try ES6. Not all the browser currently fully support the ES6. So, we need to transpile ES6 code to ES5(current browser supported standard ) by babel. I will recommend this ES6 compatibility table.

So when you decided you will use ES6 for your​ current project or you need to migrate your JavaScript (ES5 standard) project from current ES6 standard then don’t worry too much about new logics and syntaxes. Actually, you don’t need to use all the syntaxes.

Note: before go to the next paragraph I will give some little advice. First of all learn basic babel, gulp or webpack. We need to use babel for transpile ES6 to ES5. Also need to use gulp as a task runner.

ES6 most useful syntaxes or features

Let and const

Let and const is the new var in ES6. This new feature is holding value in the block scoped. More important is that you can’t​ change the const value (there is an another way)

// letTest example
function letTest() {
const y = 2;
let x = 1;
if (true) {
let x = 2; // let statement in the scope
y = 5; // error, const
console.log(x); // 2
}
console.log(x); // 1
}

Here is a solid video made by Mattias Petter Johansson

Arrow function

The new fat arrow (=>) is a function shorthand for the current ES5 function. You can saw this type of syntaxes​ in other programming or scripting language. Unlike current ES5 function the arrow function contains same lexical this.

// example arrow function
const egArrowFunction = (a, b) => {
return a + b;
}
egArrowFunction(6, 4);

Classes

ES6 classes are syntactic sugar for the prototype based object oriented pattern. The classes support​ inheritance, constructor, static methods, super. For more details please visit mdn

// es6 class example
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}

get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area);

Subclassable

Subclasses are the extend some parent class added more methods and property in that class. For more info: http://2ality.com/2015/02/es6-classes-final.html#subclassing

// es6 class example
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}

get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area);
// new rectangle subclass
class Rectangle extends NewRectangle{
//put subclasses code here.
}

Template string

Template string is the new features in ES6. You can concat string value with variable or function value. You can also do multiline string interpolation.

// singleline template
`string text`
// multiline template
`string text line 1
string text line 2`
// expression value binding
`string text ${expression} string text`

ES6 modules

This new feature is very handy when you coding. You can export some functional logic from another file. Here is a very good example by lukehoban

Many thank to Luke Hoban for this awesome git repositories ES6 features