JavaScript のレキシカル スコープを理解する

序章

コードを書いているときに、変数にアクセスしようとすると、 variable is not defined というエラーがスローされることを思い出してください.しかし、それを定義し、上記の関数で複数回使用したことがはっきりとわかります.それがまさにレキシカルスコープの出番です.

レキシカルスコープ

例でこれを理解しましょう:

const name = "Maitra";

function helloWorld() {
    console.log("Hello World !! I'm", name);
}

helloWorld(); //Output: Hello World !! I'm Maitra

ここでは、Global で変数を宣言しており、多くのネストされた関数内のコード内のどこでも使用でき、引き続き機能します.しかし、その逆は機能しません.

function user() {
    const userName = "Maitra";    
}
user();

console.log("Hello World!! I'm",userName); //Output: Uncaught ReferenceError: userName is not defined

これは、userName がグローバル スコープに存在せず、関数ユーザーのレキシカル スコープにのみ存在するために発生します.

非常に簡単に言えば、レキシカル スコープとは、特定の変数/関数にアクセスでき、それを使用できるコード内の場所を意味します.

それでは、関数のレキシカル スコープに含まれるすべてのものについて説明しましょう.任意の関数のレキシカル スコープには次の 2 つがあります.

独自のローカルメモリです

親の字句範囲

これは、関数が、それ自体とその親で定義されているすべての変数と関数にアクセスできることを意味します.

Lexical Scope = Local Memory + Lexical Scope of Parent

例:

const greetings = "おはようございます!!"

function greetUser() {
    const userName = "Maitra"
    console.log(greetings, userName)
}

greetUser();//Output: Good Morning !! Maitra

Note : デフォルトでは、global はすべての関数の親です.
Trivia : global にも親があり、 null を指しているため、プログラムがグローバルの親に到達すると終了します.

スコープチェーン

ここで興味深い部分が来ます.関数は、その親変数と関数だけでなく、すべての祖先にもアクセスできます (祖先は親の親です).非常に単純だが効果的な例でこれを理解しましょう.

const a = "This"
function scopeChain() {
    const b = "is a"
    function x() {
        const c = "simple yet"
        function y() {
            const d = "effective example"
            function z() {
                const e = "of Scope Chain"
                console.log(a,b,c,d,e)
            }z()
        }y()
    }x()
}

scopeChain() //Output: This is a simple yet effective example of Scope Chain

これは、上記の例がどのように機能するかです:

関数 z は、それ自体の中で b c d e を探します.

e は見つかりますが、他は見つかりません.そのため、親 (y) のレキシカル スコープに入り、それらを探します.

そこでは d が見つかりますが、他は見つからないので、その親のレキシカル スコープに移動します

そして、このループはすべての変数が見つかるまで続きます

The entire process of searching inside local memory/own lexical scope, if not found then go to parent's lexical scope and repeat is know as Scope Chain

ここで、変数を使用してすべての例を説明したことを思い出してください.ただし、関数は JS の第一級市民であるため、この規則はすべて関数にも適用されます.

知識は共有によって増加する唯一の富であるため、これが役に立ったことを願っています.