JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【let/var/constの違い】

JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【let/var/constの違い】

JavaScript:お手伝いしているプログラミングスクールで聞かれた質問【let/var/constの違い】

最近になり縁あってプログラミングスクールのお手伝いをするようになりました。その生徒さんといろいろお話している中で出てきた『よく理解できなかった事』について「そう言えば自分も最初詰まった」と感じたものがいくつかあったので、この際まとめておこうかと。
具体的にはこんな内容です。

let と const と var は何が違うの?

プログラムをJSから始めた人は多分みんな通る道なのではないでしょうか。
定数や変数を宣言することは『エラーのないプログラム』を作るうえでも、とても重要な工程です。
JSでは3つの宣言が使われますが、今後は2つにまとまっていくと思われます。

  1. 定数を宣言するconst(コンスト)
  2. 変数を宣言するlet(レット)
  3. 定数でも変数でも関係なく宣言するvar(バー)

Google先生に聞いて出てくる情報だとvar が一番多いかなと思いますが、テキスト系(書籍)だと let の出現率が高くなります。
これは、let やconst が2015年6月に標準化された JavaScriptの「ECMAScript 2015(ES6)」から使えるようになった事に由来します。
ネット上の情報はもっと前から蓄積されているので、varで宣言している参考事例を目にする率が高まります。

「varは使わないようにしよう」が基本的な流れ

ES6より前では宣言はvarしかありませんでした。そのため、定数であれ変数であれvarを利用していました。
しかし【ブロックレベルのスコープに対応できるlet】と【変更を拒否するconst】ができたため「letとconstを使ってvarはやめよう」という流れになっています。
それでも(私を含め)2015年以前からスクリプト書いている人はついつい「var」って宣言してしまうと思いますが。手が勝手にvarって打ってるんですよね。

ブロックレベルのスコープって?

ここここここを参照してください。これで感覚はつかめると思います。

function内で宣言した場合、varで宣言するとfunctionの外で使うことができますが、letで宣言した場合はこれができません。
test.jsのサンプルコードを見てみると、let で宣言した【test_b】はトップレベルに存在し、ログ記録パートもトップレベルに存在します。
しかし【test_d】はtest関数(function test())内に存在していて、ログ記載パートと異なるブロックレベルに存在しています。
そのため「同じ階層にいない = test_dなんて変数は知らない」となっています。

ちなみに、このように記載するとログには20を記載します。

このように記載しても20を記録しますが、

とするとエラーが発生します。これはletが再宣言禁止となっているからです。

まとめ

続けて書こうと思いましたが、このネタだけで長くなってしまったので続きはまた別の記事で。