Many people get confused about how the scope chain works. When I started learning JS it was very overwhelming for me by thinking why there is so much topic than C/C++/Java about simple things. But later I found many of the topics are also exist for other languages too. Just I didn't found any courses/tutorials during learning those languages. Scope Chain is one of them.

Scope

If you are sitting in your room it's your scope you can take/access anything from your room. A scope defines your accessible area.

Scope Chain

When you will go to another room it will be another scope but you might or might not have permission to access/take something. Scope chain defines where you can go to access when you need something.

Local Scope

Own scope

Global Scope

Where you start to write your code in the JS document

Parent Scope

Before your birth you were inside of your mother/parent like that when function is inside of another function/scope will call that above scope Parent Scope.

Every scope is always connected to one or more scope except the global scope.

How Scope Chain Works?

PART-1

All codes are available at the end of the article

Here you can access from your room things like 💻️ 📱️ 🍕️ because it's in your room. You can't get the vault key because that is in another separate room. Similarly your parent can't take your pizza/mobile/laptop. But you and your parents can access house 🏚️ key. Imagine you need your houseKey so you will look in your room first if you don't find then you will come out of your room and see it's in outside of your room or not. You won't go to look to your parents room because you won't be able to enter there because you don't have permission (in the above scenario).

Similarly, JS will look first If there is any houseKey in the current scope if doesn't find then it will look in its parent scope. If not found in that scope and it will continue to go to that scope's parent scope and so on until finding it. That's where the chain word comes. Chains are connected to each other. Like that by connecting scope to another scope Scope Chain creates. In this case, yourRoom parent scope is Global Scope. When it finds in the global scope houseKey it stops looking and use that.

PART-2

You might say wait! You just said I can't get the vault key just because it's not in my room, houseKey is not in my room also!! what happened to that logic🙄️. But the thing is even it's not in your or parents room both rooms are inside of the house. Your room was not inside of your parents room that's why you didn't have access to that. So, what will happen if it was!!. Yes, then you would have definitely access🤑️.

Here for the vaultKey JS will look first in the yourRoom's scope then when it will see it is not in there it will go to it's parent scope which is parentRoom's scope and when it will find it will use that and will stop looking if there is another vaultKey in other scopes.

🎁️ Bonus: If you are curious 🙄️ why even scope concept exists then look for this topic The Principle of Least Privilege (PoLP).

This is my first technical blog article. I hope it was useful for you. Feel free to give me suggestion to improve my writing.

Code:

PART-1

//Global Scope
//Accessible to your parents and you
let houseKey = "🔑️"

function parentsRoom() {
    //🧔️👩️your parents scope
    let vaultKey = "🗝️"
}

function yourRoom() {
    //🧒️/👧️your scope
    let yourThings = ["💻️","📱️","🍕️"]
    console.log("This is my 🏚️ key", houseKey)
}

PART-2

//Global Scope
//Accessible to your parents and you
let houseKey = "🔑️"

function parentsRoom() {
    //🧔️👩️your parents scope
    let vaultKey = "🗝️"
    function yourRoom() {
        //🧒️/👧️your scope
        let yourThings = ["💻️","📱️","🍕️"]
        console.log("This is my 🏚️ key ", houseKey)
        console.log("🤑️ I have access vault key ", vaultKey)
    }
    parentsRoom.yourRoom = yourRoom //so that yourRoom function can be accessed from outside
}
parentsRoom()
parentsRoom.yourRoom()