JavaScript スコープ（Scope）を理解しよう

2023年10月14日

JavaScriptのスコープとは、変数の有効範囲のことです。

グローバルスコープ、ローカルスコープ、ブロックスコープの３つがありますので、順に見ていきましょう。

変数がどこで宣言されているかによって、その変数にアクセスできる場所が異なります。

1. グローバルスコープ

//GLOBAL SCOPE
let fruit = 'apple';
let fruitNum = 5;

console.log(fruit, fruitNum);//GLOBAL SCOPEの結果

グローバルスコープとは、スクリプト全体でアクセス可能なスコープのことです。

グローバルスコープで宣言された、fruitとfruitNumは、どこからでもアクセス可能と言うことになります。

let fruit = 'apple';
let fruitNum = 5;

function store() {
  fruit = 'peach';
  fruitNum = 10;
}
store();

console.log(fruit, fruitNum);//store();が実行され、書き換えが行われた

どこからでもアクセス可能ということですから、例えば関数からアクセスしてfruitの名前とfruitNumの数を書き換えることも可能です。

この場合、コンソールには、『peach 10』が表示されます。

2. ローカルスコープ

ローカルという名前が付いている通り、ローカルスコープ内で定義された変数は、その関数の実行中のみ有効です。

//GLOBAL SCOPE
let fruit = 'apple';
let fruitNum = 5;

function store() {
  //LOCAL SCOPE like a private party here!
  let fruit = 'banana';
  let fruitNum = 50;
  console.log(fruit, fruitNum); //LOCAL SCOPEの結果...コンソールには、banana 50
}
store();

console.log(fruit, fruitNum); //GLOBAL SCOPEの結果...コンソールには、apple 5

わかりやすくするため、グローバルスコープでfruitとfruitNumを宣言し（こちらはどこからでもアクセス可能）、その後、関数内でfruitとfruitNumを宣言しました。

この場合、変数名は同じですが、関数内の変数はその関数内でのみ有効なため、グローバルスコープの結果には影響はありません。

DevEdが「ローカルスコープは、招待状がないと入れないプライベートパーティーのようなもの」と言っていて、うまいこと言うなぁと思いました。

3. ブロックスコープ

ブロックスコープは、if文やforループ内のブロック内で変数を定義するために使用されます。これらの変数はブロック内でのみ有効です。

DevEd風に言うのなら、「Another private party! （もう一つのプライベートパーティー）」ですね！

//GLOBAL SCOPE
let fruit = 'apple';
let fruitNum = 5;

if (true) {
  //BLOCK SCOPE
  let fruit = 'kiwi';
  let fruitNum = 20;
  console.log(fruit, fruitNum); //BLOCK SCOPEの結果...コンソールには、kiwi 20
}

console.log(fruit, fruitNum); //GLOBAL SCOPEの結果...コンソールには、apple 5