Movatterモバイル変換


[0]ホーム

URL:


  1. 給開發者的 Web 技術文件
  2. JavaScript
  3. JavaScript 參考文件
  4. Statements and declarations
  5. let

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in EnglishAlways switch to English

let

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年9月⁩.

**let**用於宣告一個「只作用在當前區塊的變數」,初始值可選擇性的設定。

嘗試一下

let x = 1;if (x === 1) {  let x = 2;  console.log(x);  // Expected output: 2}console.log(x);// Expected output: 1

語法

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

參數

var1,var2, …,varN

變數名稱。

value1,value2, …,valueN

變數的初始值,可以是任何合法的表達式。

描述

let 可以宣告只能在目前區塊、階段或表達式中作用的變數。而var 則是定義了一個全域變數,或是在整個 function 而不管該區塊範圍。

Scoping rules

宣告let 的作用範圍是它們被定義的區塊,以及該區塊包含的子區塊。這樣看起來功能跟var 很相似。主要不同的地方在於var 作用範圍是「整個」function:

js
function varTest() {  var x = 1;  {    var x = 2; // 這裡的 x 與 function 區塊內部的 x 是一樣的,因此會影響 function 區塊內所有的 x    console.log(x); // 2  }  console.log(x); // 2}function letTest() {  let x = 1;  {    let x = 2; // 這裡的 x 與 function 區塊內部的 x 是不同的,只會作用在這層 block 區塊中    console.log(x); // 2  }  console.log(x); // 1}

在上列例子裡的最前行letvar 不同,let 並不會在全域物件中建立變數。舉例來說:

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

Emulating private members

In dealing withconstructors it is possible to use thelet bindings to share one or more private members without usingclosures:

js
var Thing;{  let privateScope = new WeakMap();  let counter = 0;  Thing = function () {    this.someProperty = "foo";    privateScope.set(this, {      hidden: ++counter,    });  };  Thing.prototype.showPublic = function () {    return this.someProperty;  };  Thing.prototype.showPrivate = function () {    return privateScope.get(this).hidden;  };}console.log(typeof privateScope);// "undefined"var thing = new Thing();console.log(thing);// Thing {someProperty: "foo"}thing.showPublic();// "foo"thing.showPrivate();// 1

Temporal Dead Zone and errors withlet

Redeclaring the same variable within the same function or block scope raises aSyntaxError.

js
if (x) {  let foo;  let foo; // SyntaxError thrown.}

In ECMAScript 2015,let bindings are not subject toVariable Hoisting, which means thatlet declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in aReferenceError (contrary to a variable declared withvar, which will just have the undefined value). The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

js
function do_something() {  console.log(foo); // ReferenceError  let foo = 2;}

你可能會在switch 中遇到錯誤,因為所有的case 都屬於同樣的區塊中。

js
switch (x) {  case 0:    let foo;    break;  case 1:    let foo; // SyntaxError for redeclaration.    break;}

letfor 迴圈的宣告範圍

You can use thelet keyword to bind variables locally in the scope offor loops. This is different from the var keyword in the head of a for loop, which makes the variables visible in the whole function containing the loop.

js
var i = 0;for (let i = i; i < 10; i++) {  console.log(i);}

However, it's important to point out that a block nested inside a case clause will create a new block scoped lexical environment, which will not produce the redeclaration errors shown above.

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

The temporal dead zone andtypeof

Unlike with simply undeclared variables and variables that hold a value ofundefined, using thetypeof operator to check for the type of a variable in that variable's TDZ will throw aReferenceError:

js
// prints out 'undefined'console.log(typeof undeclaredVariable);// results in a 'ReferenceError'console.log(typeof i);let i = 10;

Another example of temporal dead zone combined with lexical scoping

Due to lexical scoping, the identifier"foo" inside the expression(foo + 55) evaluates to theif block's foo, andnot theoverlying variable foo with the value of 33.In that very line, theif block's "foo" has already been created in the lexical environment, but has not yet reached (andterminated) its initialization (which is part of the statement itself): it's still in the temporal dead zone.

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

This phenomenon may confuse you in a situation like the following. The instructionlet n of n.a is already inside the private scope of thefor loop's block, hence the identifier"n.a" is resolved to the property 'a' of the'n' object located in the first part of the instruction itself ("let n"), which is still in the temporal dead zone since its declaration statement has not been reached andterminated.

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

Other situations

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.

js
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); // 11console.log(b); // 2

規範

Specification
ECMAScript® 2026 Language Specification
# sec-let-and-const-declarations

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp