Modeling Data with Objects

Modeling Data with Objects

What Is an Object?

An object is a container that stores related pieces of data together, where each piece has a name. Think of it like an ID card: the card is one thing, but it holds a name, a date of birth, and a photo — each labeled so you know what it is.

In JavaScript, each labeled piece of data is called a property. The name of the property is the key, and the data it holds is the value. A value can be any type you have learned so far: a string, a number, a boolean, or even another object or array.

Objects matter because real data comes in groups. A single user has a name, an email, and a signup date. Keeping those together in one object is much easier than juggling separate variables.

Creating an Object Literal

The easiest way to make an object is an object literal: a list of key: value pairs inside curly braces {}.

const book = {
  title: 'Exploring JS',
  edition: 2
};

This creates one object stored in the variable book. It has two properties: title (a string) and edition (a number).

Reading and Changing Properties

There are two ways to read a property:

• Dot notation: book.title — short and common.
• Bracket notation: book['title'] — useful when the key is stored in a variable.

const book = {
  title: 'Exploring JS',
  edition: 2,
  describe() {
    return `${this.title} (edition ${this.edition})`;
  }
};

console.log(book.title);        // Exploring JS
console.log(book['edition']);   // 2
console.log(book.describe());   // Exploring JS (edition 2)

You can also change or add properties after the object is created:

book.edition = 3;          // change an existing property
book.publisher = 'No Starch'; // add a new property
console.log(book.publisher);   // No Starch

Notice that even though we used const for book, we could still change its properties. const stops you from pointing the variable at a different object — it does not freeze the object itself.

A Method Is a Property That Holds a Function

When a property's value is a function, we call it a method. The describe property above is a method. Inside a method, the keyword this means "the object this method belongs to," so this.title means "the title property of this same object."

caption: An object named book with three properties, including a method that reads the other two.

alt: A flowchart showing a box labeled Object: book connected to three property boxes, with the describe method box pointing back to the title and edition boxes.

Nesting: Objects Inside Objects

Objects can hold other objects and arrays, which lets you model richer data:

const user = {
  name: 'Ada',
  email: 'ada@example.com',
  address: { city: 'London', zip: 'E1 6AN' },
  interests: ['math', 'computing']
};

console.log(user.address.city);   // London
console.log(user.interests[0]);   // math

Here user.address.city means: look up address in user, then look up city inside that.

Objects vs. Arrays

Use each for its purpose:

A shopping list is an array. A single product — with a name, price, and stock count — is an object.

callout tip Remember the pattern: object = one thing with named properties, array = many things in order. Often you will use both together, like an array of user objects.

callout warning If you use a key name that does not exist, JavaScript does not show an error. It returns the value undefined. Check your spelling — user.adress is a silent bug.

exercise Q: Given const car = { make: 'Toyota', year: 2020 }, write an expression that reads the year, and one that adds a color property set to 'red'. A: car.year (or car['year']) reads the value, and car.color = 'red'; adds the new property.

exercise Q: What does console.log(car.model) print if model was never added to the object? A: It prints undefined — accessing a missing property is not an error, it just gives the value undefined.

estimate minutes: 35