Ticker

6/recent/ticker-posts

Header Ads Widget

Understanding JavaScript Variable Declaration - Let vs. Var vs. Const




Hello World!! Today I am going to explain different way of declaring variables in Javascript. 
Let's understand with examples how Let vs Var vs Const works in Javascript.

Before we start, let me recap the concepts of scope we have in Javascript.
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 in inaccessible. 

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 above code, the only difference is this time the code block within which x is declared is not getting executed. So we are getting 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 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 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), 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 same. 

In summary, declaring variable with Const and Let will create Block Scope whereas declaring variable with Var will not create Block Scope.

Hope the above examples will help you to understand the basics of variable declaration in Javascript. Thank you and happy JavaScript learning.
 

Post a Comment

2 Comments

  1. Thanks Sudipto da, it's really helpful and cleared manny of my doubts.

    ReplyDelete
    Replies
    1. Thank you and best of luck in learning JavaScript.

      Delete