The let statement declares a block scope local variable, optionally initializing it to a value.
Syntax
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
Parameters
var1,var2, …,varN- Variable name. It can be any legal identifier.
value1,value2, …,valueN- Initial value of the variable. It can be any legal expression.
Description
let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Scoping rules
Variables declared by let have as their scope the block in which they are defined, as well as in any contained sub-blocks . In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function:
function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}
Cleaner code in inner functions
let sometimes makes the code cleaner when inner functions are used.
var list = document.getElementById("list");
for (let i = 1; i <= 5; i++) {
let item = document.createElement("li");
item.appendChild(document.createTextNode("Item " + i));
item.onclick = function (ev) {
console.log("Item " + i + " is clicked.");
};
list.appendChild(item);
}
The example above works as intended because the five instances of the (anonymous) inner function refer to five different instances of the variable i. Note that it does not work as intended if you replace let with var, since all of the inner functions would then return the same final value of i: 6. Also, we can keep the scope around the loop cleaner by moving the code that creates the new elements into the scope of each loop.
At the top level of programs and functions, let, unlike var, 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
Temporal dead zone and errors with let
Redeclaring the same variable within the same function or block scope raises a {{jsxref("SyntaxError")}}.
if (x) {
let foo;
let foo; // SyntaxError thrown.
}
In ECMAScript 2015, let will hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
function do_something() {
console.log(foo); // ReferenceError
let foo = 2;
}
You may encounter errors in switch statements because there is only one underlying block.
switch (x) {
case 0:
let foo;
break;
case 1:
let foo; // SyntaxError for redeclaration.
break;
}
Another example
When used inside a block, let limits the variable's scope to that block. Note the difference between var whose scope is inside the function where it is declared.
var a = 1;
var b = 2;
if (a === 1) {
var a = 11; // the scope is global
let b = 22; // the scope is inside the if-block
console.log(a); // 11
console.log(b); // 22
}
console.log(a); // 11
console.log(b); // 2
Non-standard let extensions
let blocks
let blocks support has been dropped in Gecko 44 ({{bug(1167029)}}).
The let block provides a way to associate values with variables within the scope of a block, without affecting the values of like-named variables outside the block.
Syntax
let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;
Description
The let block provides local scoping for variables. It works by binding zero or more variables in the lexical scope of a single block of code; otherwise, it is exactly the same as a block statement. Note in particular that the scope of a variable declared inside a let block using var is still the same as if it had been declared outside the let block; such variables still have function scoping. When using the let block syntax, the parentheses following let are required. Failure to include them will result in a syntax error.
Example
var x = 5;
var y = 0;
let (x = x+10, y = 12) {
console.log(x+y); // 27
}
console.log(x + y); // 5
The rules for the code block are the same as for any other code block in JavaScript. It may have its own local variables established using the let declarations.
Scoping rules
The scope of variables defined using let is the let block itself, as well as any inner blocks contained inside it, unless those blocks define variables by the same names.
let expressions
let expression support has been dropped in Gecko 41 ({{bug(1023609)}}).
The let expression lets you establish variables scoped only to a single expression.
Syntax
let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;
Example
You can use let to establish variables that are scoped only to a single expression:
var a = 5; let(a = 6) console.log(a); // 6 console.log(a); // 5
Scoping rules
Given a let expression:
let (decls) expr
There is an implicit block created around expr.
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ES6')}} | Initial definition. Does not specify let expressions or let blocks. |
| {{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ESDraft')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | {{CompatChrome(41.0)}} | 12 | {{ CompatGeckoDesktop(44) }} | 11 | 17 | {{CompatUnknown}} |
| Temporal dead zone | {{CompatUnknown}} | 12 | {{ CompatGeckoDesktop(35) }} | 11 | {{CompatUnknown}} | {{CompatUnknown}} |
let expression {{non-standard_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
let block {{non-standard_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
| Allowed in {{Glossary("sloppy mode")}} | {{CompatChrome(49.0)}} | {{CompatUnknown}} | {{CompatGeckoDesktop(44)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Basic support | {{CompatUnknown}} | {{CompatChrome(41.0)}} | {{ CompatGeckoMobile(44) }} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(41.0)}} |
| Temporal dead zone | {{CompatUnknown}} | {{CompatUnknown}} | {{ CompatGeckoMobile(35) }} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
let expression {{non-standard_inline}} |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
let block {{non-standard_inline}} |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
| Allowed in {{Glossary("sloppy mode")}} | {{CompatNo}} | {{CompatChrome(49.0)}} | {{CompatGeckoDesktop(44)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(49.0)}} |
Firefox-specific notes
- Prior to SpiderMonkey 46 {{geckoRelease(46)}}, a {{jsxref("TypeError")}} was thrown on redeclaration instead of a {{jsxref("SyntaxError")}} ({{bug(1198833)}}, {{bug(1275240)}}).
- Prior to SpiderMonkey 44 {{geckoRelease(44)}},
letwas only available to code blocks in HTML wrapped in a<script type="application/javascript;version=1.7">block (or higher version) and had different semantics. - Support in {{domxref("Worker")}} code is hidden behind the
dom.workers.latestJSVersionflag ({{bug(487070)}}). With version freelet, this flag is going to be removed in the future ({{bug(1219523)}}). - ES6 compliance for
letin SpIderMonkey is tracked in {{bug(950547)}}