JavaScriptににおけるスコープを解説
今回は、JavaScriptにおけるスコープについて解説していきます。
スコープとは、特定の値や式を参照できる範囲のことを指します。
例えば、このスコープを理解していないと、参照できる値を参照しようとしてエラーが起こったりしてしまいます。
なので、スコープについて理解しておくことはとても重要となります。
ぜひこちらの記事を参考にして、スコープについての理解を深めていきましょう。
グローバルスコープ
まず、グローバルスコープについて解説していきます。
グローバルスコープとは、一番外側にあるスコープのことを指します。
これは、実行環境によって中身が変わってきます。
例えば、JSをブラウザで実行する場合は、windowオブジェクトがグローバルスコープとなります。
このグローバルスコープは一番外側にあるスコープなので、どこからでも参照することができます。
varの変数宣言や、functionによる関数宣言をすると、このグローバルスコープの中にそれらが追加されます。
つまり、この宣言方法だと、グローバルスコープの値がどんどん増えていってしまいます。
バグを生み出さないように、グローバルな値をなるべく定義しないというのは、プログラミングにおける鉄則です。
なので、現代のJavaScriptではこの宣言方法が非推奨とされているわけです。
ブロックスコープ
次に説明するのが、ブロックスコープです。
これは、実行中のスクリプトによって生み出されるスコープです。
具体的には、{}で囲った箇所は新たなブロックスコープを生成します。
このブロックスコープの外からは、ブロックスコープ内で宣言されている値を参照することはできません。
逆に、内側から外側のスコープの値を参照することはできます。
なので、実行される場所によって参照できる値が変わってきます。
スコープチェーン
スコープチェーンとは、スコープの内側から順に値を参照していく仕組みになります。
少し分かりづらいと思うので、具体例を使って説明していきます。
例えば、以下のような処理があった場合、コンソールには何が表示されるでしょうか？
const val1 = 0
const fnFactory = (val) => {
const val1 = 1
const fn = (val2) => {
const val1 = 2
console.log(val1)
}
}
結論から言うと、2が出力されます。
先ほど言った通り、値をスコープの内側から参照していくので、一番内側にある2が参照されるわけです。
この値を参照していく仕組みをスコープチェーンと言います。
ただ1つ注意点があり、ブロックスコープ内では宣言するよりも前に値を参照できないという点です。
例えば、次の場合はコンソールに何が表示されるでしょうか？
const val1 = 0
const fnFactory = (val) => {
const val1 = 1
const fn = (val2) => {
console.log(val1)
const val1 = 2
}
}
この場合は1が出力されそうですが、実際はReferenceErrorとなります。
なぜなら、ブラウザのJavaScriptエンジンが同一のスコープ内に値が定義されてるのに、参照できない場所にあるという判断をするからです。
なので、この点もしっかりと把握しておく必要があります。
まとめ
今回は、JavaScriptにおけるスコープについてまとめました。
この概念を理解していると、バグを引き起こす可能性がかなり減ると思うので意識しておくと良いです。
ちなみに、このスコープという概念を活用した例が「クロージャー」になります。
興味のある方はそちらの記事も読んでみてください。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion