はじめに
以前まで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がオススメです！
上記ソースをコピペして試してみてね。
