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;