JavaScriptのスコープについて

スコープとは

スコープとは変数を参照できる範囲のことです。今回はJavaScriptのvar,let,constについて解説します。
constは定数(再代入不可)の宣言なので特に難しく考えることはないのですが、letとvarは少し紛らわしいのでここを理解することでコードレビューの指摘が減ると思います。

今回の記事用に書いたコード

コメントに解説が書いてあるので、これだけでも分かるかもしれませんが一応ひとつずつ解説します。

function Test(){
  var hoge = 1

  // hogeは関数スコープなのでTest関数の中で使う場合はエラーにならない
  console.log(hoge)

  if (true){
    let fuga = 2
    // fugaはブロックスコープなので、ブロック内(この場合はif文の中)で使用する場合はエラーにならない
    console.log(fuga)
  }
  // fugaはブロックスコープなので、ブロック内で定義した変数をブロックの外で呼び出そうとするとエラーになる
  // Uncaught ReferenceError: fuga is not defined
  console.log(fuga)
}

Test()

// hogeは関数スコープなので、Test関数内で定義した変数を関数の外で呼び出そうとするとエラーになる
// Uncaught ReferenceError: hoge is not defined
console.log(hoge)

// constで変数を定義すると定数扱いになるため、値の再代入はできない。
// Uncaught TypeError: Assignment to constant variable.
const aaa = 3
aaa = 3

var

関数内で有効となる変数。上記のコードでは変数hogeをvarで宣言している。Test関数の外でhogeを参照使用とするとエラーとなる

let

ブロック内で有効となる関数。上記のコードでは変数fugaをletで宣言している。変数を宣言したブロックの外でfugaを参照しようとするとエラーとなる。varに比べるとスコープが狭いため、想定外の値が入りにくいというメリットがある。

const

constで宣言された場合は定数となり、再代入は不可能となる。処理内容ごとに値が変わらないことを想定している場合は定数にしておく。