Objects

What are objects?

Objects store data as key-value pairs. They represent things — a user, a product, an API response, a configuration. If arrays are ordered lists, objects are labeled containers.

const user = {
  name: "Sarah Chen",
  email: "sarah@example.com",
  age: 28,
  isAdmin: true,
};

console.log(user.name);  // "Sarah Chen"
console.log(user.email); // "sarah@example.com"

JavaScript
Python

const user = {
  name: "Sarah",
  age: 28,
  role: "admin",
};

user = {
    "name": "Sarah",
    "age": 28,
    "role": "admin",
}

JavaScript objects are like Python dictionaries, but keys don’t need quotes (unless they contain special characters or spaces).

Accessing properties

Two ways to access object properties:

const user = { name: "Sarah", age: 28, role: "admin" };

// Dot notation — use when you know the property name
console.log(user.name); // "Sarah"
console.log(user.age);  // 28

// Bracket notation — use with variables or special characters
console.log(user["role"]); // "admin"

const field = "name";
console.log(user[field]); // "Sarah" — dynamic access

Use dot notation by default — it’s cleaner and easier to read. Use bracket notation when the property name is stored in a variable or contains characters like hyphens or spaces.

Accessing nested properties

const order = {
  id: "ORD-001",
  customer: {
    name: "Sarah Chen",
    address: {
      city: "Portland",
      state: "OR",
    },
  },
  items: [
    { name: "Laptop", price: 999 },
    { name: "Mouse", price: 29 },
  ],
};

console.log(order.customer.name);           // "Sarah Chen"
console.log(order.customer.address.city);   // "Portland"
console.log(order.items[0].name);           // "Laptop"
console.log(order.items.length);            // 2

Optional chaining

When you’re not sure a nested property exists, use ?. to avoid errors:

const user = { name: "Sarah", address: null };

// ❌ Without optional chaining — crashes
console.log(user.address.city); // TypeError: Cannot read properties of null

// ✅ With optional chaining — returns undefined
console.log(user.address?.city); // undefined
console.log(user.preferences?.theme); // undefined

API responses often have missing or null fields. Use optional chaining ?. whenever you access nested properties from external data. It prevents “Cannot read properties of undefined” — one of the most common JavaScript errors.

Adding and updating properties

const user = { name: "Sarah", age: 28 };

// Update existing property
user.age = 29;

// Add new properties
user.email = "sarah@example.com";
user.role = "admin";

console.log(user);
// { name: "Sarah", age: 29, email: "sarah@example.com", role: "admin" }

// Delete a property
delete user.role;
console.log(user.role); // undefined

Remember: even though user is declared with const, you can still modify its properties. const prevents reassigning the variable itself (user = something), not modifying the object’s contents. We covered this in the Variables lesson.

Checking if a property exists

const user = { name: "Sarah", email: "sarah@example.com", age: undefined };

// "in" operator — checks if the key exists (even if value is undefined)
console.log("name" in user);    // true
console.log("role" in user);    // false
console.log("age" in user);     // true (key exists, value is undefined)

// Comparing to undefined — can't distinguish "missing" from "set to undefined"
console.log(user.role !== undefined); // false
console.log(user.age !== undefined);  // false (misleading!)

Use the in operator when you need to know if a key exists, regardless of its value. Use direct comparison when you just care about whether the value is usable.

Iterating over objects

const user = { name: "Sarah", age: 28, role: "admin" };

// Get all keys
console.log(Object.keys(user));   // ["name", "age", "role"]

// Get all values
console.log(Object.values(user)); // ["Sarah", 28, "admin"]

// Get key-value pairs
console.log(Object.entries(user)); // [["name", "Sarah"], ["age", 28], ["role", "admin"]]

// Loop through entries
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Sarah
// age: 28
// role: admin

JavaScript
Python

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

for key, value in user.items():
    print(f"{key}: {value}")

Object.entries() is JavaScript’s equivalent of Python’s .items().

Shorthand property names

When a variable name matches the property name, you can use a shorthand:

const name = "Sarah";
const age = 28;
const role = "admin";

// ❌ Long form
const user = { name: name, age: age, role: role };

// ✅ Shorthand — same result
const user = { name, age, role };

console.log(user); // { name: "Sarah", age: 28, role: "admin" }

You’ll see this pattern everywhere — especially when returning data from functions or building objects from variables.

Methods (functions on objects)

Objects can contain functions. When a function is on an object, it’s called a method:

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  },
  multiply(a, b) {
    return a * b;
  },
};

console.log(calculator.add(5, 3));      // 8
console.log(calculator.multiply(4, 7)); // 28

In this course, you won’t write many object methods yourself. React components use functions and hooks instead. But you’ll see methods on built-in objects (Math.round(), JSON.parse(), console.log()) and on API response objects.

What’s next?

You can create and work with objects. Now let’s learn destructuring — a cleaner way to extract values from objects and arrays.

Destructuring

Extract values into individual variables

Data structures

Working with JSON

Control flow

What are objects?

Accessing properties

Accessing nested properties

Optional chaining

Adding and updating properties

Checking if a property exists

Iterating over objects

Shorthand property names

Methods (functions on objects)

What’s next?

Destructuring

​What are objects?

​Accessing properties

​Accessing nested properties

​Optional chaining

​Adding and updating properties

​Checking if a property exists

​Iterating over objects

​Shorthand property names

​Methods (functions on objects)

​What’s next?

Destructuring

What are objects?

Accessing properties

Accessing nested properties

Optional chaining

Adding and updating properties

Checking if a property exists

Iterating over objects

Shorthand property names

Methods (functions on objects)

What’s next?