胡瓜のプログラミング日記

JavaScriptにおけるvar/let/constの違い

自分がこの業界で働きはじめたころにはすでに var はほとんど過去のものであったため、
その仕様についてちゃんと調べる機会がなかった。
しかし、先日初心者に質問される機会があり、そこでようやく var が let や const とどう違うかしったのでメモ。

やっぱり mdn web docs を見るのが一番。https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#%E5%A4%89%E6%95%B0%E3%81%AE%E5%AE%A3%E8%A8%80

スコープが違う

var について

この構文は、実行コンテキストによって、ローカル変数とグローバル変数の両方の宣言に使用できます。

let, const について

例えば、let y = 13。この構文はブロックスコープのローカル変数を宣言することができます。（以下にある変数のスコープをご覧ください。）

とある。
「以下にある『変数のスコープ』」 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#%E5%A4%89%E6%95%B0%E3%81%AE%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97
によれば、

let および const の宣言は、宣言されたブロック文のスコープになることもあります。
ただし、 var で生成された変数はブロックスコープにはならず、そのブロックが存在する 関数（またはグローバルスコープ） に局所的になります。

つまり、let や const はブロックスコープになるが、var はブロック外でも使用可能。

変数の巻き上げ

var で宣言された変数は巻き上げが行われ、その変数がまだ宣言されていない場合でも、そのスコープ内のどこでも参照することができるようになります。

つまり、以下のように書いても、エラーにはならない。
x の初期化処理は巻き上げが行われないため、コンソールには undefined が出力される。

console.log(x);
var x = 3;
// => undefined (エラーではない)

一方で、const を使って書いた場合は「Uncaught ReferenceError: x is not defined」となる。

console.log(x);
const x = 3;
// => Uncaught ReferenceError: x is not defined

所感

var だけで実装してた先達の皆さんへ敬意を。。。

参考