Revelations: How JavaScript Works Behind The Scenes — part 04
In the previous articles of the series, we discussed several important concepts in JavaScript. We spent time understanding JS runtime environment, Web API, Callback Queue, Job Queue, Event Loop, and many more concepts. One of the most important parts we discuss is how JavaScript converts into Machine code and all the steps involved in the process and how JavaScript runtime and JavaScript Engine works to execute the JavaScript code
In this fourth article of the series let’s take a look at Scope in JavaScript. This is a fundamental concept in JavaScript and having a proper understanding will help you to master JavaScript.
Scope in JavaScript
When working with JavaScript you might have come across some strange behaviors such as having the same variable name in several places in your code and it actually works without giving any unexpected results, and sometimes it does not. Or the same variable is accessible only in some part of the code???
The reason for all these strange behaviors can be explained using a concept called Scope. Scope in javascript is about the accessibility and visibility of variables. We can say that scope is about where do variables live, which part of the code allows access to certain variables, and which parts don’t.
With the scope, we can give some level of security to our code as there are certain rules associated with it. Scope prevents us from making unnecessary modifications to variables. It also reduces namespace collisions.
To understand this concept better let’s take a look at the below example.
This is a simple code where we have a variable called favColor and it has a string value. We can simply log it to the console (accessing the variable) and read the value as below.
Next, we have a function getFavColor which also contains a variable called favColor and we can simply print it to the console inside the function and read the value.
Now if you take a look at the below code, we get a reference error when we try to read the value of the favColor.
and we get a different output in the below code.
When learning JavaScript for the first time it can be a bit hard to understand these behaviors. Let me walk you through each scenario step by step.
Global scope
When we have variables defined outside of a code block( a function or a pair of curly braces ), we can say those variables have a global scope. In simple words, these are the variables known as global variables. Global variables can access from anywhere in the program and any part of the code can mutate the global variable values.
Let’s take a look at the below code sample to understand this behavior better.
The favColor variable has a string value of “red” in the beginning. Then we reassigned the value of the variable inside the getFavColor function.
Now if we print the value after calling the function we can see that the value of the favColor variable has changed.
When we declare a global variable we can use that anywhere in the code and we can even reassign the value whenever we want. If you take a look at the below example the same variable has different values in different sections.
This is one of the reasons to minimize the use of global variables in your code. Every part of our code has access to Global variables and in that case, those can be reassigned wherever we want. This can lead our code to unexpected behaviors.
Function scope / Local Scope
When we define variables inside a function those variables have a function scope / Local scope. These variables are not accessible from outside of the function. We can use those only inside that particular function. If we want a particular variable value to be used outside of the function, we need to return that value from the function.
As in the below code example, the username variable has function scope. We can read or change the value of username only inside the createUser function. If we try to access the username from outside we get a reference error.
Block scope
When we declare let or const variables inside a code block (if block, for loop, pair of curly braces) those variables have block scope. However, the same rule does not apply to variables defined with var. The reason for this is because const, let and block scope are introduced in ES6.
Let’s look at the below code example to understand the block scope. We have c and d variables declared inside the if block. Now when we try to access these variables from outside we get two different behaviors. We can access the d variable but cannot access c. This is because c is defined with let and it has block scope. However, variables defined with var do not have block scope
Nested Scope
As you have might know we can use functions inside another function (nested functions), loops inside another loop (nested loops), functions inside loops, and loops inside functions. This is a common pattern we use when we develop applications. However, Scoping in JavaScript effect these patterns as well. There are certain rules to access variables inside a nested code block or nested function.
Let’s take a look at the below example to understand the nested scope. Here we have the createUser function which is the outer scope and inside that, we have the greetUser function which is the inner scope.
In these types of situations, the inner scope has access to all the variables declared in the outer scope. However outer scope does not have access to the variables declared in the inner scope. We can consider this as a parent and child relationship.
The child function has access to the parent function’s scope. But the parent function cannot access the child functions’ scope.
You can read the previous articles of the series here
Revelations: How JavaScript Works Behind The Scenes 01
At Apium Innovations we build world-class software products while following the best practices in JavaScript, follow us to learn more.
Thank you for reading!
