グローバル変数とローカル変数

JavaScriptにおけるグローバル変数とローカル変数

グローバル変数はプログラムのどこからでもアクセスができる変数のこと
一方、関数の内側で宣言した変数はローカル変数と呼ばれ、どこででも使用できる変数ではない

グローバル変数やローカル変数の違いと特徴を理解する上では
スコープと呼ばれる概念を理解しておくことが必要とされている

スコープとは

変数がプログラムの中のどの場所から参照できるのか、ということを決定づけるもの
要約すると変数が使用可能な範囲とも言える

---

グローバル変数ではプログラムのどこからでも参照ができるため
全範囲がグローバル変数にとってのスコープ

「グローバルスコープ」

ローカル変数では有効な範囲が限られるため
この限られた範囲がローカル変数にとってのスコープ

「ローカルスコープ」

グローバル変数の定義

グローバル変数として定義するには、関数の外で変数の宣言を行う

グローバル変数

const x = 1;

function fn() {
    // fn関数のスコープ外から`x`は参照可能
    console.log(x); // => 1
}
fn();
// fn関数のスコープ内から`x`は参照できる
console.log(x); // => 1

上記を実行すると関数の外で定義したconst x = 1;を
関数内・外共に参照出来た事が確認された

ローカル変数の定義

ローカル変数として定義するには、関数を定義し、その中で変数の宣言を行う

ローカル変数

function fn() {
    const x = 1;
    // fn関数のスコープ内から`x`は参照可能
    console.log(x); // => 1
}
fn();
// fn関数のスコープ外から`x`は参照できないためエラー
console.log(x); // => ReferenceError: x is not defined

上記を実行すると関数内で定義したconst x = 1;を
関数内では参照することが可能だったが、関数の外では参照が出来なかった事が確認された