ES6 / ES2015 - LET AND CONST

Posted by Anoop Nair on July 31, 2017 Tags: Javascript ES6

What is ES6 / ES2015

Before we start with learning what are the new things in ES6 and why we should use ES6 we should know what is ES6, so here is a short explanation.

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.
It is actually a standardisation of writing JavaScript code.

Introducing "let"

"LET" is a new introduction in ES6 and we can use let to initialize or declare a variable.

  
  let test1 = 10;
  console.log(test1);

  //     output
  //       10

  

But what makes it different from var is that let is only valid inside the local scope. Don't worry if you have no idea about what a local scope is I will explain it with a example and even compare it with var.

  
  // let's create a function

  function letFun() {
    let a = 10;  // local scope of this let is inside the whole function.
    if (true) {
      let a = 50;  // local scope of this let is inside the {} of if .
      console.log(a); // let this be log 1
    }

    console.log(a); // let this be log 2
  }

  // calling the function
  letFun();

  

  
  outputs
  50
  10
  

From this code we will get two outputs we get the value "50" from the log 1 and we get the value "10" from log 2. This clearly proves that the line of code let a= 50; is only effective in it's local scope i.e inside if's {}. And doesn't change the value of a from 10 to 50 in the global scope.

But what will be the difference if we use var instead of let??

  
  // let's create a function

  function varFun() {
    var a = 10;  // local scope of this let is inside the whole function.
    if (true) {
      var a = 50;  // local scope of this let is inside the {} of if .
      console.log(a); // let this be log 1
    }

    console.log(a); // let this be log 2
  }

  // calling the function
  varFun();

  
  
  outputs
  50
  50
  

Now when we are using var we will get different output , from both log1 and log 2 we get the same value i.e. "50" . And what it means is that if we re-initialize a variable using var it will change its value in the global scope.


Introducing "const"

In ES6 const is used to declare or initialize a constant value which cannot be changed again.

  
    const pi = 3.141;
    console.log(pi); // output 3.141
  

The above code shows the correct usage of const we are declaring a constant value of pi to a variable and there is no general need of changing it in future code.

But In the next example we are trying to change the value of const variable "pi" from 3.141 to 0 and at this time it will show us a typerror . So in short we can say that you can initialize a variable as const if you dont't want to change it's value intentionally or by mistake further down your code.

  
    const pi = 3.141
    function changeConst(){
      pi = 0 ;
      console.log(pi);
    }

    changeConst();

    // output : TypeError: Assignment to constant variable.
  
So that's all for the let and const. Please visit the links below for more ES6/ES2015 tutorials.



COMMENTS