What's the difference between using let and var in JavaScript?

When should you use let over var? And why? Let’s find out!

In modern JavaScript, there are three ways to declare a variable and assign it a value: const, let, and var.

When it comes to working with variables in JavaScript, my default choice is always const. It guarantees that the value cannot be reassigned, making it a safer option.

However, when there is a need to redeclare a variable later on, I always use let.

I haven’t used var in years, as it seems to exist primarily for backward compatibility purposes. Seeing it being used raises an eyebrow for me.

One of the main reasons to prefer let over var is because of its sensible scoping. let follows block scoping, which is used in most popular programming languages. Variables declared using let are scoped to the nearest block. On the other hand, var has function scoping, which means that variables declared using var are scoped to the nearest function. This can have practical implications, especially when variables are declared inside an if statement or used as a for loop iterator. Using let ensures that the variable is local to those specific blocks, avoiding potential bugs, while var allows the variable to be available outside of the block.

It is always recommended to use the tool that provides the least amount of power to maintain maximum control. As the saying goes, “With great power comes great responsibility”.

Another reason to prefer let is the concept of hoisting. Like const, let variables are not hoisted, meaning they are not accessible before they are declared and initialized. On the other hand, var variables are hoisted to the top of the function and can be accessed even before they are declared. This behavior of var can be quite confusing.

The third reason is that when you declare a let variable with the same name as an existing variable, you will get an error in strict mode.

Finally, one more notable difference is that if you declare a var variable outside of any function, it becomes attached to the global object (e.g., window in the browser). On the other hand, let variables are available but not attached to the global object, making them unreachable from outside of your file.