JavaScript Variables: var, let, and const

JavaScript variables are containers that hold data values, and understanding how to declare them properly is fundamental to writing effective JavaScript code. JavaScript offers three keywords for declaring variables: var, let, and const. Each has distinct characteristics that affect how your code behaves, particularly regarding scope, hoisting, and reassignment.

Understanding var: The Original Variable Declaration

The var keyword was the original way to declare variables in JavaScript. While still functional, it has some quirky behaviors that can lead to unexpected results:

var userName = "Alice";
var age = 25;
var age = 30; // This works - redeclaration is allowed

console.log(userName); // Output: Alice
console.log(age); // Output: 30

Key characteristics of var:

• Function-scoped: Variables declared with var are accessible throughout the entire function
• Hoisting: Variable declarations are moved to the top of their scope during compilation
• Redeclaration allowed: You can declare the same variable multiple times
• Can be reassigned: Values can be changed after declaration

The Modern Approach: let and const

ES6 (ECMAScript 2015) introduced let and const to address the limitations of var. These modern declarations provide better control and prevent common programming errors.

Using let for Reassignable Variables

The let keyword creates variables that can be reassigned but not redeclared in the same scope:

let score = 100;
score = 150; // This works - reassignment is allowed

let playerName = "Bob";
// let playerName = "Charlie"; // This would cause an error - redeclaration not allowed

console.log(score); // Output: 150
console.log(playerName); // Output: Bob

Using const for Constants

The const keyword creates constants that cannot be reassigned after their initial declaration:

const PI = 3.14159;
const maxUsers = 1000;

// PI = 3.14; // This would cause an error - reassignment not allowed

console.log(PI); // Output: 3.14159

Important note: While const prevents reassignment, objects and arrays declared with const can still have their contents modified:

const user = { name: "David", age: 28 };
user.age = 29; // This works - modifying object properties
user.city = "New York"; // This also works

console.log(user); // Output: { name: "David", age: 29, city: "New York" }

Block Scope: A Key Difference

One of the most important differences between var and the newer keywords is scope. Both let and const are block-scoped, meaning they're only accessible within the block where they're declared:

function demonstrateScope() {
    var varVariable = "I'm function-scoped";
    
    if (true) {
        var varInBlock = "I'm also function-scoped";
        let letInBlock = "I'm block-scoped";
        const constInBlock = "I'm also block-scoped";
    }
    
    console.log(varVariable); // Works fine
    console.log(varInBlock); // Works fine (function-scoped)
    // console.log(letInBlock); // Error - not accessible outside block
    // console.log(constInBlock); // Error - not accessible outside block
}

demonstrateScope();

Best Practices for Variable Declarations

Modern JavaScript development follows these conventions:

• Use const by default for values that won't be reassigned
• Use let when you need to reassign the variable
• Avoid var in modern code due to its unpredictable scoping behavior
• Declare variables at the beginning of their scope for clarity

// Good practice example
const apiUrl = "https://api.example.com";
let currentUser = null;
let attempts = 0;

function loginUser(credentials) {
    attempts++; // Reassigning let variable
    // Process login logic here
}

What's Next

Now that you understand JavaScript variable declarations, the next step is exploring JavaScript data types. You'll learn about strings, numbers, booleans, objects, and arrays; the building blocks that these variables can hold. Understanding data types will help you choose the right variable declaration method and write more predictable code.