ES6 Tutorials  : Let & var  Keyword

ES6 Tutorials : Let & var Keyword

  • 2016-08-29
  • 1503

let‘ is a keyword which enables one to declare a block scoped local variable. Occasionally it can be initialized with a value too. The most basic deceleration of let is as follows (Available in ECMAScript 6) :-

‘let’ keyword for declaring variable in block scope

/*let keyword used to declare variables*/
let variable1,
  variable2,
  variable3,
  variableN;
 
/*let with initialization*/
let variableA = 20,
  variableB = 30,
  variableC = 40,
  variable_N = 'Hellow World';
 
 
console.log('VariableA is equal to ' + variableA);
console.log('VariableB is equal to ' + variableB);
console.log('VariableC is equal to ' + variableC);
console.log('Variable_N is equal to ' + variable_N);
console.log('Variable1 is equal to ' + variable1);
console.log('Variable2 is equal to ' + variable2);
console.log('Variable3 is equal to ' + variable3);
console.log('VariableN is equal to ' + variableN);

The above block of code demonstrates the way in which ‘let‘ can be used in order to declare as well as initialize variables. We can very conveniently say that it’s the new ‘var’ but there lies and exception.

Difference between ‘let’ & ‘var’

‘var’ helps you to declare a variable globally or locally without the taking into consideration the block scope. Whereas ‘let’ helps you declare a variable that are limited in the scope to the block, expression or statement wherever it’s been used .

To make more sense of the above statement let’s look at a small example. Here we will use two functions which would help us to understand the difference between ‘let‘ & ‘var‘.

Checking the Block Scoped implementation of ‘Var’ & ‘let’

function checkVar() {
  let a = 10;
  if (true) {
    let a = 20; //This is a different variable restricted to the block
    console.log('This is the let inside the if block & value is ' + a); //20
  }
  console.log('This is the let outside the if block & value is ' + a); //10
}
 
/*Function for checking decleration using 'let'*/
function checkLet() {
  var a = 20;
  if (true) {
    var a = 30; //Value changed to 30. This variable is the same as above
    console.log('This is the var inside the if block & value is ' + a); //30
  }
  console.log('This is the var outside the if block & value is ' + a); //30
}
 
/*Calling Both the functions*/
checkVar();
checkLet();

‘Let’ does not declare variables that are globally available whereas ‘var’ does.

Check the example below:-

Var declares the variable globally whereas let does not

let a = 10; //Not attached to the global window object
var b =20;  //Attached to the window object and becomes globally available
console.log(this.a);
console.log(this.b);

The above example when run makes it very clear that the ‘let’ does not attach the variable to the window object. i.e. It helps not to declare variable globally whereas ‘var’ does. Declaring variable using ‘var’ makes it globally available until its inside the scope of an anonymous function.

The above examples make is clear where to use these two. Though there are some gotchas with this keyword which we would cover in another section.

Suggest

JavaScript Promises: Applications in ES6 and AngularJS

Learning ECMAScript 6: Moving to the New JavaScript

ES6 Javascript Essentials (With Exercise Files)

ES6 Bootcamp - Next Generation JavaScript

React Redux React-Router: From Beginner to Paid Professional