Skip to content

Objects

Learn how objects group related data with keys and values — the most common way to structure information.

What you'll learn

  • What an object is and why we use them
  • How to read and write properties with dot and bracket notation
  • How to add methods (functions) to an object
  • How objects and arrays combine to model real data

Concept

Objects

An object is a collection of key-value pairs. While arrays are good for ordered lists, objects are good for describing a *thing* with named attributes. A user has a name, an age, and an email — an object groups those together.

Creating and Accessing

const user = {
  name: "Ada",
  age: 36,
  email: "[email protected]",
};

user.name;        // "Ada"   — dot notation
user["age"];      // 36      — bracket notation

Use dot notation when you know the key name at write time. Use bracket notation when the key is dynamic (stored in a variable).

Adding and Updating Properties

user.isAdmin = true;     // add a new property
user.age = 37;           // update an existing one

Methods

A property whose value is a function is called a method. Methods let an object carry behavior alongside its data:

const counter = {
  count: 0,
  increment() { this.count++; },
  reset() { this.count = 0; },
};
counter.increment();
counter.increment();
console.log(counter.count);  // 2

Objects + Arrays

Real-world data usually mixes the two. A list of users is an array of objects:

const users = [
  { name: "Ada", role: "admin" },
  { name: "Grace", role: "editor" },
];

This is exactly the shape of JSON returned by most APIs — which is why understanding objects is essential for web development.

Example

              const product = {
  id: 42,
  name: "Wireless Mouse",
  price: 29.99,
  inStock: true,
  tags: ["electronics", "accessory"],
};

// Read properties:
console.log(product.name);            // "Wireless Mouse"
console.log(product["price"]);        // 29.99

// Update and add:
product.price = 24.99;                // sale price
product.discount = "20% off";

// Loop over keys with Object.keys:
for (const key of Object.keys(product)) {
  console.log(key, ":", product[key]);
}

This product object mixes a string, number, boolean, and array. Object.keys returns the key names so we can iterate over every property.

Try it

  • JSON Formatter

    JSON is made of objects and arrays. Paste a product object and see the structure visualized.

  • JSON to TypeScript

    Turn an object into a TypeScript interface — see how types describe object shapes.

Common mistakes

The mistake

Using dot notation with a dynamic key stored in a variable.

The fix

Use bracket notation: obj[key], not obj.key. The dot form looks for a literal property named 'key'.

The mistake

Confusing arrays (ordered, indexed by number) with objects (unordered, keyed by name).

The fix

Use arrays for ordered lists of similar items. Use objects for named attributes of a single entity. Mix them when you need a list of entities.

Related Resources

Related Snippets

Practice Objects

2 exercises

Practice Objects

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors