JavaScript Variables

1. What is a Variable?

A variable is simply a labeled container for storing data in your program. You give the container a name (like score), put some data inside it (like 100), and use that name whenever you want to read or update that data.

2. The Three Keywords: const, let, and var

JavaScript has 3 keywords to declare variables. Here is the easiest way to understand the difference:

const PI = 3.14;
// PI = 3.15; ❌ Error!

let score = 10;
score = 25; // ✅ Updated!

var old = "1995";
var old = "buggy"; // ⚠️ Leaks

3. Variable Naming Rules & Conventions

JavaScript identifiers must strictly adhere to lexical grammar rules:

• Valid Characters: Letters (a-z, A-Z), digits (0-9), underscores (_), and dollar signs ($).
• First Character Rule: Identifiers cannot begin with a digit (e.g., 1user is invalid; user1 or _user is valid).
• Case Sensitivity: totalPrice, TotalPrice, and TOTALPRICE are separate variables.
• Reserved Keywords: Cannot use language keywords like class, return, function, typeof, or let.
• Industry Conventions: Use camelCase for variables and functions (e.g., userAge), PascalCase for classes and React components (e.g., UserProfile), and UPPER_SNAKE_CASE for fixed configuration constants (e.g., MAX_RETRY_COUNT).

4. Declaration vs Initialization vs Reassignment

Understanding the lifecycle of a variable in memory:

let accountBalance;
console.log(accountBalance);
// ➔ Output: undefined

accountBalance = 2500;
console.log(accountBalance);
// ➔ Output: 2500

accountBalance = 5000;
console.log(accountBalance);
// ➔ Output: 5000

Reassignment vs Redeclaration Rules

// 1. var: Allows BOTH redeclaration and reassignment
var name = "Alex";
var name = "Sam";   // ✅ Allowed (Redeclared)
name = "Jordan";    // ✅ Allowed (Reassigned)

// 2. let: Can reassign, CANNOT redeclare
let score = 10;
// let score = 20;  // ❌ Error: Cannot redeclare
score = 20;         // ✅ Allowed (Reassigned)

// 3. const: CANNOT redeclare, CANNOT reassign (Locked)
const max = 100;
// const max = 200; // ❌ Error: Cannot redeclare
// max = 150;       // ❌ Error: Cannot reassign

5. const with Objects and Arrays (The Reference Trap)

A classic technical interview question: "If a variable is declared with const, why can we still add properties to it?"

const creates an immutable variable binding (it locks the memory pointer in stack memory), but it does not make the object or array value stored in heap memory immutable. You can mutate its keys and indices freely.

const student = { name: "Anshuman", semester: 6 };

// ✅ Allowed: Mutating internal properties
student.semester = 7;
student.gpa = 3.9;
console.log(student);

// ❌ Forbidden: Reassigning the variable reference to a different object
// student = { name: "Priya" }; // ❌ TypeError: Assignment to constant variable

const languages = ["JavaScript", "Python"];

// ✅ Allowed: Adding or modifying elements
languages.push("TypeScript");
languages[0] = "Modern JavaScript";
console.log(languages);

// ❌ Forbidden:
// languages = ["Rust", "Go"]; // ❌ TypeError: Assignment to constant variable

{ name: 'Anshuman', semester: 7, gpa: 3.9 }
[ 'Modern JavaScript', 'Python', 'TypeScript' ]

6. Variable Shadowing

When an identifier declared in an inner scope (such as a block or a function) shares the exact same name as an identifier in an outer scope, the inner variable shadows (masks) the outer variable within that block without altering the outer value.

let score = 50; // Outer variable

function playLevel() {
    let score = 95; // Shadows outer 'score' inside this function scope
    console.log("Inner function score:", score); // 95
}

playLevel();
console.log("Outer scope score:", score); // 50 (preserved!)

// Block-level shadowing with let / const:
let theme = "light";
if (true) {
    let theme = "dark"; // Block-scoped shadow
    console.log("Inside conditional block:", theme); // "dark"
}
console.log("Outside block:", theme); // "light"

Inner function score: 95
Outer scope score: 50
Inside conditional block: dark
Outside block: light

7. Variables Interview Deck

Test your knowledge with 5 classic JavaScript variable interview questions asked by top companies:

let x = 10;
{
    let x = 20;
    console.log(x);
}
console.log(x);

const numbers = [1, 2];
numbers.push(3);
console.log(numbers);

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 10);
}

console.log(score);
let score = 100;

const MAX_SCORE = 100;
MAX_SCORE = 200;

7. Best Practices & Summary