Prefer Const Over Let. Forget the Var.

Prefer Const Over Let. Forget the Var.

Variable declaration is probably the first concept you learn in any programming language. In JavaScript for many years, we only had the var keyword. This might sound straightforward but in reality, you need to understand scoping and hoisting to use it correctly.

ECMAScript 2015 (ES6) introduced let and const which behave more predictable, bringing a simpler and more reliable approach.

The Problem with Var

The key issue with var is its function-scoped nature, which often leads to unexpected behaviors. Variables declared with var are hoisted to the top of their enclosing function scope, making them accessible before their actual declaration. This can lead to confusion and potential bugs, especially in larger, more complex codebases.

A common mistake that many of us have made at some point is using a loop index within an asynchronous function.

for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  });
}

// Expectation: 1, 2, 3

// Actual: 3, 3, 3

Const and Let

Const and let offer block-scoping, which means they are only accesible to the block they are declared, whether that’s a loop, a function, or any other code block. This makes their behavior more predictable and helps prevent unintended side effects.

Let is used for variables whose values will change over time, while const is used for variables that won’t be reassigned after declaration. This distinction provides clarity in code, indicating the intention behind each variable.

As a general rule, declaring variables with const is recommended whenever possible. This practice promotes immutability and helps prevent accidental reassignments, leading to more predictable code behavior and reducing the likelihood of bugs.

This is especially true now that reactive front end frameworks are dominating the market and data reactivity is done with some kind of signals or reactive helpers.

An example of misuse of let in this context is the following

// THIS DOESNT WORK!
<script setup>
import { reactive } from "vue";

let items = reactive([]);

items = await fetchData(); // Reactivity lost after reassignment
</script>

By reassigning a reactive variable it will lose reactivity. Making a habit of using const here would prevent this.

The only real use for let is for non reactive temporary state demostrated in the following simplified example.

function evaluateCondition(condition) {
  let result;
  if (condition) {
    result = "Result A";
  } else {
    result = "Result B";
  }
  return result;
}

A ternary operator would actually make more sense in such a simplified example.

Conclusion

To sum up, forget var and use const almost always. This significantly improves the clarity and reliability of your code. It promotes immutability, and avoids unintentional reassignments and bugs. When mutation is necessary, let provides a safer, block-scoped alternative to var, further reducing the risk of unexpected behavior.