ES6 introduced let and const keywords for variables declaration.

This post explain about usage of let keyword and compare let with var with examples

let variable in es6

Before ES6 version,We have var keyword to declare an variables and it has few features.

  • var has a functional scope.

The variables can be used without declared with var keyword

let is used to declare an variable of block scope.

The variables declared in block scope {} are not accessible outside of a block.

For example,

Below program, number is declared inside a if block, and accessable inside a block only. It throws an error ReferenceError: number is not defined if variable is accessed outside a block scope

if (true) {
  let number = 42;
}
console.log(number) 

Difference between let and var in javascript

For example, let and var works same way when you are reassign the variable with new value

// var example
var test="hello";
test="welcome";
console.log(test);
// let example
let message="hello";
message="welcome";
console.log(message);

Output:

welcome
welcome

Let’s see the difference in between let and var

  • Redeclaring an same variable throws an error

same variable declared multiple times throws an error with let keyword An error Uncaught SyntaxError: Identifier 'numbers' has already been declared var keyword works fine for same variable declared multiple times.

// this works fine
var words;
var words;

let numbers;
let numbers;// this throws an error Uncaught SyntaxError: Identifier 'numbers' has already been declared

  • Order is important for let keyword

In let keyword declaration,if variable is used without declaring it, It throws an error.

Uncaught ReferenceError: Cannot access ‘number’ before initialization".

it executes fine in case of var keyword

console.log(word); // undefined
console.log(number); // error
  
var word = 11;
let number = 22;
  • let variables are hoisting One more difference on hoisting Variables declared with var keyword assigned with undefined before it executes or uses. These are also called variables are hoisted.

function myfunction() {
  console.log(variable); // undefined
  var variable = "hello";
  console.log(variable); // hello
}

myfunction();

if you call the above code with let keyword, It throws an error Uncaught ReferenceError: Cannot access ‘variable’ before initialization

In this program, let variable is not initialized and it is in temporal dead zone

function myfunction() {
  console.log(variable); // error Uncaught ReferenceError: Cannot access 'variable' before initialization
  let variable = "hello";
  console.log(variable); // 
}
myfunction();
  • let variable are not added to window global scope

This example, accessing let variables with window scope returns undefined.

var word = "words";
let number = "number";
console.log(number);  // number
console.log(word);  // words

console.log(window.number);  // undefined
console.log(window.word);  // words

Important points

  • variables declared with let are block scoped, var variables are functional scope.
  • variables with let are not hoisted
  • let variables are not