【JavaScript】varとletとconstとブロックスコープについて検証してみた

はじめに

以前までJavaScriptにはvarしかなくブロックスコープはありませんでした。
最近はletとconstが現れ、こちらはブロックスコープになります。
※ググると『JavaScriptにブロックスコープはない』ってのがヒットしますが古い情報なので注意してね。

検証コード

ブロックスコープの挙動については下記console.logの結果に注目しながらご確認ください。
ちなみにconstは上書き禁止の宣言ですが、スコープが異なれば当然別物になりますのでそのあたりも気にしながら！ ついでに変数巻き上げについても見ていきます！

// ----------------------------------------
// 変数a, b, c をグローバル変数で宣言し、挙動見ていく
var a = "A";
let b = "B";
const c = "C";
console.log(a, b, c); // A B C

// ----------------------------------------
// 関数スコープでは全て別物
(function () {
  console.log(a); // undefined ※変数巻き上げのため
  //console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
  //console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization
  var a = "AA";
  let b = "BB";
  const c = "CC";
  console.log(a, b, c); // AA BB CC
})();
console.log(a, b, c); // A B C

// ----------------------------------------
// varはブロックスコープではないので上書きされる
{
  console.log(a); // A
  //console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
  //console.log(c); // Uncaught ReferenceError: Cannot access 'b' before initialization
  var a = "AA";
  let b = "BB";
  const c = "CC";
  console.log(a, b, c); // AA BB CC
}
console.log(a, b, c); // AA B C

// ----------------------------------------
// ブロックスコープ内で上書き
{
  a = "AAA";
  b = "BBB";
  //c = "C"; // Uncaught TypeError: Assignment to constant variable.
}
console.log(a, b, c); // AAA BBB C

// ----------------------------------------
// グローバルスコープ上で再定義
var a = "AAAA";
//let b = "BBBBB"; // Uncaught SyntaxError: Identifier 'b' has already been declared
//const c = "CCCC"; // Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(a, b, c); // AAAA BBB C

ややこしいですが状況に応じて使い分けていきましょう！

さいごに

JSの挙動確認するときはRunstant Liteがオススメです！
上記ソースをコピペして試してみてね。