What Is a JavaScript Object?

Imagine you’re building a website for a school. Each student has a name, an age, a course, and an enrollment status. Those details all describe one person, so it makes sense to keep them together.

A JavaScript object stores related information as key-value pairs, also called properties and values. Each key identifies a piece of information, while its value holds the actual data.

const student = {
  name: "Alex",
  age: 22,
  course: "JavaScript",
  enrolled: true
};

console.log(student.name);

Objects use curly braces {}. Inside, each property has a key followed by a colon and a value. Commas separate the properties.

Read Information With Dot & Bracket Notation

Once an object contains information, you’ll need a way to retrieve it. JavaScript provides two common approaches: dot notation and bracket notation.

const student = {
  name: "Alex",
  course: "JavaScript",
  lessons: 17
};

console.log(student.name);
console.log(student["course"]);

// Use a variable to select a property
const property = "lessons";
console.log(student[property]);

Dot notation is convenient when you know the property name. Bracket notation is useful when the property name comes from a variable or contains spaces or special characters.

For example, student[property] looks up the property whose name is stored in the property variable.

Change Object Information

Objects can be updated as information changes. You can modify an existing property or add a completely new one using assignment.

const student = {
  name: "Alex",
  course: "HTML"
};

student.course = "JavaScript";
student.level = "Beginner";

console.log(student);

We changed the course property and added a new level property. This makes objects useful for applications where information needs to change over time.

You can also remove a property using the delete operator.

delete student.level;

console.log(student.level);

Just like arrays, objects declared with const can still have their properties updated. The variable itself cannot be reassigned to a different object.

Give Your Objects Actions

An object can store more than information. It can also contain functions that perform actions. When a function is stored as an object property, we commonly call it a method.

const student = {
  name: "Alex",
  course: "JavaScript",

  introduce() {
    return "Hi! I'm " + this.name +
      " and I'm learning " + this.course + ".";
  }
};

console.log(student.introduce());

The method introduce() uses this.name and this.course to access properties on the object that receives the method call.

Methods help keep related data and behavior together. For example, a shopping cart object might contain its items and a method that calculates the total price.

Organize More Detailed Information

Real applications often need to store more than a few simple properties. An object can contain another object, an array, or a combination of both.

const student = {
  name: "Alex",
  course: "JavaScript",

  contact: {
    city: "Irvine",
    email: "alex@example.com"
  },

  skills: ["HTML", "CSS", "JavaScript"]
};

console.log(student.contact.city);
console.log(student.skills[0]);

The contact property contains another object, while skills contains an array. You can use dot notation to access nested properties and array indexes to access list items.

These combinations are especially useful for student records, product catalogs, user profiles, and other structured information.

Use Object.keys(), Object.values() & Object.entries()

Sometimes you don’t know every property name in advance. JavaScript provides methods that help you inspect and loop through an object’s own enumerable properties.

const student = {
  name: "Alex",
  course: "JavaScript",
  level: "Beginner"
};

console.log(Object.keys(student));
console.log(Object.values(student));

Object.keys() returns an array of property names. Object.values() returns an array of their values.

Another method, Object.entries(), returns pairs of keys and values that are convenient to use in a loop.

for (const [key, value] of Object.entries(student)) {
  console.log(key + ": " + value);
}

The square brackets in [key, value] use destructuring to unpack each two-item entry into separate variables.

Turn Object Data Into a Student Profile

Objects are especially useful when a webpage needs to display information about a person, product, event, or account.

Instead of keeping each detail in an unrelated variable, you can store everything in one object and use it to update the page.

const student = {
  name: "Alex",
  course: "JavaScript",
  level: "Beginner"
};

document.getElementById("studentName")
  .textContent = student.name;

document.getElementById("studentCourse")
  .textContent = student.course;

With matching HTML elements, JavaScript reads the object’s properties and displays them. If the object changes, you can update the webpage again to show the latest information.