Let vs const in JavaScript

In this article, we are going to check the difference between let and const in javascript. We also check when we should use one over the other. One thing before we start, var is going to be left out from this article and the reason is that let and const were designed to replace var and its flaws.

So in all our future projects, we should be using let’s or const. There is almost no reason to use var anymore.

What is the difference between let and const?

Well, let’s begin with “const” and after that, we will cover “let”.

When use constant in JavaScript?

So const allows us to assign a value to an identifier. Okay so for example we can say const myConst is equal to 10. Whenever we print “myConst”, it will show 10. That is basically what a constant is.

When declaring a constant, we have to use the term “const” before an identifier and we also have to assign a value to that identifier. We can’t initialize a constant without assigning a value to it. It will throw an error like-

Missing initializer in const declaration 

But the most important thing about a constant is that we can’t reassign the value once we have already assigned it. So for example, if we want to say “myConst” is now equal to 25, this code will be going to give us an error that we cannot reassign that value.

const myConst = 10;
myConst = 25;
console.log(myConst);

Uncaught TypeError: Assignment to constant variable. 

When use let in JavaScript?

So this now brings us to what let is. The let works in the same way as const but with “let” we can actually reassign that value. For example, say let myLet equal to 10 and then reassign myLet with 25 and print it. This will give us 25 as expected.

let myLet = 10;
myLet = 25;
console.log(myLet);

25

So that is the key difference between let and const. Let allows us to reassign a value but const does not allow us to reassign values.

When should I use const and when should I use let?

Now knowing this difference, you may ask when should I use const and when should I use let? Well, the const is used much more than let. The reason is simply that in javascript we’re not going to find ourselves having to reassign a value once we have already assigned it.

For example, getting a return value from a function is typically done once and then we continue to reuse that value.

const score = getScore();
//do something with score
console.log(score);

The same goes for getting a reference to an HTML element. For example, using “document.getElementByid” typically when using these we don’t need to reassign that value once we have already got it.

const title = document.getElementById("title");

//do something with the title
title.classList.add("text-bold");
title.textContent = "Let vs const in JavaScript";

So that is why using const is a much more common scenario compared to using let but of course, let has its own use cases.

Whereas we use let’s in situations where we are doing calculations or we are writing code around an algorithm. So in those situations, we’re going to temporarily store variables or you know why you are looping through an array you might want to store a reference to an element whatever It might be in those cases let’s is definitely the way to go.

function maxNumber( number ){
	let highest_no = 0;
	
	for(const n of number){
		
		if( n > highest_no ){
			
			highest_no = n;
		}
	
	}
	
	return highest_no;
}

When we should not use ‘let’?

One very important thing to mention here is that we should not be using ‘let’ when we intend to modify an object or array. So here is a quick example to understand this properly.

let user = {};

user.name = "John";
user.age = "25";

In the above example, we can see we have declared an object i.e. ‘user’, and initialized it with a new empty object. We are doing this using the let keyword and then we are assigning a value to a key inside the object.

So we might see the code is perfectly fine. We know we’re simply changing the value of something inside the object. So we need to use the let keyword.

But that is not the case. It’s actually better practice to use const here and the reason why is because we are not actually reassigning the value of the user object. We are simply changing what’s inside the object. So, in this case, we should use const.

const myArray = ["Red", "Green", "Blue"];

myArray.push("Yellow");
myArray.pop();

It also applies to adding or removing items from an array. As we can see here, we’re using cons to declare the array and we are easily pushing and removing elements from that array. That’s going to work perfectly fine.

How let and const work in block scope?

So the very last thing to mention here about let and const is that they are block scope. So what this means?

What is block scope?

The block scope means anything inside the curly braces {….}. So blocks include things like functions or if statements, switch statements, etc.

if (condition) {
	
	const x = 10;
}

console.log(x); //give ERROR

If we declare a constant or we use let inside a block, we cannot access that information outside that block and it’s something important to know because we know the var keyword back in the day was function scoped. So we could access that outside those blocks.

Conclusion:

• let and const were designed to replace var.
• In const, we can’t reassign the value.
• We can’t initialize a constant without assign a value to it.
• In ‘let’ we can reassign the value.
• Use const instead of let to assign an object or an array.
• We can’t access let and const outside a block scope.