本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
スコープとは
JavaScriptのスコープとは、値と式が参照できる有効範囲のことを指します。スコープには大きく分けて「グローバルスコープ」「ローカルスコープ」の2つがあり、ローカルスコープは「関数スコープ」「ブロックスコープ」の2つに分類できます。
| --- グローバルスコープ
| --- ローカルスコープ
| --- 関数スコープ
| --- ブロックスコープそれぞれのスコープの特徴についてコードを載せながら解説していきます。
グローバルスコープ
グローバルスコープとは、プログラムのトップレベルで宣言された変数が持つスコープです。
グローバルスコープの変数は、グローバル変数とも言われプログラムのどこからでも参照することが可能です。
var apple = "りんご"
console.log(apple); // -> りんご
function getFruits(){
console.log(apple); // -> りんご
}
getFruits();グローバルスコープとWindowオブジェクトについて
JavaScriptにはデフォルトで用意されているWindowオブジェクトがあります。グローバル変数は宣言されると、Windowオブジェクトのプロパティとして値が追加されます。
Windowオブジェクト自体がグローバルスコープのため、window.を省略した書き方でも同じ結果が出力されます。
var color = "赤色"
console.log(color); // -> 赤色
console.log(window.color); // -> 赤色
ローカルスコープ
冒頭で話した通り、ローカルスコープは「関数スコープ」「ブロックスコープ」の2つに分類されます。
それぞれのスコープについて解説します。
関数スコープ
まず始めに関数スコープについて解説します。関数スコープとは名前の通り、関数内で宣言された変数が持つスコープになります。
function scopeFunc(){
let orange = "オレンジ";
console.log(orange) // -> オレンジ
}
console.log(orange); // -> Uncaught ReferenceError: orange is not defined関数内で変数を宣言した場合、その関数内であれば変数を参照することができますが、関数の外から参照しようとするとその値は存在しない「Uncaught ReferenceError: 変数名 is not defined」とのエラーが返ってきます。
ブロックスコープ
続いてブロックスコープについて解説します。ブロックスコープとは{}内で宣言された変数が持つスコープになります。if文やfor文などが該当します。
{}内で宣言された変数ということは、関数スコープもブロックスコープなの？と疑問に思われた方もいらっしゃると思いますが、関数スコープとブロックスコープは別物になります。
関数スコープは{}に囲われていますが、functionで関数宣言をしているため関数スコープとしての役割を持ちます。
ブロックスコープは関数スコープと同様に、ブロックスコープ内で宣言された変数はそのブロック内であれば参照することができますが、ブロックの外から参照しようとするとその値は存在しない「Uncaught ReferenceError: 変数名 is not defined」とのエラーが返ってきます。
{
let banana = "バナナ";
console.log(banana); // -> バナナ
}
console.log(banana); // -> Uncaught ReferenceError: banana is not definedブロックスコープで変数を宣言する注意点
ブロックスコープ内で変数を宣言する際には、letまたはconstを使用します。varを使用して変数を宣言した場合、ブロックスコープは生成されないので注意しましょう。
{
var banana = "バナナ";
console.log(banana); // -> バナナ
}
console.log(banana); // -> バナナブロックスコープで関数を宣言する注意点
ブロックスコープ内で「function 関数名」の書き方で関数宣言をした場合、ブロックスコープ外でも呼び出すことが可能になってしまいます。
ブロックスコープ内で関数宣言をする時には、変数の中に関数を代入する形で記述することでブロックスコープ外からの呼び出しはできないようにすることができます。
/*** 間違った使い方 ***/
{
function helloWorld(){
console.log('Hello World');
}
}
hello World() // -> Hello World
/*** 正しい使い方 ***/
{
const helloWorld = function () {
console.log("Hello World");
};
}
helloWorld(); // -> Uncaught ReferenceError: helloWorld is not defined
