Objects

What you'll learn

How to create an object, read and change its properties, add methods, and loop over keys and values.

Why it matters

A user has a name, an email and an age. Keeping those in separate variables is messy. An object bundles related information into one value, and it is the shape of nearly all data you receive from servers (JSON).

Explanation

An object is a collection of key: value pairs in curly braces. The keys are called properties.

• Add or change: user.city = "Pune";
• Delete: delete user.age;
• Check: "name" in user or user.name !== undefined.
• A property can hold a function, called a method: greet() { ... }. Inside, this is the object the method belongs to.
• Object.keys(obj), Object.values(obj) and Object.entries(obj) give arrays you can loop over.

Objects can hold arrays and other objects, which is how you model real things.

Example

Step-by-step walkthrough

1. user has a string, a number, an array and a method.
2. user.greet() runs the method. this.name is Asha, so it prints Hi, I am Asha.
3. We add city and change age.
4. Object.entries(user) returns key-value pairs. We skip the function and print the rest: name, age, skills and city.
5. The spread syntax makes a copy with a different name, so changing the copy does not affect the original: it prints Ravi Asha.

Try it yourself

Add a birthYear property and a method isAdult() that returns whether age >= 18.

ObjectsJavaScript

Editable codeconst user = { name: "Asha", age: 30, greet() { return "Hi, I am " + this.name; }, }; console.log(user.greet()); user.city = "Pune"; console.log(Object.keys(user));

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using dot notation with a variable key. obj.key looks for a property named "key". Use obj[key].
• Using an arrow function as a method and expecting this to be the object.
• Thinking const makes the object frozen. You can still change its properties.
• Comparing objects with ===. Two separate objects with the same contents are not equal.

Quick quiz

Summary

• Objects group data as key-value pairs; read with dot or bracket notation.
• Methods are functions on objects; this is the object.
• Copy with { ...obj }; loop with Object.entries.

Next: changing web pages with the DOM.

const user = { name: "Asha", age: 30 };
console.log(user.name);        // dot notation
console.log(user["age"]);      // bracket notation

const user = {
  name: "Asha",
  age: 30,
  skills: ["html", "css"],
  greet() {
    return "Hi, I am " + this.name;
  },
};

console.log(user.greet());

user.city = "Pune";
user.age = 31;

for (const [key, value] of Object.entries(user)) {
  if (typeof value !== "function") {
    console.log(key, "=>", value);
  }
}

const copy = { ...user, name: "Ravi" };
console.log(copy.name, user.name);