letとconstについて

2020.06.17

2020.06.17

こんにちは。櫻井です。
変数の定義に今まではvarのみを使っていたのですが。スコープについて調べていく過程でie11でも使えることがわかったのでこれを気に積極的に使っていこうと思い、今回はletとconstについて詳しく調べていこうと思います。

let

letは宣言されたスコープに限定した変数を宣言できます。
この辺りはvarと似たような感じです。
宣言したスコープの中に別のスコープがありその中でまた同じ宣言をした場合です。
varの場合は

  
    (function () {
      var x = 1;
      {
        var x = 2;
        console.log('x1:' + x);
        // x1:2 が出力される
      }
      console.log('x2:' + x);
      // x2:2 が出力される
    })()

letの場合は

  
    (function () {
      let x = 1;
      {
        let x = 2;
        console.log('x1:' + x);
        // x1:2 が出力される
      }
      console.log('x2:' + x);
      // x2:1 が出力される
    })()

値の出力のされ方が少し異なりますよね。varの場合は宣言されたスコープの中の別のスコープで再度宣言された場合は元から宣言されていたものが上書きされますが、letの場合は宣言されたスコープの中の別のスコープで再度宣言された場合は同じ変数名でも別の変数として扱われるみたいです。
ということはfor文の中にfor文を入れた場合にiをどちらでも定義できそうです。
ちょっとやってみましょう。

  
    (function () {
      var target = document.getElementById('js-txt');
      for(let i = 0; i < 3;  i++) {
        target.innerText += `x1:${i}\n`;
        for(let i = 0; i < 3;  i++) {
          target.innerText += `x2:${i}\n`;
        }
      }
    })()

実行すると

  
    x1:0
    x2:0
    x2:1
    x2:2
    x1:1
    x2:0
    x2:1
    x2:2
    x1:2
    x2:0
    x2:1
    x2:2

両方iでもちゃんと動きました。これなら、初期化式の変数名で悩むこともなくなりそうです。

const

constは一度定義すると値を変更することができず、再定義することもできません。
なので

  
    (function () {
      const x = 1;
      const x = 2; // エラーになる
      var x = 4; // エラーになる
      let x = 5; // エラーになる
      x = 3; // エラーになる
    })()

こんな感じでエラーになります。
なんだか使いずらそうに思うかもしれませんが、値が変わると困るものとかを入れておけば勝手に変わる心配はないし良さそうです。

IE11問題

ie11でも使えるということでletとconstについて調べたんですが困ったことにどうもie11だとletの値の取り扱いが違うみたいです。
Can I use で調べてみたところ
let variables are not bound separately to each iteration of for loops
と書かれています。
要するにループ処理を行うと他のブラウザとは違う処理するよってことみたいです。
ループ処理っていうのはfor文とかwhile文とかですね。
一番使いたいところで使えない。。