どうも、豆腐メンタルです。
内容としては、JavaScriptの記述内における「スコープ」について触れていきたいと思います。
前提知識
まず、スコープとは何なのか。どの言語においても使われる言葉なので、自身の備忘録も兼ねて記載。
スコープというのは、実行中のコードから値と式が参照できる範囲のことを言います。
具体的に、コードで表すと...
function a (){
const b = 1;
console.log(b);
<!--関数bの中なら変数bは呼び出せる-->
}
console.log(b);
<!--関数bの外なので、変数bは使えない-->
大変ざっくりしているが、以上のイメージ。
関数内で宣言した変数は、関数の中では使えるけど、関数外では使えませんよという感じですね。。
本題
ここからが本題。JavaScriptのスコープについてもう少し詳しく見ていきます。
スコープ、と一口に言っても実は様々な種類があります。
例えば、上記で例を挙げたもの。
function a (){
const b = 1;
console.log(b);
}
こちらの関数ないで宣言した変数は、関数内で使えず、外では使えない。
その範囲を関数スコープと言います。
メジャーな使われ方をしているのはこちらではないでしょうか？
ただ、実はこのスコープ...我々が知らないうちに働いているスコープもございます。
それが、グローバルスコープとスクリプトスコープです。
簡単ですが、以下をご覧ください
let a = 0;
var b =1;
console.log(b);
1と表示される
よく見るJSの記述ですが、既にこの記述の中にスコープは働いています。
こちらを検証ツールで実行してみると...そのまま、「0,1」と表示されるはずです。
この時点で何が起こっているか
結論から言いますと
まず、letの変数ですが、こちらはスクリプトスコープとして扱われます。また、letだけでなくconstでも同じようにスクリプトスコープとして扱われます。
次に、varの変数。また、関数の場合はグローバルスコープとして扱われます。
一体何が変わるのか？
実は、グローバルスコープ...varの変数、関数で宣言したものは、ウィンドウオブジェクトのプロパティとして値が保持されるのです。
どういうことか？
例えば、jsで以下の記述を見たことがあると思います。
window.alart("警告")
この記述をすることによって、ブラウザ上で警告文が出てくるアレです。
「window」というのが元々備わっている機能(ウインドウオブジェクト)で、varや関数を宣言すると
このウインドウプロジェクト内に保管されるという認識です。
更に、この「ウィンドウオブジェクト」自体が大きな巨大なグローバルスコープになっています。
ここまで書いておいてなんですが、言うなれば「すごい巨大なスコープの親元、親分」というイメージでしょうか...?
また、スクリプトスコープもグローバルスコープも使い勝手は変わらないので、まとめて「グローバルスコープ」と呼ばれます。
駆け足気味の文章でしたが、以上です。
正直パンパンな状態(ブログも久しぶりに)でほぼほぼ書き殴りでしたが、この辺りで締めたいと思います。
随時修正、更新していく所存でございます。
以上、ありがとうございました。