An object stores labelled values. Where an array uses positions, an object uses names.
const person = {
name: "Ada",
age: 36,
isMember: true,
};
console.log(person.name); // AdaReading and writing#
const person = { name: "Ada" };
person.age = 36; // add
person.name = "Ada L."; // update
delete person.age; // remove
console.log(person.email); // undefined — no error
console.log("name" in person); // trueReading a missing property gives undefined rather than an error. That is convenient until it is not — see the trap below.
Dot or brackets?#
const key = "name";
person.name // dot — when you know the name while writing the code
person["name"] // brackets — same thing
person[key] // brackets — when the name is in a variable
person["first name"] // brackets — required for names with spacesUse dots by default. Reach for brackets when the property name is dynamic.
Methods: functions inside objects#
const account = {
balance: 1000,
deposit(amount) {
this.balance += amount;
return this.balance;
},
};
console.log(account.deposit(500)); // 1500this refers to the object the method was called on. Do not use an arrow function here — arrows do not get their own this. See JavaScript functions explained.
Destructuring#
Pulling properties out into their own variables:
const person = { name: "Ada", age: 36, city: "London" };
const { name, age } = person;
console.log(name, age); // Ada 36
const { city: hometown } = person; // rename while extracting
const { email = "none" } = person; // default if missingThis appears constantly in React and Node code, so it is worth getting comfortable with early.
Spreading and copying#
const base = { name: "Ada", age: 36 };
const copy = { ...base }; // shallow copy
const updated = { ...base, age: 37 }; // copy with one change
const merged = { ...base, ...{ city: "London" } };Later properties win, which is what makes { ...base, age: 37 } read as “everything from base, but with a new age”.
Looping over an object#
const prices = { pen: 50, book: 300 };
for (const [item, price] of Object.entries(prices)) {
console.log(`${item}: ${price}`);
}
Object.keys(prices); // ["pen", "book"]
Object.values(prices); // [50, 300]Objects inside arrays#
The shape almost all real data arrives in:
const students = [
{ name: "Ada", marks: 91 },
{ name: "Sam", marks: 64 },
];
const passed = students.filter(s => s.marks >= 50).map(s => s.name);
console.log(passed); // ["Ada", "Sam"]Comparing objects#
console.log({ a: 1 } === { a: 1 }); // false — different objects
const x = { a: 1 };
const y = x;
console.log(x === y); // true — same objectObjects compare by identity, not contents. To compare contents, check the properties you care about individually.
Questions people ask#
What is JSON?
A text format that looks like a JavaScript object. JSON.parse() turns text into an object; JSON.stringify() goes the other way. It is how data travels between a browser and a server.
How do I deep-copy an object?
Spreading only copies the top level. For nested data, use structuredClone(obj) in modern browsers.
What is the difference between an object and a Map?
A Map allows any type as a key and keeps insertion order reliably. Objects are simpler and fine for most everyday use.