What is ES6?

ES6 stands for ECMAScript 2015, which is a new version of javascript that was released in 2015. After ES6 writing a code becomes more efficient and the developer can understand it easily. This update brings many features in javascript.

Below are some of the used features in ES6 -

• Default parameters
• let
• const
• Template literals
• Arrow Function
• For/Of

Default parameters

In JS, using the default parameter we can set the parameter to a default value in this process if the parameter doesn't get any argument then the default will come into action.

Example: Default parameter.

    // Before ES6

   function multiplyNum(a,b){
        // checking the value in b using ternary operator.
        b=(typeof b!=='undefined')? b:1;
        console.log(a*b);
        // output: 2*1 = 2;
   }

    // function call
    multiplyNum(2);

  ................................................


     // After ES6

    function multiplyNum2(a,b=1){
        // default value inside parameter is passed.
        console.log(a*b);
        //output: 2*1=2
    }
    multiplyNum2(2);

read more about default parameters here....

let

In JS, previously we had only var keyword for variable declaration in ES6 two new keywords were introduced. One of which is let keyword It is very helpful when we want to update it every time with a new value. It is a block-scoped local variable, i.e it can be accessed only inside a particular block of code where it is declared. Let's understand this using a little example.

Example: In the below given example, code written inside the if is a block-scoped i.e inside the block-scoped the value of a is 2. However, outside of block-scoped the value of a is 1.

     let a=1;
     if(a===1){
        let a=2;
        console.log(a);
         // output:2;
     }  
    console.log(a);
   // output: 1

read more about let here...

const

In JS, The second keyword introduced for variable declaration in ES6 is const which stands for constant and this is also block-scoped, it can also be used for a variable declaration like let but, the only difference is that value inside the constant variable cannot be changed using reassignment.

NOTE: In the case of object and array items inside them can be updated and removed. But the variable cannot be reassigned an entirely new array / object

Example: Here in this example, when the variable a is assigned with a value of 21, it cannot be reassigned with the value 30. If we try we try to reassign the variable an error will occur in the output.

   const a=21;

   // reassign a with 30
    a=30;

    console.log(a);
    // output: Uncaught TypeError: Assignment to constant variable.

read more about const here...

Template literals

In JS, template literals are string literals allowing us to write sentences text-based i.e., strings along with expressions which need computation in the same line as shown in the example below, also here we can use multi-line strings, expression interpolation and tagged template literals. The syntax is simply to wrap everything inside a backticks(` `).

• Multi-line strings - This means we can write more than one line of strings which won't be printed in a single line.

  Example: In this example below for the multi-line string we don't have to \n to send string to the next line.

   console.log(`string in the line 1
   string in line 2...
   string in line three`);


  /* output: string in the line 1
    string in line 2...
    string in line three
   */

• Expression interpolation: By using template literals ${ } we can integrate expressions like mathematical expressions along with sentences.

Example: In this example, the value inside the ${} syntax will get evaluated.

    console.log(`If we add 2 and 5 it will be ${2+5}`);

   // output:If we add 2 and 5 it will be 7.

• Tagged template literals: This is basically passing template literals into a function.

Example: In the example below, we have used a function named tag where we are passing arguments using template literals i.e inside the template literals we have both strings and expressions. Expression is written inside ${} which will be evaluated before passing it as an argument. The strings will go to the strings array parameter and the evaluated integers will be towards the values array parameter. Here ...values dot used before the value is called ``` Spread syntax . The value is an array for integers.

    function tag (strings,...values){
    console.log(strings);
    console.log(values);

    // return "nothing yet"
  }

   tag` my name ${4+5} is Jack ${4*5}`;

  // output : ['my name ', ' is Jack ', ''] and [9, 20]

read more about template literals here...

Arrow function

This is one of the features introduced in the ES6 version of JavaScript. The Arrow function is cleaner and smaller than the traditional way of writing function. It can be used when writing shorter codes. While writing arrow function certain things are to keep in mind i.e function word will be removed with => arrow. If there is only a single line of code that needs to be executed then we can remove the braces {} and the return keyword also. Also if there is a single argument only then parentheses can also be removed which makes the code a lot cleaner.

NOTE: The { braces } and ( parentheses ) and "return" are required for cases when multiple line of code is there and more than one argument is present.

Example: In the example below we will see how arrow functions are written.

       // traditional function
       function sum(a,b){
        return a+b;
    }
       console.log(sum(2,3));
     // output: 5



     // Arrow function with multiple argument and one line of code
       let sum2 =(a,b)=> a+b;
      console.log(sum2(3,6));
     // output: 9


     // Arrow function with multiple argument and multi line of code
       let sum2 =(a,b)=> {
          let result = a+b;
          return result;
       };
      console.log(sum2(3,6));
     // output: 9


     // Arrow function with single argument
       let print = a => {
          console.log(a)
      };
      console.log(print("My name is John Doe"));
     // output: My name is John Doe

read more about arrow function here...

For..of

In JS, Previously we had for loops which were used to loop through iterable such as arrays and strings. In ES6 for ...of was introduced. This also performs the same operation that is looping through iterables. The difference between them is in traditional "for" we used to use the indexing for looping by assigning a variable to it but now we can loop on the elements of the iterable as shown in the example.

Example:

      //Before ES6 for loops were used

      let fruit='apple';
     // i is the index
     for(let i=0;i<fruit.length;i++){
       console.log(`string at ${i} is ${fruit[i]}`);
    }


     /*
        output: 
        string at 0 is a
        string at 1 is p
        string at 2 is l
        string at 3 is l
        string at 4 is e


     */

      //after ES6 for..of are used


      let fruit='apple';
      for(let element of fruit){
      console.log(`strings are ${element}`);
    }


     /*
      output: 
      strings are a
      strings are p
      strings are p
      strings are l
      strings are e


*/

read more about for/of here

conclusion

There are more features in the ES6 and Javascript gets new updates every year to keep yourself updated it is a better practice to keep visiting the ECMAscript Website.