JavaScriptのLet
ECMAScript 2015
ECMAScript 2015では、JavaScriptに二つの重要な新しいキーワードが導入されました:let
そして const
。
これらのキーワードはJavaScriptでブロックスコープ(ブロックスコープ)変数(および定数)。
ES2015以前には、JavaScriptには二種類のスコープしかありませんでした:グローバルスコープそして関数スコープ。
グローバルスコープ
グローバル(関数外で)宣言された変数はグローバルスコープ。
例
var carName = "porsche"; // ここのコードでは carName を使用できます function myFunction() { // ここのコードでも carName を使用できます }
グローバル変数はJavaScriptプログラムのどこからでもアクセスできます。
関数スコープ
ローカル(関数内で)宣言された変数は関数スコープ。
例
// ここのコードでは carName を使用することができません function myFunction() { var carName = "porsche"; // code here CAN use carName } // ここのコードでは carName を使用することができません
ローカル変数は宣言された関数内でしかアクセスできません。
JavaScriptのブロックスコープ
通じて 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
第1つの例では、ループ内で使用される変数は var
ループ外の変数を再宣言しました。
第2つの例では、ループ内で使用される変数は let
ループ外の変数を再宣言しません。
ループ内で let
変数 i を宣言した場合、変数 i はループ内でしか見えません。
関数スコープ
関数内で変数を宣言するときは、 var
そして let
とても似ています。
それらはすべて関数スコープ:
function myFunction() { var carName = "porsche"; // 関数スコープ } function myFunction() { let carName = "porsche"; // 関数スコープ }
グローバルスコープ
ブロック外で宣言された場合、それ var
そして let
とても似ています。
それらはすべてグローバルスコープ:
var x = 10; // グローバルスコープ let y = 6; // グローバルスコープ
HTML でのグローバル変数
JavaScript を使用する場合、グローバルスコープは JavaScript 環境です。
HTML では、グローバルスコープは window オブジェクトです。
通じて var
キーワードで定義されたグローバル変数は window オブジェクトに属します:
例
var carName = "porsche"; // このコードでは window.carName を使用することができます
通じて let
キーワードで定義されたグローバル変数は window オブジェクトに属しません:
例
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;