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 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.
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
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
Thank you for reading!