Modern Javascript - Var, Let & Const - Are all same? Part 2

In our previous blog, we have discussed what is scope, Hoisting, and var keyword in Javascript.

Let's go further and discuss let and const keywords.

Problem with var

let's discuss the below example to understand the problem with var

{

function anyFn(){
  var message = 20;
}

var message = "hello";
anyFn();
console.log(message);  //20 Wait!! What?? 

}

'message' is defined globally in the above code block, which means it has global scope. The 'anyFn' function will redeclare the variable and reassign it with a new value. This is not a major issue when a developer is doing it knowingly, but what if the developer doesn't realize it which may cause bugs in the code.

In Javascript, it is good to not declare variables as global variables. Because of the global scope, it is possible that global variables can be changed from anywhere in the program. Think about the large complex programs where multiple teams are working on a common module. To prevent this, one needs to ensure that the scope of the variables is limited to the code block within whey they need to be accessed.

This is where let and const come into play.

let

The scope of the variables defined with the let keyword is limited to the code block within which they are defined. They are block-scoped.

{
function anyFn(){
  let message = 20;
}

let message = "hello";
anyFn();
console.log(message);  //"hello"

}

Why? Because let message = 20; and let message = "hello"; are two separate variables because there scope is different.

• Like var, variables declares with let keyword can be reassigned within the scope.

  let a = 10;
  a = 20;
  

• Unlike var, variables declares with let keyword cannot be redeclared within the scope.

  let a = 10;
  let a = 20; // Error: a has already been declared
  

• Just like var, let variables are hoisted at the top. let variables won't be initialized like var variables with the undefined value. So if we try to use let variables without initialization we will get an error.

const

const variables are also code blocked variables and they maintain a constant value.

• const variables cannot be redeclared and reassigned. They should be initialized at the time of declaration.
• Like var and let, const variables are also hoisted at the top but won't be initialized.

Important fact about const

const values cannot be re-assigned but they are not immutable. Please check below code block

{
const a = "test"; //string
const b = 0;  //number
const c = [4,5]; //array
const d = {name: 'raj'}; //object

For the following code, we will get this error: 
//Error: This is an attempt to reassign variable a to different value.
a = "test2"; 
b = b++;     
c = [4,5,5]; 
d = {name: 'raj'}; 
d.address = "xyz";

Below code will not throw and mutate the variable
c.push(5); // This will push 5 into the array. [4,5,5]
d.name = "Simran"; //this will update the name inside d object.

}

Summary

---