JavaScript スコープ
スコープは変数のアクセス可能性（可視性）を決定します。
JavaScriptの変数には3つのスコープがあります:
- ブロックスコープ
- 関数スコープ
- グローバルスコープ
目次
ブロックスコープ
ES6（2015年）以前は、JavaScriptの変数はグローバルスコープと関数スコープのみでした。
ES6では、letとconstという2つの重要な新しいJavaScriptのキーワードが導入され、ブロックスコープを提供します。
{ }ブロック内で宣言された変数は、外部からアクセスできません:
{
let x = 2;
}
// ここではxは使用できません
varキーワードで宣言された変数にはブロックスコープがありません。
{ }ブロック内で宣言された変数は、外部からアクセスできます。
{
var x = 2;
}
// ここではxを使用できます
ローカルスコープ
JavaScript関数内で宣言された変数は、その関数にローカル（局所）です:
// ここでcarNameは使用できません
function myFunction() {
let carName = "Volvo";
// ここではcarNameを使用できます
}
// ここでcarNameは使用できません
ローカル変数は関数内部からのみアクセス可能です:
ローカル変数は、関数が開始されると作成され、関数が完了すると削除されます。
関数スコープ
JavaScriptには関数スコープがあります。各関数は新しいスコープを作成します。
関数内で定義された変数は、その関数の外部からアクセスできません。
関数内でvar、let、constで宣言された変数は、関数スコープを持ちます。
function myFunction() {
var carName = "Volvo"; // 関数スコープ
}
function myFunction() {
let carName = "Volvo"; // 関数スコープ
}
function myFunction() {
const carName = "Volvo"; // 関数スコープ
}
グローバルJavaScript変数
関数外で宣言された変数は、グローバル変数になります。
let carName = "Volvo";
// ここでcarNameを使用できます
function myFunction() {
// ここでもcarNameを使用できます
}
グローバル変数は、グローバルスコープを持ちます:
Webページ上のすべてのスクリプトと関数からアクセスできます。
var、let、constで宣言された変数は、ブロックの外で宣言された場合、すべてグローバルスコープを持ちます。
var x = 2; // グローバルスコープ
let x = 2; // グローバルスコープ
const x = 2; // グローバルスコープ
JavaScript変数
JavaScriptでは、オブジェクトや関数も変数です。
スコープは、コードの異なる部分から変数、オブジェクト、および関数にアクセスする可否を決定します。
自動的にグローバル
宣言されていない変数に値を割り当てると、その変数は自動的にグローバル変数になります。
このコード例では、関数内で値を割り当てても、carNameはグローバル変数として宣言されます。
myFunction();
// ここでcarNameを使用できます
function myFunction() {
carName = "Volvo";
}
厳密モード
すべてのモダンブラウザはJavaScriptを「厳密モード」で実行することをサポートしています。
厳密モードの使用方法については、このチュートリアルの後の章で詳しく学びます。
「厳密モード」では、宣言されていない変数は自動的にグローバルになりません。
HTMLにおけるグローバル変数
JavaScriptでは、グローバルスコープはJavaScriptの環境です。
HTMLでは、グローバルスコープはwindowオブジェクトです。
varキーワードで定義されたグローバル変数は、windowオブジェクトに属します:
var carName = "Volvo";
// ここでcarNameを使用できます window.carName
letキーワードで定義されたグローバル変数は、windowオブジェクトに属しません:
let carName = "Volvo";
// ここではcarNameを使用できません window.carName
警告
意図しない場合はグローバル変数を作成しないでください。
グローバル変数（または関数）は、windowの変数（または関数）を上書きする可能性があります。
任意の関数、windowオブジェクトを含めて、グローバル変数と関数を上書きすることができます。
JavaScript変数のライフタイム
JavaScript変数のライフタイムは、宣言された時から始まります。
関数（ローカル）変数は、関数が完了すると削除されます。
Webブラウザでは、グローバル変数はブラウザウィンドウ（またはタブ）を閉じると削除されます。
関数の引数
関数の引数（パラメータ）は、関数内でローカル変数として機能します。