0.最近の勉強
しばらく間が空いてしまいましたが、昨年データエンジニアに転職し、日々新しい刺激に揉まれながら精進しています。
現在は、弊社では珍しく（？）Reactを使ったアプリ開発の案件に携わらせていただいており、貴重な機会だと思ってJavaScriptの本をザクっと読んでみています。
その中で出会った「レキシカルスコープ」という概念について、まとめてみたいと思います。
1. スコープとは
本題に入る前に、スコープについておさらいします。
スコープとは、実行中のコードから参照できる、関数や変数の範囲のことです。Java Scriptでは、5種類のスコープが用意されています。
1. 関数スコープ
関数内で宣言された関数や変数が配置されるスコープです。ある関数スコープから、他の関数スコープ内の変数や関数を参照することはできません。
2. ブロックスコープ
if文やfor文などのブロック内で、let や constを使って宣言された変数や関数が属するスコープです。ブロックスコープの場合も、他のブロックスコープの変数や関数を参照することはできません。
3. グローバルスコープ
Java Scriptファイルのトップレベル、または、HTMLファイルのscriptタグ直下にvarで定義した変数、または関数宣言で定義した関数が属するスコープです。グローバルスコープに定義された変数や関数は、コードのどこからでも参照することが可能です。
4. スクリプトスコープ
Java Scriptファイルのトップレベル、または、HTMLファイルのscriptタグ直下に、letやconstで定義した変数や、関数式で定義した関数が属するスコープです。グローバルスコープ同様、コードのどこからでも参照可能なスコープです。
5. モジュールスコープ
ES Modulesという機能を有効化したときに生成されるスコープだそうです...。（ちょっとよく分からないので、ES Moduleについては今後まとめてみようと思います...。）
scriptタグに対して tyoe="module"を設定した際に、
Java Scriptファイルのトップレベル、または、HTMLファイルのscriptタグ直下に定義した変数や関数が、このモジュールに属することになります。他のモジュールからは参照できません。
2. レキシカルスコープとは
レキシカルスコープとは、関数がどこで定義されたかに基づいて、変数や関数の参照範囲が変わる仕組みです。レキシカルとは、コードの字句的な位置に基づいて参照範囲が変わることに由来しています。
const x = "global";
function outer() {
const x = "outer";
inner();
}
function inner() {
console.log(x);
}
outer(); // "global"
上記の例では、outer()の中でinner()を呼び出しており、inner()は定数Xを参照しています。この場合、inner()が定義されているのはグローバルスコープなので、参照先のXは"global"となります。
3. まとめ
Java Scriptのレキシカルスコープについてまとめてみました。
今回読んだ書籍には、「レキシカルスコープはプログラミングにおいて重要な概念」と記載されていたので、他の言語でも生きてくると良いなと思っています。