Loading...
Loading...
Key-value pairs. The fundamental building block of JavaScript.
Real programs store collections of data. Arrays hold ordered lists, objects hold named properties, and modern syntax like destructuring and spread make working with both concise. JSON connects JavaScript data to every API on the web.
Objects group related data under named keys — a user profile, app settings, or JSON payload from an API. Learn literal syntax, dot vs bracket access, nested structures, and how objects are stored on the heap.
Arrays and objects are how JavaScript represents real-world data — a list of products, a user profile, a configuration file. Understanding how to create, read, update, and iterate over these structures is essential for any project.
This module covers array methods like map and filter, object property access, destructuring assignment, the spread operator, and JSON — the format every REST API speaks. Visual memory diagrams show how references and copies behave so you avoid common mutation bugs.
Nearly every JSON response is an object. React components receive props objects, config files are objects, and the DOM is an object tree. Together with arrays, objects model virtually all application state in JavaScript.
Key-value pairs inside curly braces.
// Object literal (most common): const user = { name: "Alice", age: 28, isAdmin: false, }; // Empty object: const empty = {}; // Shorthand — variable names become keys: const name = "Bob"; const age = 25; const bob = { name, age }; // { name: "Bob", age: 25 }
const user = {
}
Dot notation or bracket notation.
const user = { name: "Alice", age: 28 }; user.name; // "Alice" user.age; // 28 user.email; // undefined (doesn't exist) // Clean and readable — use when: // • Key is a valid identifier // • Key is known at write time
Add, update, and delete properties.
const user = { name: "Alice", age: 28 }; // Update existing property: user.age = 29; // Add new property: user.email = "alice@example.com"; // Delete a property: delete user.email; console.log(user); // { name: "Alice", age: 29 }
⚠️ constprevents reassigning the variable, but you can still modify the object's properties. Use Object.freeze() to make an object truly immutable.
Objects inside objects — common for structured data.
const user = { name: "Alice", address: { street: "123 Main St", city: "Springfield", country: "US", }, hobbies: ["reading", "coding"], }; // Access nested properties: user.address.city; // "Springfield" user.hobbies[0]; // "reading" // Optional chaining (safe access): user.address?.zip; // undefined (no error) user.contact?.email; // undefined (no error) // Without ?. → TypeError if contact is undefined
Iterate and inspect object contents.
const user = { name: "Alice", age: 28, role: "dev" }; // Check if property exists: "name" in user; // true "email" in user; // false user.hasOwnProperty("age"); // true // Get all keys, values, or entries: Object.keys(user); // ["name", "age", "role"] Object.values(user); // ["Alice", 28, "dev"] Object.entries(user); // [["name","Alice"], ["age",28], ...] // Loop through properties: for (const [key, value] of Object.entries(user)) { console.log(`${key}: ${value}`); }
Objects are stored by reference, like arrays.
const a = { x: 1 }; const b = a; b.x = 99; console.log(a.x); // 99 ← same object!
Assigning an object to another variable creates a reference — both point to the same data.
Common questions about objects.
Test your understanding — 3 questions
What will this output?
const person = { name: "Alice", age: 25 };
console.log(person.name);