February 16, 2024

Exploring the Difference Between let and var in JavaScript

By Krishnaa JavaScript Questions 0 Comments

In JavaScript, let and var are both used for variable declaration, but they behave differently in terms of scope, hoisting, and block-level declarations. Understanding the difference between let and var is essential for writing clean and predictable code. In this guide, we’ll explore these differences in detail with examples.

Scope

var Scope: Variables declared with var are function-scoped. This means they are accessible within the function in which they are declared, regardless of block scope.
let Scope: Variables declared with let are block-scoped. This means they are only accessible within the block (enclosed by curly braces) in which they are declared.

Scope Difference:

function exampleScope() {
    if (true) {
        var varVariable = 'I am var';
        let letVariable = 'I am let';
    }
    console.log(varVariable); // Output: I am var
    console.log(letVariable); // Error: letVariable is not defined
}
exampleScope();

Hoisting

var Hoisting: Variables declared with var are hoisted to the top of their enclosing function or global scope. However, only the declaration is hoisted, not the initialization.
let Hoisting: Variables declared with let are also hoisted, but they are not initialized until their declaration statement is reached in the code.

Hoisting Difference:

function exampleHoisting() {
    console.log(varVariable); // Output: undefined
    console.log(letVariable); // Error: Cannot access 'letVariable' before initialization
    var varVariable = 'I am var';
    let letVariable = 'I am let';
}
exampleHoisting();

Block-Level Declarations

var Block Scope: Variables declared with var do not have block scope. This means they can be accessed outside of any block they are declared in.
let Block Scope: Variables declared with let have block scope. This means they are confined to the block in which they are declared and cannot be accessed outside of it.

Block Scope Difference:

function exampleBlockScope() {
    if (true) {
        var varVariable = 'I am var';
        let letVariable = 'I am let';
    }
    console.log(varVariable); // Output: I am var
    console.log(letVariable); // Error: letVariable is not defined
}
exampleBlockScope();

Conclusion

Understanding the difference between let and var is crucial for writing robust and maintainable JavaScript code. While var has function scope and is hoisted, let has block scope and is not hoisted. By choosing the appropriate keyword for variable declaration based on the desired scope and behavior, developers can write cleaner and more predictable code.

Scope

Hoisting

Block-Level Declarations

Conclusion

You May Also Like: