This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

2.2 JS Let

The let keyword was introduced in ES6 (2015)
Variables defined with let cannot be Redeclared
Variables defined with let must be Declared before use
Variables defined with let have Block Scope

Cannot be Redeclared

Variables defined with let can not be redeclared.
You can not accidentally redeclare a variable declared with let.

With let you can not do this:

let x = "John Doe";

let x = 0;

With var you can:

var x = "John Doe";

var x = 0;

Block Scope

Before ES6 (2015), JavaScript had Global Scope and Function Scope.
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:

Example

{
  let x = 2;
}
// x can NOT be used here

Variables declared with the var keyword can NOT have block scope.
Variables declared inside a { } block can be accessed from outside the block.

Example

{
  var x = 2;
}
// x CAN be used here

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:

Example 1: JS Let - Redeclaring a Variable Using var part 1

var x = 10;
// Here x is 10

{
var x = 2;
// Here x is 2
}

// Here x is 2

Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:

Example 2: JS Let - Redeclaring a Variable Using let

 let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Difference Between var, let and const

Keywords	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

What is Good?

let and const have block scope.
let and const can not be redeclared.
let and const must be declared before use.
let and const does not bind to this.
let and const are not hoisted.

What is Not Good?

var does not have to be declared.
var is hoisted.
var binds to this.

Browser Support

The let and const keywords are not supported in Internet Explorer 11 or earlier.
The following table defines the first browser versions with full support:


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Redeclaring

Redeclaring a JavaScript variable with var is allowed anywhere in a program:

Example 3: JS Let - Redeclaring a Variable Using var part 2

 var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

With let, redeclaring a variable in the same block is NOT allowed:

Example

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Redeclaring a variable with let, in another block, IS allowed:

Example 4: JS Let - Redeclaring a Variable Using let part 2

let x = 2;   // Allowed

{
let x = 3;   // Allowed
}

{
let x = 4;    // Allowed
}

Let Hoisting

Variables defined with var are hoisted to the top and can be initialized at any time.
Meaning: You can use the variable before it is declared:

Example 5: JS Hoisting - var Hoisting

This is OK:

carName = "Volvo";
var carName;

You will learn more about hoisting in a later chapter.
Variables defined with let are also hoisted to the top of the block, but not initialized.
Meaning: Using a let variable before it is declared will result in a ReferenceError:

Example 6: JS Hoisting - let Hoisting

carName = "Saab";
let carName = "Volvo";

JavaScript Fundamentals course home
Module 2. Variables, Operators and Assignment

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon