In programming, the scope is defined as the accessibility of the variable. Or in more technical terms, it is the reference to the context of the code. So, how can we differentiate between the scope of the variables, and on what factors does this “scope” depend? Well, we are going to cover everything related to variable scope in JavaScript.
Variable Scope in JavaScript
In JavaScript, there are 3 types of variable scope, namely:
- Global Scope
- Function Scope
- Block Scope
Although, there used to be only two types of scopes before ES6, the global scope, and the local scope. But, with ES6 local scope was broken down into function scope and block scope.
Let’s start with the global scope first.
Global Scope
The variables defined outside of any function or curly brackets are known as global variables and have global scope. Global scope means that the variables can be accessed from any part of that program, any function or conditional state can access that variable.
For example
function printName(){
// the variable can be accessed inside here
console.log("This tutorial is by "+name);
}
printName();
Output
Note: It is not a good practice to use global variables when they are not needed as every code block will have access to those variables.
Local Scope
If you were to define some variables inside curly brackets {} or inside a specific function then those variables are called local variables The local variables have a very confined scope which is called the local scope But, with the release of ES6, the local scope was further broken down into two different scopes:
- Function scope
- Block scope.
Function Scope
The function scope is the accessibility of the variables defined inside a function, these variables cannot be accessed from any other function or even outside the function in the main file.
For example
First, we created a variable inside a function and accessed it inside the function:
year = 2021;
// the "year" variable can be accessed inside this function
console.log("The year is "+ Year);
}
// the "year" variable cannot be accessed outside here
abc();
Output
You can see in the output that it is working perfectly fine as expected.
However, if we try to access this variable outside of the function then we get an error:
year = 2021;
// the "year" variable can be accessed inside this function
}
// the "year" variable cannot be accessed outside here
console.log("The year is "+ Year);
abc();
Block Scope
Block scope is also a sub-type of local scope. The block scope can be defined as the scope of the variables inside the curly brackets {}. Now, these curly brackets can be of loops, or conditional statements, or something else. You are only allowed to refer to these variables from within the curly brackets {}.
Imagine a nested situation:
A block of code enclosed with curly brackets{} containing some block variables.
let a = 10;
const b = 5;
}
This block of code is itself inside a function.
{
let a = 10;
const b = 5;
}
}
Now when we try to access the variables from inside the function but outside of that specific block.
{
let a = 10;
const b = 5;
}
console.log(a + b);
}
And to access this function we need to invoke it by:
Then we’ll be met with an error, even though they are local variables of the same function.
The keywords let and const are used to define block variables.
For Example
The following checks the marks obtained by a student and shows whether the student passed or failed.
if(marksObtained >= 45){
let status = "Passed";
console.log("Subject Remarks: " + status);
}
else{
let status = "Failed";
console.log("Subject Remarks: " + status);
}
We created a block-scoped local variable enclosed within curly brackets {} by using the keyword let. We can even replace this let with the const. The output is as:
If you are trying to refer to the local variable from outside the function you will get an error “status(variable name) is not defined”:
Note: To refer to the “status” variable, we are calling the console.log() function from outside the conditional brackets;
Importance of let and const keyword while declaring block variables
If you declare a variable inside curly brackets{} without using the let and the const keywords then the variable will be declared as a “Global variable”. This is due to the fact keywords have their scopes predefined. To learn more about variable declaring keywords. To show this, we are going to remove the let keyword from the above code snippet and run the code.
As you can clearly see, we were able to access this variable outside of the curly brackets {}, which means that the variable without the “let” and “const” keywords gets defined with a global scope.
Conclusion
Variables are “the most essential” part of a programming language. Variables have different scopes depending upon how they are declared. In JavaScript, a variable can be one of three different scopes, global, local, and block. We have learned how these variable scopes work in JavaScript by going over multiple examples, we even encountered errors when trying to access variables with different scopes.
