JavaScript

var/let/constの使い分けのメモ

More than 1 year has passed since last update.

グローバルスコープ

  • トップレベルに変数や関数を置くと、それはどこからでもアクセスできるグローバルオブジェクトになる
  • 別のJSファイルに書いたとしても、同様にグローバル扱いになる

関数スコープ

  • functionの中に書かれた変数・関数はその内部でしか変更・参照はできない
  • 外部から参照できないので変更に強いモジュールが作れる

var

  • 巻き上げがおきる
    • JavaScriptは関数内のどこでもvarの宣言を書ける
    • 関数のどこで宣言しても、先頭で定義したものとしてみなされる
    • 先頭部分で使いたい変数は全て定義するのが定石
  • 関数スコープである
    • 関数内ならどこからでも参照できる
var pokemon = 'ライチュウ';
function sing(){
   //JavaScriptは関数内のどこでもvarの宣言を書ける
   //これらの変数は関数のどこで定義しても、先頭で定義したものとして見なされる
   //var pokemon;
   console.log(pokemon);
   var pokemon = 'ピカチュウ';
   console.log(pokemon);
}
sing();

let

  • ブロックスコープ
  • 今までvarで書いてきた所はletで置き換えられる
  • if,for等の{}内のブロックのみで使うブロックスコープが作れるので、スコープを狭く出来るため影響範囲を狭められる
  • 変数の巻き上げは従来どおり起きる
if (true) {
  //if内はスコープが無いのでグローバルスコープ扱い
  var test = 'hoge';
}

//ブロックスコープではないので、アクセスできる
console.log(test);

if (true) {
  //ブロックスコープになる
  let test2 = 'hoge2';
}

//アクセスできない
console.log(hoge2);

const

  • 再代入不可能な変数を作る (つまり定数にできる)
  • 再代入しようとするとエラーになる
  • letと同じブロックスコープ
  • 巻き上げは起きる
  • ほとんどは再代入は不要なのでconstを使う
  • constを使っておけば値が変わることが無いので、値が変わるかも?という懸念が無くてコードが読みやすい
  • forのイテレータのような再代入が必要な所のみletを使う
const test3 = 'hoge';

test3 = 'fuga'; //エラー

console.log(test3);