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
キーワードの使用を避けることを意味します。