Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!
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.
An explanation of why the name "let" was chosen can be found here.
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
Emulating private interfaces
In dealing with constructors it is possible to use the let
statement in order to create a private interface without using closures:
var SomeConstructor; { let privateScope = {}; SomeConstructor = function SomeConstructor () { this.someProperty = "foo"; privateScope.hiddenProperty = "bar"; } SomeConstructor.prototype.showPublic = function () { console.log(this.someProperty); // foo } SomeConstructor.prototype.showPrivate = function () { console.log(privateScope.hiddenProperty); // bar } } var myInstance = new SomeConstructor(); myInstance.showPublic(); myInstance.showPrivate(); console.log(privateScope.hiddenProperty); // error
Temporal dead zone and errors with let
Redeclaring the same variable within the same function or block scope raises a 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; }
Using let
with a variable name that is the same as a parameter passed to a function will result in undefined
inside a for
loop.
function go(n){ for (let n of n.a) { console.log(n); } } go({a:[1,2,3]});
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
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Let and Const Declarations' in that specification. |
Standard | Initial definition. Does not specify let expressions or let blocks. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Let and Const Declarations' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 41.0 | 12 | 44 (44) | 11 | 17 | ? |
Temporal dead zone | ? | 12 | 35 (35) | 11 | ? | ? |
Allowed in sloppy mode | 49.0 | ? | 44 (44) | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | 41.0 | 44.0 (44) | ? | ? | ? | 41.0 |
Temporal dead zone | ? | ? | 35.0 (35) | ? | ? | ? | ? |
Allowed in sloppy mode | No support | 49.0 | 44 (44) | ? | ? | ? | 49.0 |
Firefox-specific notes
- Prior to SpiderMonkey 46 (Firefox 46 / Thunderbird 46 / SeaMonkey 2.43), a
TypeError
was thrown on redeclaration instead of aSyntaxError
(bug 1198833, bug 1275240). - Prior to SpiderMonkey 44 (Firefox 44 / Thunderbird 44 / SeaMonkey 2.41),
let
was 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
Worker
code is hidden behind thedom.workers.latestJSVersion
flag (bug 487070). With version freelet
, this flag is going to be removed in the future (bug 1219523).