JavaScript - varとletの違い、注意点

JavaScriptでは、変数の宣言方法として、「var」命令がありましたが、

ES2015から新たに「let」命令が加わりました。

ここでは、varとletの違いや注意点について説明します。

スコープ（範囲）の違い

varとletの大きな違いはスコープの違いです。

varは関数スコープで、letはブロックスコープです。

次のサンプルコードは、ifブロックの中で変数を宣言しています。

まずはvar命令での宣言の場合です。

if(true){
	var x = 1;
	console.log(x); // 1
}

console.log(x); // 1

varは関数スコープなので、ifブロックの外からでも参照できます。

次は、letを使ってみます。

if(true){
	let x = 1;
	console.log(x); // 1
}

console.log(x); // エラー: Uncaught ReferenceError: x is not defined

letはブロックスコープなので、この場合はifブロックの中でだけ有効になります。

ifブロックの外から参照するとエラーになります。

ifブロックの外でも変数xを使用したい場合は、 下のコードのように、ifブロックの外で変数宣言する必要があります。

let x = 1;	

if(true){
	
	console.log(x); // 1
}

console.log(x); // 1

このように、「letはブロックスコープ」だということを認識していないと 思わぬエラーが発生することがあります。

変数の重複を許可するかどうか

var命令は、変数の重複を許可します。 ですから、次のコードも正常に動作します。

var x = 1;
var x = 2;

console.log(x); // 2

一方、let命令は変数の重複を許可しません。 次のコードはエラーとなります。

let x = 1;
let x = 2; // エラー: Identifier 'x' has already been declared

console.log(x);

通常、同じ名前の変数を宣言することはありません。

間違えて同じ名前を使ってしまうことはあると思います。

その場合は、エラーとして教えてくれるletの方が親切だといえます。

まとめ

・ES2015から変数宣言として新たにlet命令が加わりました。

・var命令は関数スコープ、let命令はブロックスコープです。

・var命令は変数の重複を許可し、let命令は許可しません。