nameN

The name of the variable to declare. Each must be a legal JavaScriptidentifier or adestructuring binding pattern.

valueNOptional

Initial value of the variable. It can be any legal expression. Default value isundefined.

The scope of a variable declared withlet is one of the following curly-brace-enclosed syntaxes that most closely contains thelet declaration:

• Block statement
• switch statement
• try...catch statement
• Body ofone of thefor statements, if thelet is in the header of the statement
• Function body
• Static initialization block

Or if none of the above applies:

• The currentmodule, for code running in module mode
• The global scope, for code running in script mode.

Compared withvar,let declarations have the following differences:

• let declarations are scoped to blocks as well as functions.

• let declarations can only be accessed after the place of declaration is reached (seetemporal dead zone). For this reason,let declarations are commonly regarded asnon-hoisted.

• let declarations do not create properties onglobalThis when declared at the top level of a script.

• let declarations cannot beredeclared by any other declaration in the same scope.

• let beginsdeclarations, notstatements. That means you cannot use a lonelet declaration as the body of a block (which makes sense, since there's no way to access the variable).

  js

  if (true) let a = 1; // SyntaxError: Lexical declaration cannot appear in a single-statement context

Note thatlet is allowed as an identifier name when declared withvar orfunction innon-strict mode, but you should avoid usinglet as an identifier name to prevent unexpected syntax ambiguities.

Many style guides (includingMDN's) recommend usingconst overlet whenever a variable is not reassigned in its scope. This makes the intent clear that a variable's type (or value, in the case of a primitive) can never change. Others may preferlet for non-primitives that are mutated.

The list that follows thelet keyword is called abinding list and is separated by commas, where the commas arenotcomma operators and the= signs arenotassignment operators. Initializers of later variables can refer to earlier variables in the list.

A variable declared withlet,const, orclass is said to be in a "temporal dead zone" (TDZ) from the start of the block until code execution reaches the place where the variable is declared and initialized.

While inside the TDZ, the variable has not been initialized with a value, and any attempt to access it will result in aReferenceError. The variable is initialized with a value when execution reaches the place in the code where it was declared. If no initial value was specified with the variable declaration, it will be initialized with a value ofundefined.

This differs fromvar variables, which will return a value ofundefined if they are accessed before they are declared. The code below demonstrates the different result whenlet andvar are accessed in code before the place where they are declared.

{  // TDZ starts at beginning of scope  console.log(bar); // "undefined"  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization  var bar = 1;  let foo = 2; // End of TDZ (for foo)}

The term "temporal" is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position). For example, the code below works because, even though the function that uses thelet variable appears before the variable is declared, the function iscalled outside the TDZ.

{  // TDZ starts at beginning of scope  const func = () => console.log(letVar); // OK  // Within the TDZ letVar access throws `ReferenceError`  let letVar = 3; // End of TDZ (for letVar)  func(); // Called outside TDZ!}

Using thetypeof operator for a variable in its TDZ will throw aReferenceError:

{  typeof i; // ReferenceError: Cannot access 'i' before initialization  let i = 10;}

This differs from usingtypeof for undeclared variables, and variables that hold a value ofundefined:

console.log(typeof undeclaredVariable); // "undefined"

let declarations cannot be in the same scope as any other declaration, includinglet,const,class,function,var, andimport declaration.

{  let foo;  let foo; // SyntaxError: Identifier 'foo' has already been declared}

Alet declaration within a function's body cannot have the same name as a parameter. Alet declaration within acatch block cannot have the same name as thecatch-bound identifier.

function foo(a) {  let a = 1; // SyntaxError: Identifier 'a' has already been declared}try {} catch (e) {  let e; // SyntaxError: Identifier 'e' has already been declared}

If you're experimenting in a REPL, such as the Firefox web console (Tools >Web Developer >Web Console), and you run twolet declarations with the same name in two separate inputs, you may get the same re-declaration error. See further discussion of this issue inFirefox bug 1580891. The Chrome console allowslet re-declarations between different REPL inputs.

You may encounter errors inswitch statements because there is only one block.

let x = 1;switch (x) {  case 0:    let foo;    break;  case 1:    let foo; // SyntaxError: Identifier 'foo' has already been declared    break;}

To avoid the error, wrap eachcase in a new block statement.

let x = 1;switch (x) {  case 0: {    let foo;    break;  }  case 1: {    let foo;    break;  }}

Variables declared bylet have their scope in the block for which they are declared, as well as in any contained sub-blocks. In this way,let works very much likevar. The main difference is that the scope of avar variable is the entire enclosing function:

function varTest() {  var x = 1;  {    var x = 2; // same variable!    console.log(x); // 2  }  console.log(x); // 2}function letTest() {  let x = 1;  {    let x = 2; // different variable    console.log(x); // 2  }  console.log(x); // 1}

At the top level of programs and functions,let, unlikevar, does not create a property on the global object. For example:

var x = "global";let y = "global";console.log(this.x); // "global"console.log(this.y); // undefined

The following code results in aReferenceError at the line shown:

function test() {  var foo = 33;  if (foo) {    let foo = foo + 55; // ReferenceError  }}test();

Theif block is evaluated because the outervar foo has a value. However due to lexical scoping this value is not available inside the block: the identifierfooinside theif block is thelet foo. The expressionfoo + 55 throws aReferenceError because initialization oflet foo has not completed — it is still in the temporal dead zone.

This phenomenon can be confusing in a situation like the following. The instructionlet n of n.a is already inside the scope of thefor...of loop's block. So, the identifiern.a is resolved to the propertya of then object located in the first part of the instruction itself (let n). This is still in the temporal dead zone as its declaration statement has not been reached and terminated.

function go(n) {  // n here is defined!  console.log(n); // { a: [1, 2, 3] }  for (let n of n.a) {    //          ^ ReferenceError    console.log(n);  }}go({ a: [1, 2, 3] });

When used inside a block,let limits the variable's scope to that block. Note the difference betweenvar, whose scope is inside the function where it is declared.

var a = 1;var b = 2;{  var a = 11; // the scope is global  let b = 22; // the scope is inside the block  console.log(a); // 11  console.log(b); // 22}console.log(a); // 11console.log(b); // 2

However, this combination ofvar andlet declarations below is aSyntaxError becausevar not being block-scoped, leading to them being in the same scope. This results in an implicit re-declaration of the variable.

let x = 1;{  var x = 2; // SyntaxError for re-declaration}

The left-hand side of each= can also be a binding pattern. This allows creating multiple variables at once.

const result = /(a+)(b+)(c+)/.exec("aaabcc");let [, a, b, c] = result;console.log(a, b, c); // "aaa" "b" "cc"

For more information, seeDestructuring.

• var
• const
• Hoisting
• ES6 In Depth:let andconst on hacks.mozilla.org (2015)
• Breaking changes inlet andconst in Firefox 44 on blog.mozilla.org (2015)
• You Don't Know JS: Scope & Closures, Ch.3: Function vs. Block Scope by Kyle Simpson
• What is the Temporal Dead Zone? on Stack Overflow
• What is the difference between usinglet andvar? on Stack Overflow
• Why was the name 'let' chosen for block-scoped variable declarations in JavaScript? on Stack Overflow