Understanding the difference between var, let, and const in JavaScript scope

When working with JavaScript, understanding variable scope is crucial to writing clean and efficient code. JavaScript provides three ways to declare variables: var, let, and const. While they might seem similar at first, they behave differently in terms of scope, hoisting, and reassignment.

In this blog post, we’ll break down the differences between var, let, and const in terms of scope and help you choose the best option for your code.

What is Scope in JavaScript?

Scope in JavaScript determines where a variable is accessible within the code. There are two main types of scope:

1. Function Scope – Variables are accessible only inside the function they are declared in.

2. Block Scope – Variables are accessible only within the block {} where they are declared.

Now, let’s explore how var, let, and const behave in different scopes.

`var` - Function Scoped Variable

The var keyword is function-scoped, meaning it is available anywhere inside the function where it is declared. However, it ignores block scope, which can lead to unexpected behavior.

Example of var in Function Scope:

    function example() {
        var x = 10;
        if (true) {
            var x = 20; // Same variable (not block-scoped)
            console.log(x); // Output: 20
        }
        console.log(x); // Output: 20 (still accessible)
    }
    example();

`let` - Block Scoped Variable

The let keyword is block-scoped, meaning it is only accessible inside the block {} where it is defined.

Example of let in Block Scope:

    function example() {
        let x = 10;
        if (true) {
            let x = 20; // Different variable (block-scoped)
            console.log(x); // Output: 20
        }
        console.log(x); // Output: 10 (different variable than inside the block)
    }
    example();

`const` - Block Scoped and Immutable

The const keyword is also block-scoped, just like let. However, a const variable cannot be reassigned after being initialized.

Example of const:

    function example() {
        const x = 10;
        if (true) {
            const x = 20; // Different variable (block-scoped)
            console.log(x); // Output: 20
        }
        console.log(x); // Output: 10
    }
    example();

When to Use var, let, or const?

Use let when you need a variable that will change later.
Use const when you don’t want the variable to be reassigned.
Avoid using var unless you need function-scoped behavior for backward compatibility.