Scoping in javascript can be a very confusing topic, but follow through with me as I simplify the concept for you! Scoping in javascript is a term that describes how program variables are organized and accessed. Let me use a trait to explain the concept of scoping, My father is an average height person, same as my mother, none of my siblings are as tall as I am, does that mean I am a Bastard?

CAPITAL NO! Now if we look up in our lineage, my grandfather was a pretty tall man, that means I most likely inherited my height from my grandfather, and the scope here is FAMILY!.

That brings me to the definition of scope, a scope is an environment in which a certain variable is declared, in the instance of my height, the scope environment is family, which means someone that is not family can not look down or look up in our lineage trying to match a trait, simply because we are not related!.

Now let's go back to javascript, there are three (3) types of scopes;

• Global Scope;
• Function Scope; and
• Block scope;

GLOBAL SCOPE

The variable firstName in the code above is in a global scope because it is accessible anywhere and everywhere in the code, check the illustration below;

This illustration shows that the firstName variable is available for use everywhere, whether in a function or a block, Now let's see what happens when I try to access the lastName variable in the global space

FUNCTION SCOPE

Here we get a reference error saying lastName is not defined, but looking at the illustration above, lastName variable was defined inside the fullName function, which mean every variable declared with the const or let variable in a function is scoped to that function and is not available on the global scope.

After javascript received the instruction to log to the console the lastName variable, it looked up and down in the global scope but lastName was not declared, hence the reference error, but when firstName was called in the fullName function, javascript first looked through the fullName scope to check if the firstName variable was declared, let's see a proof of this in the illustration below;

I declared another firstName variable inside the fullName function, javascript first looked through the function scope, found the firstName variable there and executed it immediately and ignored the global scope, but if I did not declare the firstName variable in the fullName function, then javascript will look into the global scope and execute the firstName variable I declared.

This shows that codes are executed from inside to outside.

BLOCK SCOPE

Now let's take the fullName function a bit further,

I wrote an if block statement inside the fullName function, according to the illustration above, the if block still has access to the firstName variable in the global scope and the lastName variable in the fullName function, now let us see what happens when we try to log the age and job variable to the console outside the if block, Note the difference

Logging the age variable to the console gave a reference error, because every variable declared using the let or const variable cannot be accessed outside of a block,

But using a var variable will produce a result evidenced by the illustration above because a var variable is function scoped and not block scoped, that is one key difference between var, let and const.

Var is function scoped while let and const are block scoped.

examples of blocks are if blocks, for loop block e.t.c

In conclusion, the scope of a variable is the region of our code in which a certain variable is accessible, the firstName variable is accessible everywhere in our code (GLOBAL SCOPE), the lastName and job variables are only available inside the fullName function scope (FUNCTION SCOPE), while the age variable is only accessible inside the if block (BLOCK SCOPE).

Leave your questions and comments below in the comments section and follow me for more tech related contents

#Candie