JavaScript Variable Declarations: Comparing `var`, `let`, and `const`

2.4. Comparing var, let, and const

As we delve deeper into JavaScript, understanding the nuances between var, let, and const becomes crucial. These keywords are used to declare variables, but they differ significantly in terms of scoping, hoisting, and re-assignment capabilities. In this section, we will explore these differences and provide guidance on when to use each keyword.

Understanding Variable Declaration Keywords

JavaScript provides three keywords for declaring variables: var, let, and const. Each has its own characteristics and use cases. Let’s break down each keyword and understand their unique properties.

var

The var keyword is the oldest way to declare variables in JavaScript. It has been around since the language’s inception and is known for its function-scoped nature.

• Scope: Variables declared with var are function-scoped, meaning they are accessible within the function they are declared in. If declared outside any function, they become globally scoped.
• Hoisting: var declarations are hoisted to the top of their containing function or global context. This means the variable can be used before it is declared, but its value will be undefined until the line where it is initialized is executed.
• Re-assignment: Variables declared with var can be re-assigned and re-declared within the same scope.

Example of var:

function exampleVar() {
    console.log(x); // undefined due to hoisting
    var x = 10;
    console.log(x); // 10
}

exampleVar();

let

Introduced in ECMAScript 6 (ES6), the let keyword provides block-level scoping, which is more predictable and intuitive compared to var.

• Scope: let is block-scoped, meaning it is only accessible within the block (denoted by {}) it is declared in.
• Hoisting: Like var, let is hoisted, but it is not initialized. This results in a “Temporal Dead Zone” (TDZ) from the start of the block until the declaration is encountered.
• Re-assignment: Variables declared with let can be re-assigned but not re-declared within the same block.

Example of let:

function exampleLet() {
    if (true) {
        let y = 20;
        console.log(y); // 20
    }
    // console.log(y); // ReferenceError: y is not defined
}

exampleLet();

const

Also introduced in ES6, const is used to declare variables that are meant to be constant, meaning their values should not change after they are initialized.

• Scope: Like let, const is block-scoped.
• Hoisting: const is hoisted but not initialized, similar to let, and also experiences the TDZ.
• Re-assignment: Variables declared with const cannot be re-assigned or re-declared. However, if the variable is an object or array, its properties or elements can be modified.

Example of const:

function exampleConst() {
    const z = 30;
    console.log(z); // 30
    // z = 40; // TypeError: Assignment to constant variable.
}

exampleConst();

Comparison Table

To summarize the differences between var, let, and const, let’s look at a comparison table:

Scoping Rules

Understanding scoping rules is essential for writing efficient and bug-free code. Let’s explore how each keyword behaves in terms of scope.

Function Scope vs. Block Scope

• Function Scope: Variables declared with var are confined to the function in which they are declared. If declared outside any function, they become global.
• Block Scope: Variables declared with let and const are confined to the block in which they are declared. This includes any {} pair, such as those used in loops, conditionals, and functions.

Example of Scoping:

function scopeExample() {
    if (true) {
        var a = 1;
        let b = 2;
        const c = 3;
    }
    console.log(a); // 1
    // console.log(b); // ReferenceError: b is not defined
    // console.log(c); // ReferenceError: c is not defined
}

scopeExample();

Hoisting Behavior

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compile phase. However, only the declarations are hoisted, not the initializations.

• var: Both declaration and initialization are hoisted, but initialization is set to undefined.
• let and const: Only declarations are hoisted, leading to the TDZ until the line of initialization.

Example of Hoisting:

function hoistingExample() {
    console.log(d); // undefined
    var d = 4;
    // console.log(e); // ReferenceError: Cannot access 'e' before initialization
    let e = 5;
    // console.log(f); // ReferenceError: Cannot access 'f' before initialization
    const f = 6;
}

hoistingExample();

Re-assignment Capabilities

Re-assignment refers to the ability to change the value of a variable after its initial declaration.

• var and let: Allow re-assignment.
• const: Does not allow re-assignment. However, for objects and arrays, their contents can be modified.

Example of Re-assignment:

let g = 7;
g = 8; // Allowed

const h = 9;
// h = 10; // TypeError: Assignment to constant variable.

const obj = { key: 'value' };
obj.key = 'new value'; // Allowed

Guidelines for Choosing the Right Keyword

Choosing the appropriate keyword for variable declaration is crucial for writing clean and maintainable code. Here are some guidelines:

• Use let when you expect the variable’s value to change over time, and you want to limit its scope to the block in which it is declared.
• Use const when you want to declare a variable that should not be re-assigned. This is ideal for constants, configuration settings, or any value that should remain unchanged.
• Avoid var in modern JavaScript development unless you are maintaining legacy code. The block-scoping of let and const provides better control and predictability.

Practical Examples

Let’s look at some practical examples to see how these keywords are used in real-world scenarios.

Example 1: Loop with let

Using let in a loop ensures that each iteration has its own scope, preventing unexpected behavior.

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000); // 0, 1, 2
}

Example 2: Constants with const

Use const for values that should not change, such as configuration settings.

const API_URL = 'https://api.example.com/data';
fetch(API_URL)
    .then(response => response.json())
    .then(data => console.log(data));

Example 3: Legacy Code with var

In older codebases, you might encounter var. It’s important to understand its behavior to maintain such code.

function legacyFunction() {
    var x = 10;
    if (true) {
        var x = 20; // Re-declares and overwrites the previous x
        console.log(x); // 20
    }
    console.log(x); // 20
}

legacyFunction();

Try It Yourself

To solidify your understanding, try modifying the examples above. For instance, change the let in the loop example to var and observe the difference in behavior. Experiment with re-assigning const variables and see the errors that occur.

Visualizing Scoping and Hoisting

To better understand how scoping and hoisting work, let’s visualize these concepts using diagrams.

Visualizing Scoping

    graph TD;
	    A[Global Scope] --> B[Function Scope];
	    B --> C[Block Scope];
	    B --> D[Block Scope];

Diagram Caption: This diagram illustrates the hierarchy of scopes in JavaScript. Variables declared with var are accessible in the function scope, while let and const are confined to block scopes.

Visualizing Hoisting

    sequenceDiagram
	    participant JS as JavaScript Engine
	    participant Code as Your Code
	    Code->>JS: Declare var a
	    JS->>Code: Hoist var a to top
	    Code->>JS: Initialize a = undefined
	    Code->>JS: Declare let b
	    JS->>Code: Hoist let b to top (TDZ)
	    Code->>JS: Declare const c
	    JS->>Code: Hoist const c to top (TDZ)

Diagram Caption: This sequence diagram shows how the JavaScript engine hoists variable declarations. var is initialized to undefined, while let and const remain in the TDZ until initialized.

References and Links

For more information on JavaScript variable declarations, consider the following resources:

• MDN Web Docs: var
• MDN Web Docs: let
• MDN Web Docs: const
• W3Schools JavaScript Variables

Knowledge Check

Before moving on, let’s reinforce what we’ve learned with a few questions and exercises.

1. What is the main difference between var and let in terms of scope?
2. How does hoisting affect const declarations?
3. Why is it recommended to use const for variables that should not change?
4. Modify the loop example to use var and observe the output.
5. Experiment with re-assigning a const object property.

Embrace the Journey

Remember, mastering JavaScript is a journey. As you continue to learn, you’ll become more comfortable with these concepts and how they apply to real-world programming. Keep experimenting, stay curious, and enjoy the process!

Quiz Time!