JavaScriptのvarキーワードとは
JavaScriptでは、変数を宣言するために var キーワードを使用します。var キーワードを使用して宣言された変数は、その変数が宣言された関数のスコープ、またはグローバルスコープ（関数外で宣言された場合）内で利用可能です。
var x = 10; // グローバル変数
function exampleFunction() {
var y = 20; // ローカル変数
console.log(x); // 10を出力
console.log(y); // 20を出力
}
exampleFunction();
console.log(x); // 10を出力
console.log(y); // ReferenceError: y is not defined
上記の例では、xはグローバル変数として宣言され、yはexampleFunction関数の中でローカル変数として宣言されています。そのため、yは関数の外からは参照できません。
ただし、varキーワードにはいくつか注意点があります。それは、変数の巻き上げ（hoisting）という現象です。これは、varで宣言された変数が、そのスコープの最上部に「巻き上げ」られるというものです。これにより、変数を宣言する前にその変数を参照することが可能になります。
console.log(z); // undefined
var z = 30;
console.log(z); // 30
このように、varキーワードはJavaScriptで変数を宣言するための一つの方法ですが、その特性を理解することは重要です。現代のJavaScriptでは、letとconstキーワードがより一般的に使用され、これらはvarキーワードの持ついくつかの問題を解決しています。しかし、既存のコードやレガシーコードを理解するためには、varキーワードの動作を理解することは依然として重要です。
グローバル変数とローカル変数の違い
JavaScriptにおける変数のスコープは、その変数がどこから参照できるかを決定します。グローバル変数とローカル変数は、そのスコープによって区別されます。
グローバル変数
グローバル変数は、プログラムのどこからでも参照できる変数です。これらの変数は、関数の外部で宣言され、ウェブページ全体でアクセス可能です。
var globalVar = "I am a global variable";
function testFunction() {
console.log(globalVar); // "I am a global variable"
}
testFunction();
console.log(globalVar); // "I am a global variable"
上記の例では、globalVarはグローバル変数として宣言され、関数の内部と外部の両方から参照できます。
ローカル変数
一方、ローカル変数は、それが宣言された関数の内部でのみ参照できます。関数の外部からはアクセスできません。
function testFunction() {
var localVar = "I am a local variable";
console.log(localVar); // "I am a local variable"
}
testFunction();
console.log(localVar); // ReferenceError: localVar is not defined
上記の例では、localVarはtestFunction関数の内部でローカル変数として宣言され、関数の外部からは参照できません。
これらの違いを理解することは、JavaScriptの変数のスコープと動作を理解する上で重要です。グローバル変数は適切に使用しないと、予期しないバグを引き起こす可能性があります。そのため、可能な限りローカル変数を使用し、必要な場合のみグローバル変数を使用することが推奨されます。また、ES6以降のJavaScriptでは、letとconstキーワードを使用してブロックスコープの変数を宣言することができます。これらは、varキーワードよりも予測可能なスコープを提供します。このため、現代のJavaScript開発では、letとconstの使用が推奨されています。
varを使用しない変数宣言
JavaScriptでは、var以外にもletとconstというキーワードを使用して変数を宣言することができます。これらはES6（ECMAScript 2015）で導入され、varとは異なるスコープのルールを持っています。
let
letキーワードを使用して宣言された変数は、その変数が宣言されたブロック、またはそのブロックのサブブロック内で利用可能です。これはvarが関数スコープであるのに対し、letはブロックスコープであるという違いです。
let x = 10; // グローバル変数
if (true) {
let y = 20; // ブロックスコープの変数
console.log(x); // 10を出力
console.log(y); // 20を出力
}
console.log(x); // 10を出力
console.log(y); // ReferenceError: y is not defined
上記の例では、yはif文のブロック内でletを使用して宣言されています。そのため、ブロックの外からは参照できません。
const
constキーワードを使用して宣言された変数も、letと同様にブロックスコープを持ちます。しかし、constを使用して宣言された変数は、一度値が割り当てられるとその値を変更することはできません（つまり、定数となります）。
const PI = 3.14;
console.log(PI); // 3.14を出力
PI = 3.14159; // TypeError: Assignment to constant variable.
上記の例では、PIはconstを使用して宣言され、その値は変更できません。
これらのキーワードを使用することで、varが持ついくつかの問題（巻き上げや再宣言など）を避けることができます。そのため、現代のJavaScript開発では、letとconstの使用が推奨されています。
変数の巻き上げとスコープ
JavaScriptでは、変数の巻き上げ（hoisting）とスコープは非常に重要な概念です。これらを理解することで、変数がどのように動作するか、どこから参照できるかを理解することができます。
変数の巻き上げ
変数の巻き上げとは、JavaScriptが変数と関数の宣言をそのスコープの最上部に移動するという挙動のことを指します。これは、変数が宣言される前にその変数を参照することが可能になります。
console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5
上記の例では、myVarを宣言する前にその変数を参照しています。しかし、エラーにならずにundefinedが出力されます。これは、varキーワードで宣言された変数が巻き上げられるためです。
スコープ
スコープとは、変数や関数が参照できる範囲のことを指します。JavaScriptには大きく分けて、グローバルスコープとローカルスコープ（関数スコープ）があります。
- グローバルスコープ: グローバルに宣言された変数は、コードのどこからでも参照できます。
- ローカルスコープ: 関数内で宣言された変数は、その関数内からのみ参照できます。
var globalVar = "I'm global!"; // グローバル変数
function checkScope() {
var localVar = "I'm local!"; // ローカル変数
console.log(globalVar); // "I'm global!"
console.log(localVar); // "I'm local!"
}
checkScope();
console.log(globalVar); // "I'm global!"
console.log(localVar); // ReferenceError: localVar is not defined
上記の例では、globalVarはグローバルスコープ、localVarはローカルスコープに存在します。
これらの概念を理解することで、JavaScriptの変数の挙動をより深く理解することができます。特に、var、let、constそれぞれのキーワードがどのように巻き上げとスコープに影響を与えるかを理解することは重要です。これにより、変数の挙動が予想外のものになることを防ぐことができます。