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

PermalinkBelow 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);

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 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]

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

Permalinkconclusion

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.

ES6 Features...

PermalinkWhat is ES6?

PermalinkBelow are some of the used features in ES6 -

Permalinkconclusion