Scope is the concept that manages the accessibility of the variables. At a very high level, the accessibility of the variable is limited to the block where they are defined. Outside the block, the variable is inaccessible.
In this post, I am going to explain different ways of declaring variables in Javascript and their impact on scope.
Note - I am sharing all my JavaScript Certification study notes below. Please provide your feedback if you see anything wrong or missing. Appreciate your help.
Let's jump into some examples -
Example 1:
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}
var result = myFunction(true);
console.log(result);
Result: Hello World
Explanation: The variable x is declared with var. This makes the variable accessible within the function. The variable is even accessible outside the code block where it is defined.
Example 2:
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}
var result = myFunction(false);
console.log(result);
Result: undefined
Explanation: Exactly the same as the above code, the only difference is this time the code block within which x is declared is not getting executed. So we are getting an undefined exception.
Example 3:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside'
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x)
}
myFunction(true);
Result:
Hello World from Inside
Hello World from Inside
Explanation: Here the outside x declaration is overwritten by the inside x declaration. Calling the function with false will retain the outside x declaration and in that case, it will print "Hello World from Outside".
Example 4:
var myFunction = function(shouldCheck){
if(shouldCheck){
let x = 'Hello World';
}
console.log(x);
}
myFunction(true);
Result: x is not defined
Explanation: This time x is defined with let instead of var. Declaring a variable with let will provide block scope i.e. the variable is accessible within the block in which this is defined. This is the biggest difference between declaring a variable with Var vs. Let. Now in our example, since x is not accessible within the if block, that is why console.log is throwing the error that x is not defined.
Example 5:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside';
if(shouldCheck){
let x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}
myFunction(true);
Result:
Hello World from Inside
Hello World from Outside
Explanation: This time even though we have two declarations of the same variable x (one with var and one with let), the inside declaration of x is treated as a separate variable and not overwriting the x declared outside with Var.
Example 6:
var myFunction = function(shouldCheck){
let x = 'Hello World from Outside';
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}
myFunction(true);
Result:
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with let will make x accessible within the myFunction scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.
Example 7:
var myFunction = function(shouldCheck){
const x = 10;
if(shouldCheck){
var x = 100;
console.log(x);
}
console.log(x);
}
myFunction(true);
Result:
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.
Example 8:
var myFunction = function(shouldCheck){
const x = 10;
if(shouldCheck){
let x = 100;
console.log(x);
}
console.log(x);
}
myFunction(true);
Result:
100
10
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Declaring x inside the loop with let creates another Block scope, which is absolutely fine even though the name of the variables are the same.
In summary, declaring a variable with Const and Let will create Block Scope whereas declaring a variable with Var will not create Block Scope.
Hope the above examples will help you to understand the basics of variable declaration in Javascript and. the scope impact. Thank you and happy JavaScript learning.
2 Comments
Thanks Sudipto da, it's really helpful and cleared manny of my doubts.
ReplyDeleteThank you and best of luck in learning JavaScript.
Delete