Technoarch Softwares - ES6 Features

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, TraceurClosure.

  • 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.

1 Comments:

  1. Leave a Reply

    Your email address will not be published. Required fields are marked *

Leave a Comments

Your email address will not be published. Required fields are marked *