This content originally appeared on Level Up Coding - Medium and was authored by Dylan Oh
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 within your current accessibility, and it can also be referred to as 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 a 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 a hierarchy, where children layer can access the variables of a parent, but not the other way round.
In our last article (JavaScript, Single Threaded but Non-Blocking), we mentioned that the JavaScript engine has a call stack of function execution contexts. A global variable environment is also introduced when a 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 variable a, since it is used in func2. After it has failed to find it within the func2 scope, it will go up to func1 and find it (a = 20). Therefore, the result of the 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 a 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; 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 func2 was defined within the global scope (which is the same level as func1), therefore it will look up to the global scope for the missing variable.
Hope this gives you a brief idea of 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.
Do follow me if you would like to see more web development or software engineering-related content. Cheers!
How does JavaScript Scoping work? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Dylan Oh
Dylan Oh | Sciencx (2022-06-20T11:49:55+00:00) How does JavaScript Scoping work?. Retrieved from https://www.scien.cx/2022/06/20/how-does-javascript-scoping-work/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.