📦 Variables

The Labeled Box Analogy

Imagine a storage room with labeled boxes:

• Box labeled "AGE" contains: 25
• Box labeled "NAME" contains: "Alice"
• Box labeled "IS_STUDENT" contains: true

Each box has a label (what you call it) and contents (what's inside).

Variables work exactly the same way.

A variable has a name (the label) and a value (what's stored inside). You can:

• Look inside a box (read the value)
• Put something new in the box (change the value)
• Check what's in the box to make decisions (use in conditions)

Why Variables Exist

The Problem: Data Needs Names

Without variables, you'd have to remember raw values:

Calculate: (itemPrice * taxRate) + shippingFee

What is itemPrice? What is taxRate? What is shippingFee?
Who knows!

With variables:

itemPrice = itemPriceFromCatalog
taxRate = currentTaxRate
shippingFee = currentShippingFee

total = (itemPrice * taxRate) + shippingFee

Now the code is self-documenting. Variables give meaningful names to data.

Creating Variables

In JavaScript, you have three ways:

const: For Constants

Things that won't change:

const SITE_NAME = "My App"
const DEFAULT_THEME = "dark"
const API_URL = "https://api.example.com"

SITE_NAME = "Other"  // ❌ Error! Can't reassign const

let: For Things That Change

Things that will be updated:

let score = 0
score = score + 10    // ✅ Works - score is now 10

let currentUser = null
currentUser = { name: "Alice" }  // ✅ Works

Rule of Thumb

A common default is const. Use let when you need to reassign.

This makes your code predictable - if it's const, you know it won't change.

Data Types: What Can Variables Hold?

Variables can hold different types of data:

Naming Variables

Good names describe what's inside:

Rules:

• Start with letter, _, or $ (not numbers)
• No spaces or special characters
• Case-sensitive (age ≠ Age)
• Use camelCase: firstName, totalPrice, isActive

Conventions:

Reading and Changing Values

Reading:

name = "Alice"
print(name)      // Outputs: Alice

greeting = "Hello, " + name
print(greeting)  // Outputs: Hello, Alice

Changing:

count = 10
count = count + 1    // Now 11
count = count + 1    // Now 12

// Shorthand:
count += 1           // Same as count = count + 1
count++              // Same thing, even shorter

Scope: Where Variables Live

Variables exist within certain areas (their "scope"):

Block Scope (let/const):

if (true) {
    let message = "Hello"
    // message exists here
}
// message does NOT exist here!

Function Scope:

function greet() {
    let name = "Alice"
    // name exists here
}
// name does NOT exist here!

Global Scope:

let globalVar = "I'm everywhere!"

function test() {
    print(globalVar)  // ✅ Accessible
}

Common Mistakes

Mistake 1: Using Before Declaring

// ❌ Error!
print(name)
let name = "Alice"

// ✓ Correct
let name = "Alice"
print(name)

Mistake 2: Confusing = and ===

age = 25     // Assignment: puts 25 in the box
age === 25   // Comparison: is age equal to 25?

// ❌ Classic bug
if (isLoggedIn = true) {     // This ASSIGNS, often "true"!
    ...
}

// ✓ Correct
if (age === 25) {   // This COMPARES
    ...
}

Mistake 3: const With Objects

const means you can't reassign, but you CAN modify object contents:

const user = { name: "Alice" }

user.name = "Bob"            // ✅ Works - modifying content
user.age = 30                // ✅ Works - adding property

user = { name: "Charlie" }   // ❌ Error - reassigning!

Mistake 4: Forgetting Variable Exists

let total = 100
// ... 100 lines later ...
let total = 200    // ❌ Error! total already exists

FAQ

Q: When should I use const vs let?

Often use const by default. Use let when you need to reassign the variable.

Q: What's the difference between null and undefined?

• undefined: Often means a variable exists but hasn't been assigned a value yet
• null: Intentionally set to "empty" or "nothing"

Q: Why avoid var?

var has confusing scoping rules (function scope instead of block scope) and is "hoisted" in confusing ways. let and const are clearer.

Q: Are variable names case-sensitive?

Yes! name, Name, and NAME are three different variables.

Q: Can I change a variable's type?

In JavaScript, yes (it's "dynamically typed"):

let x = 42; // Number
x = "hello"; // Now a string - allowed but confusing!

Q: What happens if I use a variable that doesn't exist?

You get a ReferenceError: "x is not defined".

Summary

Variables are named containers for data. They give meaning to values and let you store, retrieve, and update information.

Key Takeaways:

• Variable = labeled box containing a value
• Use const by default, let when you need to reassign
• Avoid var in modern code
• Names should describe what's inside
• = assigns, === compares
• Variables have scope - they exist within certain areas
• Use meaningful names, not x, temp, or stuff

Variables are the foundation of all programming. Everything else builds on storing and manipulating data!