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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let num = 1;

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

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

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

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

let num = 1;

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

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

コードを実行せずに、コンソールに何が出力されるか判断してください：

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

func();

コードを実行せずに、コンソールに何が出力されるか判断してください：

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

num = 2;
func();

コードを実行せずに、コンソールに何が出力されるか判断してください：

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

let num;

num = 1;
func();

num = 2;
func();