JavaScript Scoping

According to MDN's definition, "scope" in JavaScript is the current context of execution. What does that actually mean? Scope defines the variables and values that are within your current accessibility, and it can also be referred to the environment of variables. Let's jump right into an example:

function hello(){
    var phrase = "Hello";
    console.log(phrase + " Dylan");
}

console.log(phrase);

We have a function called hello(), and we define a variable called "phrase" WITHIN the function. If we are trying to access the variable "phrase" from the outside of function, we are going to get this error:

Uncaught ReferenceError: phrase is not defined

This is easy to understand right? From the global scope perspective, we do not know what is a "phrase".

However, if we define a global variable, and try to use it inside the function:

var person = "Dylan"

function hello(){
    var phrase = "Hello";
    console.log(phrase + " "+ person);
}

hello()

We will get:

Hello Dylan

From here we know that, scopes follow hierarchy, where children layer can access the variables of parent, but not the other way round.

In our last article (JavaScript, Single Threaded but Non-Blocking), we mentioned that JavaScript engine has call stack of function execution contexts. A global variable environment is also introduced when global execution context is created. If we define a global variable now, this variable will be added under the global object (window object for browser).

Each execution context will have a local variable environment, which is known as local scope. If we try to access a variable in our current execution context, it will start looking for this variable within the local scope. If the variable is not found, it will go up to the parent scope to look for it. This is known as the scope chain. For example:

function func1(){
    var a = 20;
    return function func2(){
        console.log(a);
    }
}

var a = 10;

func1()();

In this example, the code is trying to look for the variable a, since it is used in func2. After it has failed to find it within func2 scope, it will go up to func1 and found it (a = 20). Therefore, the results of console log is 20.

Scope chain of execution contexts

What if we change our code to this:

function func1(){
    var a = 20;
    return func2()
}

function func2(){
    console.log(a);
};

var a = 10;

func1()

It is printing out 10 this time. Why is it so? We have to bring in another term called lexical scope, which is the scope that we determine where the function is defined, not called. In the first example, the func2 was defined within func1 and therefore, it will reach out to func1 to look for the variable that is not within its current scope. However in the second example, the func 2 was defined within the global scope (which is same level as func1), therefore it will look up to global scope for the missing variable.

Hope this gives you a brief idea on how the JavaScript scoping works. In our future articles, I shall also bring in concepts like hoisting, closure, block scope and etc to give you a clearer picture (should have done in this article but was too busy, pardon me).

Do follow me for more future articles on web design, programming and self-improvement 😊

Follow me on Medium