Understand Javascript let, var, const keywords

Hello Artisans,

Hey fellow developers, let's dive into JavaScript's let, var, and const keywords. In the realm of our developer's world, variables play an important role. To allow the variable to declare its type in JavaScript, we have these keywords.

While all three keywords serve similar purposes, they each have unique characteristics and behaviors. Understanding these differences is crucial for developers to write cleaner and more reliable code. In this blog post, we'll take a closer look at the distinctions between let, const, and var, and discuss when to use each type.

var keyword:
The variable declared with the var keyword has function scope, meaning that variables declared with var are accessible throughout the entire function in which they are declared, regardless of block scope.

Example 1:

function example() {
    var x = 10;
    if (true) {
        var y = 20;
    }
    console.log(x); // Output: 10
    console.log(y); // Output: 20
}
example();

Example 2:

function example2() {
    var x = 10;
    if (x == 10) {
        var y = 20;
    }
    var x = 30;
    console.log(x); // Output: 30
    console.log(y); // Output: 20
}
example2();

However, var doesn't care much about block scope, which can cause problems like variable hoisting and accidentally creating global variables. That's why, in many cases, var is seen as outdated now.

let keyword:
The let keyword is introduced in ES6. let provides block scope, allowing variables to be scoped to the nearest enclosing block. (e.g., if statement, for loop, function). This prevents variable hoisting and reduces the risk of unintended scope pollution.

Example 1:

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

Variables declared with let can be reassigned, making them suitable for situations where variable values may change within the same block scope.

Example 2:

function example2() {
    let x = 10;
    if (x == 10) {
        let y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }
    let y = 50;
    console.log(x); // Output: 10
    console.log(y); // Output: 50
}
example2();

const keyword:
const keyword is used for immutable variables, short for constant, declares variables that cannot be reassigned once initialized. It also has block scope, similar to let.

Example 1:

function example() {
    const x = 10;
    if (true) {
        const y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }
    console.log(x); // Output: 10
    console.log(y); // ReferenceError: y is not defined
    // const x = 20; // SyntaxError: Identifier 'x' has already 
}
example();

Variables declared with const must be initialized upon declaration, and any attempt to reassign them will result in a TypeError and attempting to redeclare a variable declared with const within the same block scope will result in a SyntaxError. However, the value of a const variable can be mutated if it is an object or array.

Example 2:

const person = { name: 'Rajeev Moon', age: 30 };
person.age = 40; // Valid
console.log(person); // Output: { name: 'Rajeev Moon', age: 40 }

Although the const variable person cannot be reassigned, its properties can be modified.

Choosing the Right Type

• Use var only when working with legacy codebases or when you specifically need function scope.

• Prefer let for variables that may need to be reassigned within a block scope.

• Use const for variables that should remain constant throughout their lifecycle. This enhances code readability and prevents accidental reassignments.

Conclusion
Understanding the differences between let, const, and var in JavaScript is crucial for writing clean, maintainable code. While var is still widely used, let and const offer more predictable scoping behavior, leading to fewer bugs and better code readability. Choose the appropriate type based on the desired scope and mutability of your variables to write efficient and robust JavaScript code.

Happy Coding and Happy Reading

❤️ 🦄