JavaScript let and const

ECMAScript 2015 (ECMAScript 6)

ES2015 (ES6) introduced two important new JavaScript keywords: let and const.

Variables declared with let have block scope and are only valid within the block they are declared.

const declares a read-only constant, and its value cannot be changed once it is set.

Before ES6, JavaScript had only two types of scope: global variables and local variables within functions.

Global Variables

Variables declared outside functions have global scope:

Example

var carName = "Volvo";

// carName variable can be used here

function myFunction() {
    // carName variable can also be used here
}

Global variables can be accessed anywhere in the JavaScript program.

Local Variables

Variables declared within a function have local scope:

Example

// carName variable cannot be used here

function myFunction() {
    var carName = "Volvo";
    // carName variable can be used here
}

// carName variable cannot be used here

Variables declared with var inside a function are accessible only within that function, unless declared without var, which makes them global.

JavaScript Block Scope

Variables declared with the var keyword do not have block scope; they can be accessed outside the {} block.

{ 
    var x = 2; 
}
// x variable can be used here

Before ES6, there was no block scope concept.

ES6 introduced block scope using the let keyword.

Variables declared with let are valid only within the block {} they are declared in and cannot be accessed outside {}.

{ 
    let x = 2;
}
// x variable cannot be used here

Redeclaring Variables

Redeclaring a variable using the var keyword can lead to issues.

Redeclaring a variable inside a block also redeclares the variable outside the block:

Example

var x = 10;
// x is 10 here
{ 
    var x = 2;
    // x is 2 here
}
// x is 2 here

The let keyword solves this problem as it is valid only within the block {}.

Example

var x = 10;
// x is 10 here
{ 
    let x = 2;
    // x is 2 here
}
// x is 10 here

Browser Support

Internet Explorer 11 and earlier versions do not support the let keyword.

The following table lists the minimum browser versions that support let:

Loop Scope

Using the var keyword:

Example

var i = 5;
for (var i = 0; i < 10; i++) {
    // some code...
}
// i is 10 here

Using the let keyword:

Example

let i = 5;
for (let i = 0; i < 10; i++) {
    // some code...
}
// i is 5 here

In the first example, the var keyword makes the variable global, including inside and outside the loop.

In the second example, the let keyword limits the variable's scope to inside the loop, leaving the outer variable unaffected.

Local Variables

Variables declared with var and let inside a function have similar local scope:

// Using var
function myFunction() {
    var carName = "Volvo";   // local scope
}

// Using let
function myFunction() {
    let carName = "Volvo";   // local scope
}

Global Variables

Variables declared with var and let outside functions or blocks have similar global scope:

// Using var
var x = 2;       // global scope

// Using let
let x = 2;       // global scope

Global Variables in HTML

In JavaScript, the global scope is for the JavaScript environment.

In HTML, the global scope is for the window object.

Variables declared with var are part of the window object:

Example

var carName = "Volvo";
// variable can be accessed using window.carName

Variables declared with let are not part of the window object:

Example

let carName = "Volvo";
// variable cannot be accessed using window.carName

Redeclaring Variables

Variables declared with var can be modified anywhere:

Example

var x = 2;
// x is 2
var x = 3;
// x is 3

In the same scope or block, you cannot use let to redeclare a var variable:

var x = 2;       // valid
let x = 3;       // invalid

{
    var x = 4;   // valid
    let x = 5;   // invalid
}

In the same scope or block, you cannot use let to redeclare a let variable:

let x = 2;       // valid
let x = 3;       // invalid

{
    let x = 4;   // valid
    let x = 5;   // invalid
}

In the same scope or block, you cannot use var to redeclare a let variable:

let x = 2;       // valid
var x = 3;       // invalid

{
    let x = 4;   // valid
    var x = 5;   // invalid
}

let can be redeclared in different scopes or blocks:

let x = 2;       // valid

{
    let x = 3;   // valid
}

{
    let x = 4;   // valid
}

Hoisting

In JavaScript, variables declared with var can be used before they are declared (JavaScript hoisting).

Example

// carName variable can be used here
var carName;

Variables declared with let must be declared before use:

// carName variable cannot be used here
let carName;

const Keyword

const is used to declare constants that must be initialized and cannot be reassigned:

Example

const PI = 3.141592653589793;
PI = 3.14;      // throws an error
PI = PI + 10;   // throws an error

const behaves similarly to let:

• Both have block scope.
• Neither can have the same name as another variable or function within the same scope.

Key differences:

• const must be initialized, whereas let does not need to be.
• The value of a const cannot be changed or redeclared, while let can be.

  var x = 10;
  // x is 10 here
  { 
      const x = 2;
      // x is 2 here
  }
  // x is 10 here
  

const must be initialized:

// Incorrect
const PI;
PI = 3.14159265359;

// Correct
const PI = 3.14159265359;

Not Truly Constant

The essence of const: It defines a constant reference to a value. Objects or arrays declared with const are mutable. The following code does not throw an error:

Example

// Create a constant object
const car = {type:"Fiat", model:"500", color:"white"};

// Modify properties
car.color = "red";

// Add properties
car.owner = "Johnson";

However, you cannot reassign a constant object:

Example

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // throws an error

Modify a constant array:

Example

// Create a constant array
const cars = ["Saab", "Volvo", "BMW"];

// Modify elements
cars[0] = "Toyota";

// Add elements
cars.push("Audi");

However, you cannot reassign a constant array:

Example

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // throws an error

Browser Support

Internet Explorer 10 and earlier versions do not support the const keyword.

The following table lists the minimum browser versions that support const:

Redeclaring Variables

Variables declared with var can be modified anywhere:

Example

var x = 2;    // valid
var x = 3;    // valid
x = 4;        // valid

In the same scope or block, you cannot use const to redeclare variables declared with var or let:

var x = 2;         // valid
const x = 2;       // invalid
{
    let x = 2;     // valid
    const x = 2;   // invalid
}

In the same scope or block, you cannot use const to redeclare a const variable:

const x = 2;       // valid
const x = 3;       // invalid
x = 3;             // invalid
var x = 3;         // invalid
let x = 3;         // invalid

{
    const x = 2;   // valid
    const x = 3;   // invalid
    x = 3;         // invalid
}

var x = 3;     // Illegal
let x = 3;     // Illegal
}

const keyword can be reassigned in different scopes or different block scopes:

const x = 2;       // Legal

{
    const x = 3;   // Legal
}

{
    const x = 4;   // Legal
}

Variable Hoisting

Variables defined with the JavaScript var keyword can be declared after they are used, meaning the variable can be used first and declared later (JavaScript Variable Hoisting).

Example

carName = "Volvo";    // carName variable can be used here
var carName;

Variables defined with the const keyword cannot be declared after they are used, meaning the variable must be declared before use.

carName = "Volvo";    // carName variable cannot be used here
const carName = "Volvo";