ES6 introduced let and const keywords for variables declaration.

This post explains about usage of the let keyword and compares let with var with examples

let variable in es6

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

  • var has a functional scope.

The variables can be used without declared with the var keyword

let is used to declare a variable of block scope.

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

For example,

Below the program, the number is declared inside an if block, and accessible inside a block only. It throws an error ReferenceError: number is not defined if the 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 the same way when you reassign the variable with a 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 between let and var

  • `Redeclaring the same variable throws an error

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

// this works fine
var words;
var words;

let numbers;
let numbers;// this throws an error Uncaught SyntaxError: Identifier 'numbers' have already been declared
  • Order is important for let keyword

In let keyword declaration, if the 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 in hoisting Variables declared with var keyword assigned with undefined before it executes or uses. These are also called variables hoisted.

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

myfunction();

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

In this program, the let variable is not initialized and it is in a 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 the window global scope

In 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