let, const and var in javascript

ECMAScript 6 introduced let and const to the javascript engine. So, lets see what is the real difference between let ,const and var. 

For video check the youtube link here : let and var in js

var and let :

var is used for global declaration and its scoped to the nearest function block.

Eg 1 :

var a = 10; // its a global declaration and its available everywhere.

Eg 2 :

function mytest() {
  var a= 10;
  if(a==10){
    var a =20;  // its the same variable a that is being modified
    console.log(a); // prints 20
  }
  console.log(a); // prints 20 here too because the 
                  //value a is scoped to nearest function mytest.
}

Eg 3: Lets consider this function. And guess the output of the below function.

function mytest() {
  for(var i=0; i<5 ;i++){
   setTimeout(function() {
    console.log(i); // what is the result of this?
   },100);
  }
}

You would expect the result to be 0, 1, 2, 3, 4 but if you run this program the result you would see is 5, 5, 5, 5, 5.  The reason behind this is same , the var is functionally scoped and not to the nearest enclosing block. So, there is only one instance of i and the same reference is modified each time.

Eg 4:

function mytest() {
 if(true) {
   var a =20;
 }
 console.log(a); // prints 20. Though a is defined inside if block the 
                 //variable a is confined to mytest block.
}

let : let is scoped to the nearest enclosing block i.e within the brackets { } it's defined in.

lets see few examples here.

Eg 1 :

let a = 10; // its similar to var when defined globally and available everwhere.

Eg 2 :

function mytest() {
  let a= 10;
  if(a==10){
    let a =20;  // its the new instance
    console.log(a); // prints 20 a is scoped to nearest block i.e if block
  }
  console.log(a); // unlike var it value a prints 10 
                  //value a is scoped to nearest block i.e mytest block
}

Eg 3:

function mytest() {
  for(let i=0; i<5 ;i++){
   setTimeout(function() {
    console.log(i); // what is the result of this?
   },100);
  }
}

The result of the above function is 0,1,2,3,4 unlike var which print 5,5,5,5,5.

Eg 4:

function mytest() {
 if(true) {
   let a =20;
 }
 console.log(a); // undefined will be printed since the 
                 // value of a is confined to just the if block.
}

Now you know the major difference between var and let. Its recommended to use let because its helpful for garbage collection so that the variables which goes out of scope can be cleaned up. In case of var the variable is always available until you close the window and the space is not cleaned up for other processes.

Const :

  • Const as the name suggests its used to initialise a  constant.
  • Once declared its value cannot be changed.
  • Const always requires an initialiser.
  • Like let const is scoped to its nearest enclosing block.

Lets take a look at few examples.

Eg 1 :

const a; // This is an invalid declaration as there is no initialiser.
const a = 10; // this is a valid declaration and if declared outside 
              // its global declaration and its value cannot be changed.

Eg 2 :

 
function mytest() {
 const a= 10;
 if(a==10){
   const a = 20; // its the new instance
   console.log(a); // prints 20 , a is scoped to nearest block i.e if block
 }
 console.log(a); //  prints 10.
}

Eg 3 :

 
function mytest() {
 const a= 10;
 a = 20; // Throws an error saying a is read only. 
         //The value cannot be changed once initialised.
}
Advertisements

One thought on “let, const and var in javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s