Objects & Key-Value Pairs

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Key-Value Records

An object is an unordered collection of related data stored as key: value property pairs enclosed in curly braces {...}.

2. Why It Matters

Objects model real-world entities (users, products, configurations) in application state.

3. Dot Notation vs. Bracket Notation

Access object properties using dot notation (user.name) or bracket notation (user["name"]) when keys contain spaces or are stored in dynamic variables:

const user = {
  name: "Sarah",
  role: "Developer",
  "active status": true,
};

// Dot notation
console.log(user.name); // "Sarah"

// Bracket notation (Required for spaces or dynamic variables)
console.log(user["active status"]); // true

const keyToRead = "role";
console.log(user[keyToRead]); // "Developer"

// Updating & Adding Properties
user.role = "Lead Developer";
user.location = "San Francisco";

4. Safe Property Navigation (Optional Chaining ?.)

Reading a property from a non-existent object (e.g. null.profile) throws an uncaught TypeError: Cannot read properties of null. Use optional chaining (?.) to safely return undefined instead of crashing:

const userProfile = { name: "Alex" };

// Safe optional chaining
console.log(userProfile.address?.city); // undefined (No crash!)

5. Common Mistakes

• Using Dot Notation with Dynamic Variables: Writing user.keyToRead searches for a property literally named "keyToRead". Use bracket notation user[keyToRead] when reading dynamic variable keys!
• Comparing Objects with ===: Objects are compared by memory reference, NOT by content! Two identical objects { a: 1 } === { a: 1 } evaluates to false because they occupy different memory addresses.

6. Next Steps

Objects structure entity data. Next, let's explore functional array transformations starting with .map()!