JavaScriptを一から理解する: スコープについて Part01
はじめに
こんにちは、Doxperと申します。
今回はJavaScriptのスコープについてご紹介します。
この記事でできるようになること
- スコープとは何か学ぶことができる。
- スコープの種類について学ぶことができる。
- グローバル変数/ローカル変数の違いを学ぶことができる。
対象読者
- エンジニアを目指している同士
- JavaScriptの基礎を身につけたい方
- 過去にプログラミング学習に挫折した方
- プログラミング言語は他に触ったことがない方
JavaScript Scope
スコープとは？
スコープとはある変数（または関数）に対して、アクセス可能な領域を定義する概念です。
JavaScriptの変数には大きく分けて2種類のスコープがあります。
さらにローカルスコープは関数スコープとブロックスコープに分類することができます。
- グローバルスコープ
- ローカルスコープ
- 関数スコープ
- ブロックスコープ
グローバルスコープ
グローバルスコープ(大域スコープ)とは他の全てのスコープからアクセス可能なスコープを指します。
最も外側のスコープでありプログラム実行時に暗黙的に作成されます。
グローバルスコープ内で定義した変数をグローバル変数と呼びます。
グローバル変数はどのスコープからでも参照可能です。
//グローバルスコープ
let foo = "こんにちは";
function greet() {
console.log(foo);
}
greet(); // こんにちは
ローカルスコープ
グローバルスコープ以外で宣言された変数は全てローカルスコープを持った、ローカル変数と呼ばれます。
グローバルスコープと異なり、変数を宣言したスコープ内でのみアクセスが可能です。
関数スコープ
関数(function)ごとに作られるスコープを関数スコープといいます。
var,let,constを用いて関数スコープ内で宣言された変数は全てローカル変数となり、関数スコープ内でのみ参照が可能です。
例をみてみましょう。
// グローバル変数
let name = prompt("あなたの名前は何ですか?");
function greet(arg) {
// ローカル変数
var local = "こんにちは";
console.log(local + arg);
}
// 関数の呼び出し
greet();
// 関数スコープ内のローカル変数を呼び出すためエラーが発生
console.log(local); // ReferenceError: local is not defined
ブロックスコープ
ブロック({}で囲まれた部分)ごとに作られるスコープをブロックスコープといいます。
ブロックスコープの概念はECMA script6(ES6)で、新しい変数宣言方法であるconstとletとともに導入されました。
ブロックスコープ内でlet,constを用いて宣言された変数は全てローカル変数となります。
if (true) {
let heading = "The Catcher in the Rye";
console.log(heading); //The Catcher in the Rye
}
console.log(heading); // ReferenceError: heading is not defined
おわりに
いかがでしたでしょうか？
今回はスコープについてご紹介しました。
スコープの概念や、種類について何となくイメージが掴めたのではないでしょうか？
スコープについて深く学ぶことで、関数についての理解が深まり、あらゆる落とし穴を避けることができます。
本記事では紹介しきれなかった、巻き上げ(ホイスティング)やスコープの役割については次回の記事でご紹介します!
また記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。
それではまた次回の記事でお会いしましょう👋
参考文献
関数とスコープ · JavaScript Primer #jsprimer
JavaScriptのスコープ総まとめ | 第1回 スコープの種類とその基本 | CodeGrid
JavaScript: Introduction to Scope (function scope, block scope) - DEV Community
Understanding JavaScript: Scope. The scope of a variable or a function… | by Alexander Kondov | HackerNoon.com | Medium
Discussion