Engineering Fluency OS

Why This Matters

Arrays are great for ordered lists, but what about data that has names? A user has a name, email, and age — not a first, second, and third value. An object (called a dictionary in Python) stores data as key-value pairs, letting you access values by name instead of position.

Objects are how you model real-world entities in code. Every API request body, database record, configuration file, and React component prop is an object. They're as fundamental as arrays — most real data is a combination of both.

Define Terms

Visual Model

user object

name: "Alice"

email: "a@b.com"

age: 28

.greet() method

spread copy

destructure

method

{...user}

const {name}

The full process at a glance. Click Start tour to walk through each step.

Objects map named keys to values. Properties, methods, spread, and destructuring are the core operations.

Code Example

Code

// Creating objects
const user = {
  name: "Alice",
  email: "alice@example.com",
  age: 28,
  greet() {
    return "Hi, I am " + this.name;
  }
};

// Accessing properties
console.log(user.name);        // "Alice"
console.log(user["email"]);    // "alice@example.com"
console.log(user.greet());     // "Hi, I am Alice"

// Modifying properties
user.age = 29;
user.role = "admin";  // add new property
console.log(user.age, user.role);  // 29 "admin"

// Destructuring
const { name, age } = user;
console.log(name, age);  // "Alice" 29

// Spread operator (shallow copy + override)
const updated = { ...user, age: 30, city: "NYC" };
console.log(updated.age);   // 30
console.log(updated.city);  // "NYC"
console.log(user.age);      // 29 (original unchanged)

// Nested objects
const config = {
  database: { host: "localhost", port: 5432 },
  cache: { ttl: 300 }
};
console.log(config.database.port);  // 5432

Interactive Experiment

Try these exercises:

Create an object representing a book with title, author, and pages. Print each property.
Add a method summary() that returns a string like "Title by Author (X pages)".
Use destructuring to extract title and author into separate variables.
Create a copy with spread and change the pages — verify the original is unchanged.
What happens when you access a property that doesn't exist?

Quick Quiz

Coding Challenge

Object Merger

Write a function called `mergeProfiles` that takes two user objects and returns a new merged object. If both objects have the same key, the second object's value should win. Neither original object should be modified.

Loading editor...

Real-World Usage

Objects are the standard way to structure data in software:

API payloads: { "user": { "id": 1, "name": "Alice" } } — every REST and GraphQL response is objects.
Configuration: { port: 3000, database: { host: "localhost" } } — app configs are nested objects.
React props: <Button color="blue" size="lg" /> → the component receives { color: "blue", size: "lg" }.
Database records: Each row maps to an object with column names as keys.
State management: Redux/Zustand stores are objects. Updates use spread: { ...state, count: state.count + 1 }.

Objects