ES2015 では、let と const という 2 つの重要な新しい JavaScript キーワードが導入されました。
これら 2 つのキーワードは、JavaScript でブロック スコープ (ブロック スコープ) 変数 (および定数) を提供します。
ES2015 より前の JavaScript には、グローバル スコープと関数スコープの 2 種類のスコープしかありませんでした。
グローバル (関数の外) で宣言された変数にはグローバル スコープがあります。
var carName = "porsche";
// ここのコードでは carName を使用できます
function myFunction() {
// ここのコードでは carName も使用できます
}
グローバル変数は、JavaScript プログラム内のどこからでもアクセスできます。
(関数内で)ローカルに宣言された変数には関数スコープがあります。
// ここのコードでは carName を使用できません
function myFunction() {
var carName = "porsche";
// code here CAN use carName
}
// 此处的代码不可以使用 carName
ローカル変数は、変数が宣言されている関数内でのみアクセスできます。
var キーワードで宣言された変数には、ブロックスコープがありません。
ブロック内で宣言された変数{}は、ブロックの外部からアクセスできます。
{
var x = 10;
}
// ここで x を使用できます
ES2015 より前は、JavaScript にはブロック スコープがありませんでした。
let キーワードを使用して、ブロック スコープの変数を宣言できます。
ブロック{}内で宣言された変数には、ブロックの外部からアクセスできません:
{
let x = 10;
}
// ここでは x は使用できません
var キーワードを使用して変数を再宣言すると、問題が発生する可能性があります。
ブロック内で変数を再宣言すると、ブロック外の変数も再宣言されます。
var x = 10;
// 此处 x 为 10
{
var x = 6;
// 此处 x 为 6
}
// 此处 x 为 6
let キーワードを使用して変数を再宣言すると、この問題は解決します。
ブロック内で変数を再宣言しても、ブロック外の変数は再宣言されません。
var x = 10;
// ここで x は 10 です
{
let x = 6;
// ここで x は 6 です
}
// ここで x は 10 です
Internet Explorer 11 以前は、let キーワードを完全にはサポートしていません。
次の表は、let キーワードを完全にサポートする最初のブラウザ バージョンを定義します。
| Chrome 49 | IE / Edge 12 | Firefox 44 | Safari 11 | Opera 36 |
| 2016 年 3 月 | 2015 年 7 月 | 2015 年 1 月 | 2017 年 9 月 | 2016 年 3 月 |
ループ内で var を使用する:
var i = 7;
for (var i = 0; i < 10; i++) {
// いくつかのステートメント
}
// i = 10
ループ内で let を使用する:
let i = 7;
for (let i = 0; i < 10; i++) {
// いくつかのステートメント
}
// i = 7
最初の例では、ループ内で使用されている変数が、var を使用してループ外の変数を再宣言しています。
2 番目の例では、ループ内で使用される変数は let を使用し、ループの外で変数を再宣言しません。
変数 i がループ内で let で宣言されている場合、変数 i はループ内でのみ表示されます。
関数内で変数を宣言する場合、var の使用は let と同様です。
それらはすべて関数スコープを持っています:
function myFunction() {
var carName = "porsche"; // 関数のスコープ
}
function myFunction() {
let carName = "porsche"; // 関数のスコープ
}
宣言がブロックの外で宣言されている場合、var と let も同様です。
これらはすべてグローバル スコープを持っています:
var x = 10; // グローバルスコープ let y = 6; // グローバルスコープ
JavaScript の場合、グローバル スコープは JavaScript 環境です。
HTML では、グローバル スコープはウィンドウ オブジェクトです。
var キーワードで定義されたグローバル変数は、ウィンドウ オブジェクトに属します。
var carName = "porsche"; // ここのコードでは window.carName を使用できます
let キーワードで定義されたグローバル変数は、ウィンドウ オブジェクトに属しません:
let carName = "porsche"; // ここのコードでは window.carName を使用できません
プログラム内の任意の場所で var を使用して JavaScript 変数の再宣言を許可します。
var x = 10; // 今、x は 10 です var x = 6; // 今、x は 6 です
同じスコープまたは同じブロック内で let を介して var 変数を再宣言することはできません。
var x = 10; // 許可します
let x = 6; // 許可されません
{
var x = 10; // 許可します
let x = 6; // 許可されません
}
同じスコープまたは同じブロック内で let を介して let 変数を再宣言することはできません。
let x = 10; // 許可します
let x = 6; // 許可されません
{
let x = 10; // 許可します
let x = 6; // 許可されません
}
同じスコープまたは同じブロック内で var を介して let 変数を再宣言することはできません。
let x = 10; // 許可します
var x = 6; // 許可されません
{
let x = 10; // 許可します
var x = 6; // 許可されません
}
別のスコープまたはブロックでは、let 経由で変数を再宣言できます。
let x = 6; // 許可します
{
let x = 7; // 許可します
}
{
let x = 8; // 許可します
}
var で宣言された変数は最上位にホイストされます。 Hoisting が何なのかわからない場合は、Hoisting の章を読んでください。
変数を宣言する前に変数を使用できます。
// ここでは carName を使用できます var carName;
let で定義された変数は最上位にホイストされません。
宣言する前に let 変数を使用すると、ReferenceError が発生します。
変数は、ブロックの先頭から宣言されるまで「一時的なデッド ゾーン」にあります。
// ここでは carName を使用できません let carName;