This article is going to be about scopes
concept in JavaScript. Without knowing about scopes correctly, our code may work unexpectedly. So, to clear things up and to strengthen our concepts we'll be discussing these two here. I'll try my best to explain it in a beginner-friendly language. ๐
Scopes
Let's look at the highlighted portion. It says,
the extent of the area or subject matter that something deals with or to which it is relevant.
So basically scope
in JavaScript should be something like the area where something deals. Now, who deals is the first question that should pop up in our head after reading the description I gave. ๐ค
Who?!! the answer is the variables in JavaScript.
So, in easy words
The Scope is the area in code from where a variable can be accessed.
Types of Scopes in JavaScript
In JavaScript, there are two types of scope.
- Global Scope
- Local Scope
A local scope can be further divided into two types,
- Local Scope
- Function Scope
- Block Scope
The above image shows the different types of scopes. The rectangles show the area where the variables are accessible. Now, let's discuss the scopes one by one.
Global Scope ๐
In Global Scope, the variables can be accessed from anywhere in the program. A variable declared outside all the programs or curly braces is referred to as a Global Scope variable. A variable declared in the global scope can be accessed from any function or nested function in the program.
As we can see from the example, the globally declared number
is first called from the global scope, then from a function and after that, it is called from a block scope. I hope this clears the concept of global scope.
Before ES6, the var
keyword was used to declare a variable in JavaScript. And var
declares all the variables in the global scope, even if the variable is declared inside a function or in block level. This means, any variable declared using thevar
keyword or without a keyword is accessible from anywhere in a program. But this causes a problem if the program has the same variable at multiple places. So, usually, it is a good practice not to declare a variable in the global scope. This was another reason behind introducing let
and const
in ES6.
Another problem with var
is that if a variable is already defined with var
and if we declare another variable with the same name using var
, it'll overwrite the old variable and assign the new value to it whereas let
and const
will give an error. This can be a huge headache while debugging code.
var number = 5;
var number = 10;
console.log(number); //10
let number = 5;
const number = 10; //SyntaxError: Identifier 'number' has already been declared
Local Scope ๐ข
Variables that can be accessed from only a specific part of the code are local variables. If you check the above diagram again, all the variables declared inside the function sum
are local variable, including the variable inside the loop. In other words, all variables other than global variables are local variables in JavaScript. Local variables cannot be called from outside of their function or block.
var number = 5;
function sum() {
const arr = [1, 2, 3];
let sum = 0;
}
console.log(arr); //arr is not defined
Because a local variable can be declared either in a function or in a block(like a for
loop) or inside an if-else
/ while
loops, JavaScript has two types of local scope, function scope, block scope.
Function Scope ๐
A variable declared inside a function resides in the function scope. The variable can be accessed from functions or blocks inside the function(i.e., nested functions) but not from the outside. In the above code sample, the arr
variable is declared inside a function, and when we are trying to call it from outside of the function, we are getting the error arr is not defined
. Though the variable can be accessed from a nested function.
Block Scope ๐ค
Variables declared inside blocks like for
loops or inside curly braces { }
with let
or const
are block-scoped variables.
if(number % 2 === 0) {
let even = number;
console.log("Even", even);
} else {
let odd = number;
console.log("Odd", odd);
}
console.log("Even", even); //even is not defined
console.log("Odd", odd); //odd is not defined
I couldn't come up with a better example, so just used this code. ๐
The variables even
and odd
are declared inside { }
braces, they are in block scope. In the first diagram, the variable i
declared inside the for
loop is also a block-scoped.
function sum() {
const arr = [1, 2, 3];
let sum = 0; //sum and arr are function scope
for(let i = 0; i < arr.length; i++) { //i is block scope
sum = sum + arr[i];
}
}
I hope this article somehow helped you understand the concept of scope in JavaScript. If you liked the article, please give a ๐ and comment your thoughts below. ๐ฅ