JavaScript — Variables

What are Variables?

Variables are containers for storing data values. Think of them as labeled boxes where you put information.

let name = "Alice";
let age = 25;
let isStudent = true;

var, let, and const

JavaScript has three ways to declare variables:

var (Old Way)

var name = "Alice";
var name = "Bob";  // Can redeclare — this is confusing

• Function-scoped (not block-scoped)
• Can be redeclared and updated
• Hoisted to the top of its function
• Avoid in modern code

let (Recommended)

let age = 25;
age = 26;        // Can update
// let age = 30; // Cannot redeclare in same scope

• Block-scoped (respects {} braces)
• Can be updated but not redeclared
• Not hoisted in the same way as var
• Use when the value will change

const (Recommended)

const PI = 3.14159;
// PI = 3;  // Error: cannot reassign

const user = { name: "Alice" };
user.name = "Bob";  // OK: object property can change
// user = {};       // Error: cannot reassign the variable

• Block-scoped like let
• Cannot be reassigned after declaration
• Use by default — switch to let only when needed

Naming Rules

// Valid names
let firstName = "Alice";
let _private = true;
let $price = 9.99;
let camelCase = "standard";

// Invalid names
// let 1stPlace = "Bob";   // Can't start with a number
// let my-name = "Alice";  // Can't use hyphens
// let class = "Math";     // Can't use reserved words

Rules:

• Start with a letter, _, or $
• Case-sensitive (name ≠ Name)
• Use camelCase by convention (firstName, not first_name)

Declaration Without Initialization

let x;           // undefined
let y = undefined; // explicitly undefined

console.log(x);  // undefined

Hoisting

Variables declared with var are hoisted (moved to the top):

console.log(name); // undefined (not error!)
var name = "Alice";

// What JavaScript actually runs:
var name;
console.log(name); // undefined
name = "Alice";

let and const are hoisted but stay in a "temporal dead zone":

console.log(age); // ReferenceError!
let age = 25;

Reassignment vs Mutation

// Reassignment: changing the variable itself
let count = 1;
count = 2;  // Reassignment

// Mutation: changing the contents of an object/array
const items = [1, 2, 3];
items.push(4);     // Mutation — OK
items = [5, 6, 7]; // Reassignment — Error!

Practical Examples

// User preferences
const theme = "dark";
const fontSize = 16;
let isLoggedIn = true;

// Shopping cart
let cartTotal = 0;
cartTotal += 29.99;
cartTotal += 14.50;

// Configuration
const API_URL = "https://api.example.com";
const MAX_RETRIES = 3;
const TIMEOUT_MS = 5000;

Best Practices

• Use const by default — switch to let only when reassignment is needed
• Never use var in modern code
• Use descriptive names (userAge, not ua)
• Name booleans with is, has, or can (isLoading, hasError)
• Name functions with verbs (getUserData, not userData)
• Keep variables close to where they're used

Mini Practice

1. Declare variables with let and const and observe the difference
2. Try reassigning a const — see the error
3. Create a simple calculator using variables
4. Practice naming conventions with different data types

Up Next

Next: Data Types →