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

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

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

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

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

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

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

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

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

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

//test.jsファイル内だとして

  // グローバル変数
  var test_a = 10;
  
  //ローカル変数
  let test_b = 10;

  function test() {
    //test関数ブロック内
    var test_c = 100;
    let test_d = 100;
  }

  console.log(test_a);
    //結果 => 10
  console.log(test_b);
    //結果 => 10
  console.log(test_c);
    //結果 => 100 ※function内で作成した変数でもfunctionの外で呼び出せる
  console.log(test_d);
    //結果 => エラー:not defined ※同じブロックレベル内に test_d は存在しない

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

//test.jsファイル内に中身を下に入替え
let num = 2;
function test(){
  if (num == 1){
    num = 10;
  }else{
    num = 20;
  }
  return(num);
}
console.log(test());

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

let num = 2;
function test(){
  let num2 = 0;
  if (num == 1){
    num2 = 10;
  }else{
    num2 = 20;
  }
  return(num2);
}
console.log(test());

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

let num = 2;
function test(){
  var num = 0;
（以下略）

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

まとめ

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