`let`, `const`, and `var`: Understanding Variable Declarations in Modern JS

Published on: June 29, 2024 by Dr. Talib

In modern JavaScript (ES6 and beyond), we have three keywords to declare variables: let, const, and the original var. While they might seem to do the same thing, they have critical differences in scope and re-assignability that can dramatically affect your code's behavior. This guide will clarify when and why you should use each one.

`var`: The Old Way (Function-Scoped)

The Behavior: Before 2015, var was the only way to declare variables. Variables declared with var are "function-scoped." This means they are only confined to the function they are created in, not to blocks of code like if statements or for loops. This can lead to unexpected behavior.

The Problem with `var`:

function checkVar() {
  if (true) {
    var myMessage = "Hello from inside the if block!";
  }
  // Because 'var' is function-scoped, we can still access it here!
  console.log(myMessage); // Outputs: "Hello from inside the if block!"
}
checkVar();

This "leaking" of the variable outside of its block can make code harder to reason about and can lead to bugs where variables are accidentally overwritten.

Modern Rule: In modern JavaScript, there is almost no reason to use var anymore. You should always prefer let or const.

`let`: The Modern `var` (Block-Scoped)

The Behavior: Introduced in ES6, let is the modern replacement for var. The key difference is that let is "block-scoped." A variable declared with let only exists within the block of code (the curly braces { }) where it is defined.

How `let` Fixes the Scoping Problem:

function checkLet() {
  if (true) {
    let myMessage = "Hello from inside the if block!";
    console.log(myMessage); // This works fine.
  }
  // This will cause an error, because myMessage does not exist here.
  // console.log(myMessage); // Uncaught ReferenceError: myMessage is not defined
}
checkLet();

This is much safer and more predictable. Variables declared in a loop or an `if` statement can't accidentally affect code outside of that block.

When to use `let`: Use let when you know you will need to re-assign the variable to a new value later in your code. A classic example is a counter in a loop.

`const`: The Immutable Variable (Block-Scoped)

The Behavior: The const keyword also creates a block-scoped variable, just like let. However, the crucial difference is that a variable declared with const **cannot be re-assigned** a new value after it has been initialized.

Example of `const` in action:

const siteName = "HTML Viewer";

// This will cause an error, because you cannot re-assign a constant.
// siteName = "CSS Viewer"; // Uncaught TypeError: Assignment to constant variable.

// IMPORTANT: This applies to the variable assignment itself.
// If the variable is an object or array, you can still change its contents.
const user = { name: "Dr. Talib" };
user.name = "John Doe"; // This is perfectly fine!
console.log(user.name); // Outputs: "John Doe"

The Modern Best Practice: A Simple Rule

The modern convention is simple and leads to safer, more readable code:

Always use const by default. Only use let if you know you need to re-assign the variable. Avoid using var completely.

This approach prevents accidental re-assignments and makes it clear from the declaration which variables are intended to be constant references and which are meant to change, improving the overall quality and predictability of your code.

let, const, and var: Understanding Variable Declarations in Modern JS

var: The Old Way (Function-Scoped)