Skip to main content

​
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"

const 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

for (const [key, value] of Object.entries(user)) {
  console.log(`${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