No.235

Javascriptの変数スコープを簡潔に説明する

　ES2015（ES6）で変数の宣言にletとconstが追加された。

JavaScript syntax Variables

Starting with ES6, the version of the language finalised in 2015, variables can be declared with let (for a block level variable), var (for a function level variable) or const (for an immutable one). However, while the object assigned to a const cannot be changed, its properties can.

　昔はvarしかなかったので、古くからいじっている人ほど混乱している気がしないでもない。

　というわけで説明用のテキストをメモ。
　かなり私見が含まれているので要注意。自分はこれで困ってないけどね。

var

　昔からある宣言。というか昔はこれしかなかった。

　宣言する場所により「グローバルスコープ」もしくは「関数スコープ」になる。

　関数の外で宣言すればグローバルスコープになる。

<script>
  var hoge = 1;

  function fuga() {
    console.log(hoge)
    hoge++;
    console.log(hoge)
  }
</script>

　結果は

1
2

　となる。 　 　関数の中で宣言すれば関数スコープになる。foreachなどのブロックの中でも参照できる。

<script>
  function fuga() {
    var hoge = 1;
    {
      hoge++;
      console.log(hoge)
    }
    console.log(hoge)
  }
</script>

　結果は

2
2

　となる。

let

　ブロックスコープになる。foreachなどのブロックの中では独立したものとして扱われる

　一般的な処理ではletが多用されるものと思われる。

<script>
  function fuga() {
    let hoge = 1;
    {
      let hoge = 1;
      hoge++;
      console.log(hoge)
    }
    console.log(hoge)
  }
</script>

　結果は

2
1

　となる。

const

　letと同じでブロックスコープになる。

　違いは再宣言や再代入できないこと。いわゆる定数と考えればOK。

<script>
  function fuga() {
    const hoge = 1;
    console.log(hoge)
    hoge++
  }
</script>

　結果は

1
Identifier 'hoge' has already been declared

　となる。