JavaScript での let と var の違い

このチュートリアル記事では、JavaScript での var キーワードと let キーワードの実際の動作と、それらの主な違いについて説明します。

他のプログラミング言語と同様に、JavaScript には値とデータを格納するための変数があります。また、JavaScript では、let キーワードと var キーワードの両方を使用して変数を宣言します。

これらの 2つのキーワードは同じ意味で使用できると考える人もいますが、そうではありません。2つの主な違いにより、プログラミングで大きなエラーが発生する可能性があります。

ES6 が JavaScript に更新される前は、JavaScript で変数と定数を宣言する方法は 1つしかありませんでした。ただし、ES6 の更新以降、変数と定数の宣言に使用される let および const キーワードが使用できるようになりました。

JavaScript に let および const キーワードを追加する主な理由の 1つは、var キーワードで宣言された変数が宣言されたブロックではなかったことです。代わりに、その範囲は関数に限定されていたため、プログラミングの問題が発生しました。これについては、記事の後半で説明します。

理解を深めるために、このコードセグメントを見てみましょう。

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

このコードセグメントでは、for ループで変数 i を宣言し、console.log を使用して変数の値を取得しました。for ループの後に {} ブラケットを使用していないため、for ループのブロックは次の行にすぎません。

ただし、i の値を表示するために追加の console.log を使用しました。ただし、2 番目の console.log は変数 i の値を取得できず、次のエラーが表示されます。

ReferenceError: i is not defined

このエラーは、変数 i のスコープが for ループブロック専用であり、ブロックの外部からアクセスできなかったために発生しました。したがって、このように、let キーワードを使用して宣言された変数のスコープはブロックのみに制限されているため、ブロック外の変数を使用することはできません。

let と var の違いを確認するには、次のコードセグメントを見てください。

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

上記のコードでは、let キーワードの代わりに var キーワードを使用していることがわかります。

前の例では同じ 2つの console.log が残っていますが、この場合、2 番目の console.log にも出力があります。それでは、出力を見てみましょう。

0
1
2
3
4
5
6
7
8
9
10

最初の console.log は、条件 i<10 と同様に、0 から 9 までの値を出力しました。

しかし、最初の console.log からは確かに出てこなかった出力として 10 を見ることができます。したがって、この 10 は 2 番目の console.log 出力です。

ここでの問題は、変数 i がそのブロック内で使用されるはずでしたが、ブロック外の console.log によってアクセスされたため、スコープを超えたことを意味します。

let および var キーワードが変数の宣言に使用されていることを証明しますが、var キーワードは、スコープの観点からブロックに限定された変数を宣言します。ただし、var キーワードのスコープは関数に限定されています。

関数の外部で変数を宣言する場合、let と var の両方に別の大きな違いがあります。関数の外部で let キーワードを使用すると、外部からアクセスできないローカル変数が作成されます。

ただし、var キーワードを使用すると、グローバル変数になります。次のコードセグメントを見てみましょう。

var color = 'blue';
let model = '2021';

ここでは、2つの変数がこのコードセグメントで宣言されています。1つは let キーワードを使用し、もう 1つは var キーワードを使用しています。したがって、var キーワードを使用して宣言された変数はグローバル変数になり、ブラウザの window オブジェクトにアタッチされます。

ブラウザには、多くのプロパティとメソッドがあり、非常に複雑な window オブジェクトがあります。フロントエンドアプリの開発者は、window オブジェクトを頻繁に使用するため、window オブジェクトを広く知っています。

関数の外で var キーワードを使用するたびに、変数はグローバル変数になり、それ自体が window オブジェクトにアタッチされ、window オブジェクトからアクセスできます。この場合、window.color が color 変数内の値（blue）を表示するため、アクセスされます。

サードパーティのライブラリを使用し、var キーワードを使用して関数の外部で変数を宣言します。サードパーティライブラリに変数と同じ名前の変数がある場合、その変数は変数を上書きします。

window オブジェクトに何かを追加しないようにするもう 1つの理由です。このような場合、var キーワードの使用を避けることを意味します。