変数は、どの範囲からアクセスできるかによって２種類の範囲（スコープ）をもち、それぞれグローバル変数、ローカル変数と呼ばれます。JavaScriptでは、関数の外側で宣言した変数はグローバル変数として扱われ、プログラムのどこからでも参照することができます。一方、関数の内側で宣言された変数はローカル変数として扱われ、宣言された関数内からのみ参照できます。
変数の種類について
グローバル変数
グローバル変数とはプログラムのどこから(関数の外側)でも参照することができる変数です。この様なスコープのことをグローバルスコープと呼びます。
JavaScript
let scope = 'グローバル変数'; //グローバル変数
function getScope() {
console.log(scope);
} 実行結果
JavaScript
グローバル変数ローカル変数
ローカル変数とはページ内の部分的な範囲のみで参照できる変数です。この様なスコープのことをローカルスコープと呼びます。また、ローカルスコープの中でも関数ごとに作られるスコープを「関数スコープ」、ブロックごとに作られるスコープを「ブロックスコープ」と呼びます。
JavaScript
function getScope() {
let scope = 'ローカル変数'; //ローカル変数
console.log(scope);
} //関数スコープ実行結果
JavaScript
ローカル変数エンジニアからのアドバイス
letを付けずに変数の定義を行うとグローバル変数として定義が行われます。スコープは出来る限り限定すべきという考え方が一般的なので変数が実際に呼び出されている範囲を確認し、どちらの変数で定義をすべきか考えてから定義しましょう。