はじめに
この記事はJS初級者が中級者を目指して学習した内容のメモであることをご承知おき下さい
JSの主なスコープ
- グローバルスコープ
- 関数スコープ
- ブロックスコープ
- モジュールスコープ
※ここではモジュールスコープ以外のスコープについて記述します
グローバルスコープ
グローバルスコープとはプログラム全体で利用可能な変数や関数が存在する領域のこと。
グローバルオブジェクトとほぼ同義でwebブラウザ環境だとwindowオブジェクトのこと指す。
const hello = 'hello';
function a(){
console.log('a is called');
}
上記の定数helloや関数aのようにJSファイルの直下で宣言した変数や関数はプログラムのどこからでもアクセスが可能になる。
ただし、グローバルスコープを過剰に利用するとコードの管理が難しくなり、バグの原因となることがある（グローバルスコープの汚染）ため、適切な管理が必要。
関数スコープ
関数内で宣言された変数や関数がアクセスできる範囲のこと。関数スコープ内で宣言された変数は、その関数内でのみアクセス可能。
function a(){
const hello = 'hello';
console.log(hello);
}
a(); // => hello
console.log(hello); // Uncaught ReferenceError: hello is not defined ②
①関数スコープ内でならば定数helloへアクセスすることは可能だが、②関数スコープの外部からは定数helloにはアクセスできず'Uncaught ReferenceError'となる
※補足 関数宣言自体はグローバルスコープで扱われる
ブロックスコープ
ES6から導入されたletとconstのみで生成されるスコープで、if文やfor文などの波括弧{}で囲まれた範囲のこと。
varではブロックスコープスコープは無視されるので現在はvarの仕様は推奨されない。
{
var a = 0;
let b = 0;
const c = 0;
}
console.log(a); // 0 ①
console.log(b); // Uncaught ReferenceError ②
console.log(c); // Uncaught ReferenceError ③
① varで宣言された変数aはブロックスコープの外からアクセス可能
②、③ letやconstで宣言されたbやcはブロックスコープの外からアクセス不可
ブロックスコープ内の関数について補足
①ブロックスコープ内で関数宣言した関数aをブロックスコープ外から呼び出す
{
function a(){
console.log('a is called');
}
}
a(); // a is called
関数aは実行される
（関数宣言自体はグローバルスコープで扱われるため）
②ブロックスコープ内でconstを使用した関数式で定義した関数aをブロックスコープ外から呼び出す
{
const a = function(){
console.log('a is called') ;
}
}
a(); // Uncaught ReferenceError
関数aは実行できない
（関数aはconstを使用した関数式で定義されておりconstはブロックスコープを生成するため、ブロックスコープ外からは参照することができないため）