JavaScript let と const

ECMAScript 2015(ECMAScript 6)

ES2015 (ES6) では、重要な JavaScript キーワードが 2 つ追加されました:letとconst。

let で宣言された変数は、let コマンドがあるコードブロック内でのみ有効です。

const は読み取り専用の定数を宣言し、一度宣言すると定数の値は変更できません。

ES6 以前は、JavaScript にはスコープが 2 つしかありませんでした:グローバル変数と関数内のローカル変数。

---

グローバル変数

関数の外で宣言された変数のスコープはグローバルです:

グローバル変数は、JavaScript プログラムのどこからでもアクセスできます。

---

ローカル変数

関数内で宣言された変数のスコープはローカル（関数内）です:

関数内で var を使用して宣言された変数は関数内でのみアクセスできます。var を使用しない場合はグローバル変数になります。

---

JavaScript ブロックスコープ (Block Scope)

var キーワードで宣言された変数はブロックスコープの特性を持たず、{} の外でもアクセスできます。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

ES6 以前には、ブロックスコープの概念はありませんでした。

ES6 では let キーワードを使用してブロックスコープを実現できます。

let で宣言された変数は、let コマンドがあるコードブロック{}内でのみ有効で、{}その外ではアクセスできません。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

---

変数の再定義

var キーワードを使用して変数を再宣言すると、問題が発生する可能性があります。

ブロック内で変数を再宣言すると、ブロック外の変数も再宣言されます:

let キーワードはこの問題を解決できます。let コマンドがあるコードブロック{}内でのみ有効です。

ブラウザのサポート

Internet Explorer 11 およびそれ以前のバージョンのブラウザは let キーワードをサポートしていません。

次の表は、各ブラウザが let キーワードをサポートする最低バージョン番号を示しています。

Chrome 49	IE / Edge 12	Firefox 44	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

---

ループスコープ

var キーワードを使用:

let キーワードを使用:

最初の例では、varキーワードを使用しました。そのキーワードで宣言された変数は、ループ内とループ外を含めてグローバルです。

2 番目の例では、letキーワードを使用します。そのキーワードで宣言された変数のスコープはループ内のみで、ループ外の変数は影響を受けません。

---

ローカル変数

関数内でvarとletキーワードを使用して宣言された変数も同様です。

それらのスコープはどちらもローカルです:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

---

グローバル変数

関数外またはコードブロック外でvarとletキーワードを使用して宣言された変数も同様です。

それらのスコープはどちらもグローバルです:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

---

HTML コード内でのグローバル変数の使用

JavaScript では、グローバルスコープは JavaScript 環境に関するものです。

HTML では、グローバルスコープは window オブジェクトに関するものです。

使用varキーワードで宣言されたグローバルスコープの変数は window オブジェクトに属します:

使用letキーワードで宣言されたグローバルスコープの変数は window オブジェクトに属しません:

変数の再代入

使用varキーワードで宣言された変数はどこでも変更できます:

同じスコープまたはブロックスコープ内では、letキーワードを使用してvarキーワードで宣言された変数を再代入できません:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

同じスコープまたはブロックスコープ内では、letキーワードを使用してletキーワードで宣言された変数を再代入できません:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

同じスコープまたはブロックスコープ内では、varキーワードを使用してletキーワードで宣言された変数を再代入できません:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

letキーワードは、異なるスコープまたは異なるブロックスコープでは再宣言して代入することができます:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

---

変数の巻き上げ

JavaScript では、var キーワードで定義された変数は使用後に宣言できます。つまり、変数は先に使用してから宣言できます（JavaScript の変数の巻き上げ）。

let キーワードで定義された変数は使用後に宣言することはできません。つまり、変数は先に宣言してから使用する必要があります。

// 在这里不可以使用 carName 变量

let carName;

---

const キーワード

const は 1 つ以上の定数を宣言するために使用します。宣言時には初期化が必要で、初期化後は値を変更できません:

const定数の定義は、let を使用してlet定義された変数と似ています：

• 両方ともブロックスコープです
• どちらも、そのスコープ内の他の変数や関数と同じ名前を持つことはできません

さらに、次の 2 つの違いがあります:

• constで宣言された定数は初期化する必要がありますが、letで宣言された変数は初期化する必要がありません。
• const で定義された定数の値は、再代入によって変更できず、再宣言もできません。一方、let で定義された変数の値は変更できます。

var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const で宣言された定数は初期化する必要があります:

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

---

実際には本当の定数ではない

const の本質: const で定義された変数は定数ではなく、不変でもありません。値への定数参照を定義します。const で定義されたオブジェクトや配列は、実際には変更可能です。次のコードはエラーになりません:

しかし、定数オブジェクトに再代入することはできません：

次の例では、定数配列を変更します：

しかし、定数配列に再代入することはできません：

ブラウザのサポート

Internet Explorer 10 およびそれ以前のバージョンのブラウザは、const キーワードをサポートしていません。

次の表は、各ブラウザが const キーワードをサポートする最低バージョン番号を示しています。

Chrome 49	IE / Edge 11	Firefox 36	Safari 10	Opera 36
Mar, 2016	Oct, 2013	Feb, 2015	Sep, 2016	Mar, 2016

変数の再代入

使用varキーワードで宣言された変数はどこでも変更できます：

同じスコープまたはブロックスコープ内では、constキーワードを使用して再宣言することはできません：varとletキーワードで宣言された変数：

var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

同じスコープまたはブロックスコープ内では、constキーワードを使用して再宣言することはできません：constキーワードで宣言された変数：

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

constキーワードは異なるスコープ、または異なるブロックスコープ内では再宣言および再代入できます：

const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

変数の巻き上げ

JavaScript var キーワードで定義された変数は使用後に宣言できます。つまり、変数は先に使用してから宣言することができます（JavaScript 変数の巻き上げ）。

const キーワードで定義された変数は使用後に宣言することはできません。つまり、変数は先に宣言してから使用する必要があります。

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";

その他の拡張