# Difference between let var and const

---

  
Understanding the nuances between `var`, `let`, and `const` in JavaScript is crucial for writing efficient, maintainable code. These keywords dictate how variables behave in terms of scope, reassignment, and hoisting, making them fundamental concepts in modern JavaScript development.

### **ES5 (**`var`) vs. ES6 (`let` and `const`)

JavaScript underwent a significant evolution with the release of ECMAScript 6 (ES6), introducing `let` and `const` while preserving the use of `var`. Each has its own characteristics, leading to different behaviors within JavaScript code.

### **Scope Differences:**

#### `var`:

* **Function Scope:** Variables declared with `var` are function-scoped or globally scoped but not block-scoped.
    
    ```javascript
    function exampleVarScope() {
        if (true) {
            var varScoped = "I am var";
        }
        console.log(varScoped); // Prints: "I am var"
    }
    exampleVarScope();
    console.log(varScoped); // Prints: "I am var"
    ```
    
* **Hoisting:** `var` declarations are hoisted to the top of their scope. This means that even if a `var` variable is declared later in the code, JavaScript effectively moves that declaration to the top.
    
    ```javascript
    console.log(varHoisted); // Prints: undefined
    var varHoisted = "I am hoisted";
    console.log(varHoisted); // Prints: "I am hoisted"
    ```
    

#### `let` and `const`:

* **Block Scope:** Both `let` and `const` are block-scoped, which means they are confined to the nearest curly braces `{}`, such as those in loops or conditional statements.
    
    ```javascript
    function exampleLetConstScope() {
        if (true) {
            let letScoped = "I am let";
            const constScoped = "I am const";
            console.log(letScoped); // Prints: "I am let"
            console.log(constScoped); // Prints: "I am const"
        }
        // console.log(letScoped); // Throws ReferenceError: letScoped is not defined
        // console.log(constScoped); // Throws ReferenceError: constScoped is not defined
    }
    exampleLetConstScope();
    ```
    
* **No Hoisting:** Unlike `var`, `let` and `const` aren’t hoisted. This prevents accessing variables before their declaration within the code.
    
    ```javascript
    // console.log(letHoisted); // Throws ReferenceError: Cannot access 'letHoisted' before initialization
    let letHoisted = "I am hoisted";
    console.log(letHoisted); // Prints: "I am hoisted"
    ```
    
    ```javascript
    // console.log(constHoisted); // Throws ReferenceError: Cannot access 'constHoisted' before initialization
    const constHoisted = "I am hoisted";
    console.log(constHoisted); // Prints: "I am hoisted"
    ```
    

### **Variable Mutability:**

#### `var`:

* **Mutable:** Variables declared with `var` can be redeclared and reassigned without throwing errors.
    
    ```javascript
    var varExample = "Initial value";
    varExample = "Changed value";
    console.log(varExample); // Prints: "Changed value"
    var varExample = "Redeclared value";
    console.log(varExample); // Prints: "Redeclared value"
    ```
    

#### `let` and `const`:

* `let`: Mutable, allows reassignment but not redeclaration within the same scope.
    
    ```javascript
    let letExample = "Initial value";
    letExample = "Changed value";
    console.log(letExample); // Prints: "Changed value"
    // let letExample = "Redeclared value"; // Throws SyntaxError: Identifier 'letExample' has already been declared
    ```
    
* `const`: Immutable in the sense that it cannot be reassigned after declaration. However, for objects and arrays declared with `const`, their internal properties can be modified.
    
    ```javascript
    const constExample = "Initial value";
    // constExample = "Changed value"; // Throws TypeError: Assignment to constant variable.
    const objExample = { prop: "Value" };
    objExample.prop = "Modified value";
    console.log(objExample.prop); // Prints: "Modified value"
    ```
    

### **Global Object Attachment:**

#### `var`:

* **Attached to Global Object:** Variables declared with `var` directly add properties to the global object (`window` in browsers, `global` in Node.js).
    
    ```javascript
    var globalVar = "I am global";
    console.log(window.globalVar); // Prints: "I am global" in browsers
    ```
    

#### `let` and `const`:

* **Not Attached to Global Object:** Unlike `var`, `let` and `const` declarations do not add properties to the global object.
    
    ```javascript
    let localVar = "I am local";
    const constVar = "I am const";
    console.log(window.localVar); // Prints: undefined
    console.log(window.constVar); // Prints: undefined
    ```
    

### **Practical Recommendations:**

1. **Use** `const` **by Default:** Unless you know the variable needs reassignment, start by declaring variables with `const`. This emphasizes immutability and prevents accidental reassignment.
    
2. **Fallback to** `let`**:** If the variable’s value needs to change, use `let`. This signifies that reassignment is intentional within the code.
    
3. **Minimize** `var`**:** Due to its hoisting behavior and lack of block scope, limit the use of `var` in favor of `let` and `const` for better code predictability and maintainability.
    

Understanding these differences helps developers write cleaner, more predictable code in JavaScript. Embracing the block scoping, immutability, and hoisting behavior of `let` and `const` leads to more reliable code structures in modern JavaScript development.

Always consider the context and purpose of your variables to choose the most suitable declaration for each scenario.

> Written By: Jameel Ahmad