Declaring JavaScript variables using var, let and const

In JavaScript, var, let and const are used to declare variables, but they have some key differences in terms of scope, hoisting and mutability.

But first let’s look what scope, hoisting, and mutability mean.

scope

is the context in which variables and functions are declared and can be accessed. It determines the visibility and accessibility of variables and functions in different parts of your code.

hoisting

is a behavior that occurs during the compilation or interpretation phase of the code, where variable and function declarations are moved to the top of their containing scope.

This means that regardless of where variables and functions are declared within a function or a block, they are effectively “hoisted” to the top of that function or block, making them available for use throughout the entire scope.

To avoid bugs, always declare all variables at the beginning of every scope.

JavaScript interprets the code from top to bottom so it is always a good rule.

mutability

mutability refers to whether an object’s state can be modified after it is created.

An object is considered mutable if its values (properties or elements) can be changed, added, or removed after the object is instantiated.

On the other hand, an object is considered immutable if its state cannot be changed after creation.

And now back to var, let and const

var

• Variables declared with var are function-scoped, which means they are only accessible within the function they are defined in.

• Variables declared with var are hoisted to the top of their containing function or global scope. This means you can use a var variable before it’s declared in the code, but it will be initialized with undefined.

• var variables can be reassigned and updated.

  function varExample() {
    var number = 10;
    if (true) {
        var number = 20; // This will also affect the 'number' outside the if block.
    }
    console.log(number); // Outputs 20
  }

let

• Variables declared with let are block-scoped, meaning they are only accessible within the block (e.g., if statements, loops) they are defined in.

• Variables declared with let are hoisted, but they are not initialized. Trying to use a let variable before its declaration will result in a ReferenceError.

• let variables can be reassigned, but they are not re-declarable in the same scope.

  function letExample() {
    let number = 10;
    if (true) {
        let number = 20; // This 'number' is a separate variable from the one outside the if block.
    }
    console.log(number); // Outputs 10
  }

const

• Variables declared with const are block-scoped.

• Like let, const variables are hoisted but not initialized, and trying to use them before declaration results in a ReferenceError.

• const variables cannot be reassigned after they are declared. However, for objects and arrays declared with const, their properties or elements can be modified.

  function constExample() {
    const number = 10;
    if (true) {
        // You cannot reassign 'number' here: number = 20; // This will result in an error.
    }
    console.log(number); // Outputs 10
  }

Summary

In modern JavaScript development, it’s recommended to use const by default and only use let when you need to reassign a variable.

Avoid using var unless you have a specific reason, as it has less predictable scoping behavior and can lead to unintended issues in your code.