varとletの違い

概要: このチュートリアルでは、varとletキーワードの違いについて学びます。

#1: 変数のスコープ

関数外で定義されたvar変数は、グローバルスコープに属します。例:

var counter;Code language: JavaScript (javascript)

この例では、counterはグローバル変数です。つまり、counter変数はどの関数からもアクセスできます。

varキーワードを使って関数内で変数を宣言した場合、その変数のスコープはローカルになります。例:

function increase() {
    var counter = 10;
}
// cannot access the counter variable hereCode language: JavaScript (javascript)

この例では、counter変数はincrease()関数に対してローカルです。関数の外からはアクセスできません。

次の例では、ループ内で0から4までの4つの数字を表示し、ループの外では5を表示します。

for (var i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Code language: JavaScript (javascript)

出力

Inside the loop: 0 
Inside the loop: 1 
Inside the loop: 2 
Inside the loop: 3 
Inside the loop: 4 
Outside the loop: 5Code language: Shell Session (shell)

この例では、i変数はグローバル変数です。したがって、forループの内側と後両方からアクセスできます。

次の例では、varキーワードの代わりにletキーワードを使用します。

for (let i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Code language: JavaScript (javascript)

この場合、コードはループ内で0から4までの4つの数字を表示し、参照エラーを表示します。

Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Inside the loop: 3
Inside the loop: 4

エラー

Uncaught ReferenceError: i is not definedCode language: JavaScript (javascript)

この例ではletキーワードを使用しているため、変数iはブロックスコープになります。つまり、変数iはforループブロックの内側でのみ存在し、アクセスできます。

JavaScriptでは、ブロックはif...elseやfor文のように、一対の中括弧{}で区切られます。

if(condition) {
   // inside a block
}

for(...) {
  // inside a block
}Code language: JavaScript (javascript)

#2: グローバルプロパティの作成

グローバルなvar変数は、グローバルオブジェクトにプロパティとして追加されます。グローバルオブジェクトは、Webブラウザではwindow、Node.jsではglobalです。

var counter = 0;
console.log(window.counter); //  0Code language: JavaScript (javascript)

ただし、let変数はグローバルオブジェクトに追加されません。

let counter = 0;
console.log(window.counter); // undefinedCode language: JavaScript (javascript)

#3: 再宣言

varキーワードを使用すると、問題なく変数を再宣言できます。

var counter = 10;
var counter;
console.log(counter); // 10Code language: JavaScript (javascript)

ただし、letキーワードを使用して変数を再宣言すると、エラーが発生します。

let counter = 10;
let counter; // errorCode language: JavaScript (javascript)

#4: 一時的なデッドゾーン

let変数には一時的なデッドゾーンがありますが、var変数にはありません。一時的なデッドゾーンを理解するために、var変数とlet変数のライフサイクル（作成と実行の2つのステップ）を調べてみましょう。

var変数

• 作成フェーズでは、JavaScriptエンジンはvar変数にストレージスペースを割り当て、すぐにundefinedで初期化します。
• 実行フェーズでは、JavaScriptエンジンはvar変数に、代入によって指定された値を代入します（もしあれば）。それ以外の場合、var変数は未定義のままになります。

詳細については、実行コンテキストを参照してください。

let変数

• 作成フェーズでは、JavaScriptエンジンはlet変数にストレージスペースを割り当てますが、変数を初期化しません。初期化されていない変数を参照すると、ReferenceErrorが発生します。
• let変数は、var変数と同じ実行フェーズを持ちます。

一時的なデッドゾーンは、ブロックからlet変数の宣言が処理されるまで開始します。言い換えれば、定義される前にlet変数にアクセスできない場所です。

このチュートリアルでは、varとletキーワードの違いについて学びました。