[JavaScript]ローカル変数とグローバル変数について（備忘録）

１．はじめに

JavaScriptの変数には、スコープ（有効範囲）に基づいてローカル変数とグローバル変数があります。

２．ローカル変数について

関数内で定義される変数です。
変数定義された関数内のみで有効であり、外部からアクセスできません。

３．グローバル変数について

関数外で宣言される変数で、プログラム全体で有効です。
ソースコードの可読性・保守性の維持と変数の上書き防止等の理由により、グローバル変数の使用は推奨されません。

４．サンプルプログラム

〇例１：ローカル変数のみを使用

Sample_1.js

function test() {
    let name = '鈴木';
    console.log(name);
}

test();

console.log(name);

実行結果

鈴木
/tmp/Sample_1.js:9
console.log(name);
            ^

ReferenceError: name is not defined

〇例２：letを使用せずローカル変数を宣言

Sample_2.js

function test() {
    name = '鈴木';
    console.log(name);
}

test();

console.log(name);

実行結果

鈴木
鈴木

重要：
関数内でletを使用せずにローカル変数を宣言すると、その変数はグローバル変数として扱われます。

〇例３：グローバル変数のみを使用

Sample_3.js

let name = '鈴木';

function test() {
    console.log(name);
}

test();

実行結果

鈴木

〇例４：グローバル変数とローカル変数を誤って併用

Sample_4.js

let name = '鈴木';

function test() {
    // letを使用せずローカル変数を宣言
    name = '大谷';
    console.log(name);
}

console.log(name);

test();

console.log(name);

実行結果

鈴木
大谷
大谷

重要：
関数内でletを使用せずにローカル変数を宣言しているので、その変数はグローバル変数として扱われます。
そのため、関数内で name = '大谷' と値が変更され、グローバル変数 name が変更されてしまいます。

〇例５：グローバル変数とローカル変数を正しく併用

Sample_5.js

let name = '鈴木';

function test() {
    // letを使用してローカル変数を宣言
    let name = '大谷';
    console.log(name);
}

console.log(name);

test();

console.log(name);

実行結果

鈴木
大谷
鈴木

５．参考

・JavaScriptでグローバル変数を使わない方が良いみたい
・ローカル変数
・外部変数

６．その他

・実行環境