JavaScriptにおける関数内のグローバル変数

JavaScriptでは（他の言語ではほとんどの場合異なります）、 関数の外側で定義された変数は、その関数の内側から見ることができます。 このような変数をグローバル変数と呼びます。 例を見てみましょう：

javascriptlet num = 1; // 関数の外側の変数

function func() {
  console.log(num); // 関数内から変数numが見える
}

func(); // 1を出力する

実際には、変数は関数の定義前ではなく、その関数の呼び出し前に定義されていれば良いのです：

javascriptfunction func() {
  console.log(num);
}

let num = 1; // 関数の外側の変数
func();      // 1を出力する

変数の値を変更した後、その都度関数を呼び出すと、 console.logは毎回異なる結果を出力します：

javascriptfunction func() {
  console.log(num);
}

let num; // 変数を宣言する

num = 1; // 値1を設定
func();  // 1を出力する

num = 2; // 値2を設定
func();  // 2を出力する

複数の関数がある場合、グローバル変数はそれらの各関数内で利用可能になります：

javascriptfunction func1() {
  console.log(num);
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // 1を出力する
func2(); // 1を出力する

いずれかの関数内でグローバル変数に変更が加えられると、 その変数はこの変数を使用するすべての関数で変更されます：

javascriptfunction func1() {
  console.log(num);
  num++; // グローバル変数を変更する
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // 1を出力する
func2(); // 2を出力する

どの関数も簡単にグローバル変数を変更できてしまうため、 その使用は捉えにくいバグの温床となります。 この理由から、スクリプト内でのグローバル変数の使用は最小限に抑えるべきです。 理想的には、全く存在しないか、最小限の数であることが望ましいです。

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

func();

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

num = 2;
func();

javascriptfunction func() {
  console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();