ES6 Features

The Most recent version of ECMAScript/JavaScript.

• ECMAScript is a scripting language standard and specification.

• Transpilers can be used to complie ES6 code to ES5 through Babel, Traceur, Closure.

• ES6  does not fully supported to all browsers.

Some of the most important features of ES6 are -

Let:

• The let statement specify a block scope local variable. Block is any section of the code of curly braces.
  
  
   

• var declaration gives us functional scope and let declaration gives us block scope.  
  
  
   

• Let & Var using for Loop.

   

  In Let:  For every loop it will initialize new  "i" and pass it to the callback function.
  In Var:  In this, "i" is initialized only once and it will use the same "i" in the callback function.

Const:

• It is used to create read only named constants. Const also have block scope. A value must be mandatory set with const declaration.

• Const value canot be change at the later point in same scope.

• const variable can be declared only once.

• similar scoping rule as 'let'.

• const can not assign a new value.
     

• const object properties can be change.  
  

Arrow Function:

• One of the most popular feature of ES6. It introduced a new way of writing concise functions.

• An arrow function expression has a shorter syntax compared to function expression.

• Arrow functions are always anonymous.

• For one parameter, paranthesis are optional.

  const squared =  x => x  * x;

• More than one parameter, parenthesis are manadatory

  const squared =  (x, y) => x  * x;

  
  Example:
  

• Using Arrow function we are solving the problem that is caused by using this keyword inside a function.
  Without Arrow Function, It does not have context for outer function.

Class: 

• Class are in fact special functons. There are two ways to use class in javascript using class keyword.

• Syntax using Class Declaration:
  
   

• Class Expressions can be named or unnamed.

  var Mobile = class {     constructor() {         Properties     } }; Unnamed Class Expression

  var Mobile = class Mobile2 {     constructor() {         Properties     } }; named Class Expression

  
   

• Example using `Template Literals`  & Class Declaration.
  

Features of Template  Literals:

• Template Literals are also knowns as Template Strings.

• Multi line strings.

• Embed Expression.

• we need to use Back tics ``  to write Template Literals.

• we can avoid the whole confusion when concatenating strings with values and having to escape single and double quotes.

Default Parameters: 

It is pretty straight forward concept. You can basically specify a Default values to parameters when you define a function. When you call that function and don't passing a value the default value will be used.

Object Literals: 

• It is most useful when the Object don't have key/value pairs.

• Possible to use variables as Object keys.
  

Destructing Assignment: 

• It is kind of special type of assignment which works with Arrays and Objects.
  

Spread Operator: 

• It takes an array and splits it into the individual elements.

• The spread operator is specify during function call.

  let colorArray = ['Orange', 'Yellow', 'Indigo']; displayColors(...colorArray)

  
   

• Copy an array.
  
   

•  For Adding two arrays.
  
   

• It can be done by using .push() with the spread operator.
  

Conclusion: 

I hope you will find ES6 to be a useful and many enhancements to make JavaScript programming easier and more fun. since now you are familiar with some of the useful features,  you can give it a try in your daily coding practice. If you have any query or suggestions just leave the comments below.