Another blog post about const, let and var

JavaScript has built-in keywords to declare variables. You must understand their purpose.

For that, there are plenty of fantastic articles out there. My goal here is to discuss some specific points that might be unclear.

When I use the term scope, you can see it as “as long as the variable is available”.

var is obsolete

The recent versions of the engine introduced the let and const keywords to fix the old var issues.

With var, there are two scopes only: the global and the function scope.

The use of var is quite problematic as:

  • variables can be updated and re-declared without raising any error, even in the same scope
  • variables initialize as undefined
  • variables are like globals

In other words, you carelessly declare variables with var. It inevitably leads to nasty bugs, especially in large applications.

What are let and const

With const, you declare variables you cannot update or re-declare after. You cannot re-declare let variables too, but you can update them.

Both const and let are block-scoped

It’s easy to forget that both const and let are block-scoped. It’s not just let:

{
  const gravity = "6.674×10−11 m3⋅kg−1⋅s−2";
}
console.log(gravity);// raises ReferenceError

It seems that even “gravity” cannot pass through our block ^^. You would have the same error with let:

{
  let zoom;
  zoom = 3;
}
console.log(zoom);// raises ReferenceError

const vars must be initialized and declared on the same line and cannot be updated. You don’t have to initialize let vars, but you can update them after the declaration.

When to use const or let?

There are different points of view on this controversial question. Some recommend using const in doubt. Some say it’s better to use let by default.

On the one hand, using const as a general rule prevents unwanted mutation, making the code more consistent and readable. You cannot change it accidentally.

On the other hand, const can be quite misleading as you don’t declare constants in the typical sense. If it refers to an object, then the object can change multiple times.

While I understand all the arguments in favor of const, when I think about the word “constant”, I think more about that:

const pi = 3.14;
const gravity = "6.674×10−11 m3⋅kg−1⋅s−2";

Let’s talk about loops

for (let i = 1; i <= 73; i++) {
    console.log(i); // 1, 2, ..., 73
}

In the above imperative loop, it’s impossible to use const. Do you see why?

An error happens immediately after the first iteration because i cannot update (as it’s a constant).

Still, you can use const in for-in or for-of loops:

let actresses = ["Naomi Watts", "Anne Hathaway", "Amy Adams", " Penélope Cruz", "Heather Graham", "Eva Green", "Bérénice Bejo"];
  for (const actress of actresses) {
    console.log(actress);
}

It creates a new constant on each iteration, and in this case, you would never want actress to change, like a read-only reference.

The concept of TDZ

JavaScript hoists variables by default. In other words, it puts variables to the top of the scope. That’s why it’s has been a good practice to declare variables at the top of your functions.

With var, you can have reverse lines because JavaScript changes the order when interpreting the code:

 yolo = "Yolo";
 var yolo;

With const, you’d get a syntax error, and with let, you’d get a Reference error.

Unlike with var, there’s no initialization by default, JavaScript knows there’s a variable, but it cannot use it until it’s declared. This interval is the “Time Dead Zone” (TDZ).

Wrap up

let and const make the code more readable and predictable.

I still have some doubts about const and prefer let as a general rule. Of course, if my variable is a constant, I use const.

I understand why so many developers want to use const by default, but a constant’s value is not supposed to vary IMHO.