Understanding JavaScript: Scope Concept Made Easy

Scoping in JavaScript can be a little tricky when you’re first starting out and can cause quit the headache. It doesn’t help that there are so many different kinds of scope as well. You have Block scope, Function scope, Module scope, Global scope, Lexical scope and so on. But I’m going to tell you something, the concept of scope is kind of simple. After getting a better understanding, I started to noticed something, and that was what happens between the brackets, stays between the brackets. It had clicked for me.

Being able to generally wrap your head around the concept of scope, will make learning the individual types of scopes easier for you to understand. I hope that my style and example can assist you in your journey. So lets jump into it.

So imagine a home. Within the home you have many rooms with items in that room that relate to it. For example, you have a living room, which could have items in it such as a couch, a TV stand, or a coffee table. You also have a bed room which would have your bed, a desk, or a dresser and then you would have a bathroom where you would find your shower.

But you also have items that are available in every room. Take for example fundamental things like the venting system which heats or cools each room or the floor that is the foundation of the home. These are within the home itself but also accessible inside of every room in the home as well.

Now although you have all of these items that are within the home, some items are accessible to you no matter where you are or what that item may be and then you have some are not. That is scope.

Let’s look at an example with code.

First let’s create a function called scopeOfMyHome(). And within this we are going to go ahead and define a variable called globalitems to the above mentioned. We will then go ahead and log this out.

function scopeOfMyHome() {
     let globalitems = [“air vent”, “floor”];
     console.log(globalitems);
}

Like in the above text these are going to be our global items that are accessible to each room. Now we’ll create our rooms as functions. Within each room we will define a variable called furniture and have each equal to it’s specific item. We will also log out the global items in each room to show we still have access to it.

function scopeOfMyHome() {
     let globalitems = [“air vent”, “floor”];
     console.log(globalitems);
     function myLivingRoom() {
         let furniture = “couch”;
         console.log(furniture);
         console.log(globalitems);
     }
    function myBedRoom() {
        let furniture = “bed”;
        console.log(furniture);
        console.log(globalitems);
     }
    function myBathRoom() {
       let furniture = “shower”;
       console.log(furniture);
       console.log(globalitems);
     }
 
     myLivingRoom();
     myBedRoom();
     myBathRoom();
}
scopeOfMyHome();

As you can see, each room has access to its own ‘furniture’ that no other room has access to along with the global items that are accessible to all other rooms in the home including whichever you are in.

So what happens between the brackets stays between the brackets and yes, these brackets can be nested like the above. If you call out to a variable that is not in the immediate set of brackets, it will continue upward in the chain of brackets until it either finds the variable you are requesting or the chain comes to an end. Whichever comes first.

But, let’s take a look at another quick and simple example. Remove or comment out everything inside of the function. But we will keep the name the same. I will remove it for simplicity.

function scopeOfMyHome() {
     let max = 10;
    for(let count = 0; count <= max; count++) {
     let count = “andl”;
     console.log(count);
    }
}
scopeOfMyHome();

As you run this, you get “andl” as the result. Which makes sense if your keeping track. Now remove this “let count = ‘andl’;” and see what you get…Numbers. It couldn’t find count in the immediate set of brackets so it worked its way up

This is what I personally feel like you should know when it comes to scope as a base to moving on. It doesn’t matter all too much the type of scope that you are looking at. It is simply a chain of accessible data. The more you move outwards of the code, the more data you have access to.

I again hope this can come to help someone else out there. Sometimes it just takes the right way of hearing or reading something no matter how obscure, to cement something in the head. Keep learning, keep reading. Thirst for more knowledge.

“Success is not final, failure is not fatal. It is the courage to continue that counts.” — Winston Churchill

Happy Coding!