JavaScript Let

ECMAScript 2015

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

These two keywords provide block scope in JavaScript (Block Scope) variables (and constants).

Before ES2015, JavaScript had only two types of scopes:Global scopeandFunction scope.

Global scope

GlobalVariables declared outside (functions) haveGlobal scope.

Example

var carName = "porsche";
// The code here can use carName
function myFunction() {
  // The code here can also use carName
}

Try Yourself

GlobalVariables can be accessed at any location in the JavaScript program.

Function scope

LocalVariables declared within (functions) haveFunction scope.

Example

// The code here cannot use carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// The code here cannot use carName

Try Yourself

LocalVariables can only be accessed within the function they are declared in.

JavaScript block scope

by var Variables declared with the keyword do not have blockScope.

Within a block {} Variables declared internally can be accessed from outside the block.

Example

{ 
  var x = 10; 
}
// Here x can be used

Before ES2015, JavaScript did not have block scope.

Can be used let The keyword declares variables with block scope.

Within a block {} Variables declared internally cannot be accessed from outside the block:

Example

{ 
  let x = 10;
}
// Here x cannot be used

Redeclaring variables

Using var The keyword redeclaring a variable may cause problems.

Redeclaring a variable within a block also redefines the variable outside the block:

Example

var x = 10;
// Here x is 10
{ 
  var x = 6;
  // Here x is 6
}
// Here x is 6

Try Yourself

Using let The keyword redeclaring a variable can solve this problem.

Redeclaring a variable within a block does not redefine the variable outside the block:

Example

var x = 10;
// Here x is 10
{ 
  let x = 6;
  // Here x is 6
}
// Here x is 10

Try Yourself

Browser support

Internet Explorer 11 or earlier versions do not fully support let keywords.

The following table defines the first fully supported let Browser version of keywords:

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
March 2016 July 2015 January 2015 September 2017 March 2016

Loop scope

Used in the loop var:

Example

var i = 7;
for (var i = 0; i < 10; i++) {
  // Some statements
}
// Here, i is 10

Try Yourself

Used in the loop let:

Example

let i = 7;
for (let i = 0; i < 10; i++) {
  // Some statements
}
// Here i is 7

Try Yourself

In the first example, the variable used in the loop uses var The variable outside the loop is redeclared.

In the second example, the variable used in the loop uses let The variable outside the loop is not redeclared.

If used in a loop with let If the variable i is declared, then only within the loop, the variable i is visible.

Function scope

When declaring variables inside a function, use var and let They are also very similar.

They both haveFunction scope:

function myFunction() {
  var carName = "porsche";   // Function scope
}
function myFunction() {
  let carName = "porsche";   // Function scope
}

Global scope

If declared outside of a block, then var and let They are also very similar.

They both haveGlobal scope:

var x = 10;       // Global scope
let y = 6;       // Global scope

Global variables in HTML

In the case of using JavaScript, the global scope is the JavaScript environment.

In HTML, the global scope is the window object.

by var Global variables defined by keywords belong to the window object:

Example

var carName = "porsche";
// This code can use window.carName

Try Yourself

by let Global variables defined by keywords do not belong to the window object:

Example

let carName = "porsche";
// This code cannot use window.carName

Try Yourself

Redeclare

Allowed to use anywhere in the program var Redeclare JavaScript variables:

Example

var x = 10;
// Now, x is 10
var x = 6;
// Now, x is 6

Try Yourself

in the same scope, or in the same block, through let re-declaring a var Variables are not allowed:

Example

var x = 10;       // Allowed
let x = 6;       // Not allowed
{
  var x = 10;   // Allowed
  let x = 6;   // Not allowed
}

in the same scope, or in the same block, through let re-declaring a let Variables are not allowed:

Example

let x = 10;       // Allowed
let x = 6;       // Not allowed
{
  let x = 10;   // Allowed
  let x = 6;   // Not allowed
}

in the same scope, or in the same block, through var re-declaring a let Variables are not allowed:

Example

let x = 10;       // Allowed
var x = 6;       // Not allowed
{
  let x = 10;   // Allowed
  var x = 6;   // Not allowed
}

in different scopes or blocks, through let Re-declaring variables is allowed:

Example

let x = 6;       // Allowed
{
  let x = 7;   // Allowed
}
{
  let x = 8;   // Allowed
}

Try Yourself

Hoisting

by var declared variables willHoistinghoisting. If you are not familiar with hoisting, please learn about it in our hoisting chapter.

You can use the variable before declaring it:

Example

// Here, you can use carName
var carName;

Try Yourself

by let defined variables are not hoisted to the top.

in declaration let Using the variable before its declaration will cause a ReferenceError.

Variables are in 'temporal dead zone' from the beginning of the block until the declaration:

Example

// Here, you cannot use carName
let carName;