Quick Answer

Learn proper variable declaration with let, const, and var. Understand scoping, hoisting, and best practices.

Understanding the Issue

JavaScript offers three keywords for variable declaration: var, let, and const, each with distinct characteristics. The var keyword has function scope and hoisting behavior that can lead to unexpected results. ES6 introduced let and const with block scope, providing more predictable behavior. Understanding the differences between these declaration methods, their scoping rules, hoisting behavior, and when to use each is fundamental for writing reliable JavaScript code.

The Problem

This code demonstrates the issue:

Javascript Error 
// Problem 1: var hoisting and scope confusion
console.log(x); // undefined (not error due to hoisting)
var x = 5;

for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // Prints 3, 3, 3 (not 0, 1, 2)
    }, 100);
}

// Problem 2: Accidental variable reassignment
var userName = "Alice";
var userName = "Bob"; // Accidentally redeclared - no error
console.log(userName); // "Bob"

function processUser() {
    if (true) {
        var status = "active";
    }
    console.log(status); // "active" - var has function scope
}

The Solution

Here's the corrected code:

Javascript Fixed 
// Solution 1: Use let and const for proper scoping
// const for values that won't be reassigned
const PI = 3.14159;
const user = { name: "Alice", age: 30 };

// let for values that will be reassigned
let counter = 0;
let message = "Hello";

// Block scope works correctly with let
for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // Prints 0, 1, 2 correctly
    }, 100);
}

// const prevents reassignment but allows mutation
user.age = 31; // OK - mutating object
user.email = "alice@example.com"; // OK
// user = {}; // Error - cannot reassign const

// Solution 2: Proper variable declaration patterns
// Declare variables at the top of their scope
function calculateTotal(items) {
    let total = 0;
    let taxRate = 0.1;
    const currency = "USD";
    
    for (let item of items) {
        total += item.price;
    }
    
    const tax = total * taxRate;
    const finalTotal = total + tax;
    
    return {
        subtotal: total,
        tax: tax,
        total: finalTotal,
        currency: currency
    };
}

// Block scope prevents variable leakage
function processData(data) {
    if (data && data.length > 0) {
        let processedCount = 0;
        const startTime = Date.now();
        
        for (let item of data) {
            // Process item
            processedCount++;
        }
        
        const endTime = Date.now();
        console.log(`Processed ${processedCount} items in ${endTime - startTime}ms`);
    }
    
    // processedCount is not accessible here - good!
}

// Destructuring with proper declarations
const person = { name: "John", age: 25, city: "New York" };
const { name, age } = person; // const destructuring
let { city } = person;        // let if you need to reassign

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1, 2, [3, 4, 5]

// Default values in declarations
let userName = "Guest";
const config = {
    theme: "dark",
    language: "en",
    notifications: true
};

// Function parameters with defaults
function greetUser(name = "Anonymous", greeting = "Hello") {
    const message = `${greeting}, ${name}!`;
    return message;
}

console.log(greetUser()); // "Hello, Anonymous!"
console.log(greetUser("Alice", "Hi")); // "Hi, Alice!"

Key Takeaways

Use const by default, let when reassignment is needed, avoid var. Const and let provide block scope and prevent hoisting issues. Always declare variables before use for clean, predictable code.