JavaScript Objects — Properties, Destructuring & JSON

Objects are JavaScript's universal container — every API response, config and component prop is one. The modern syntax around them (destructuring, spread, ?.) is half of what makes JS pleasant now.

⚡ Quick Answer

Create with braces: const user = { name: "Ada", age: 12 }. Read with user.name or user["name"]. Pull values out with destructuring: const { name, age } = user. Reach into maybe-missing data safely with user?.profile?.bio.

Creating & accessing Destructuring Spread, merge & copy Optional chaining & nullish coalescing JSON — objects over the wire Common Mistakes FAQ

§Creating & accessing

basics.js

const user = {
  name: "Ada",
  age: 12,
  langs: ["python", "js"],
  greet() { return `Hi, I'm ${this.name}`; }   // method shorthand
};

console.log(user.name);        // dot — when you know the key
const key = "age";
console.log(user[key]);        // bracket — dynamic keys
user.level = 3;                // add anytime
delete user.age;               // remove

§Destructuring

destructuring.js

const player = { name: "Ada", hp: 100, pos: { x: 4, y: 7 } };

const { name, hp } = player;             // pull out two fields
const { hp: health = 50 } = player;      // rename + default
const { pos: { x, y } } = player;        // nested

function intro({ name, hp }) {           // destructure parameters!
  return `${name} (${hp} HP)`;
}

§Spread, merge & copy

spread.js

const defaults = { theme: "dark", lang: "en" };
const prefs    = { lang: "ur" };

const settings = { ...defaults, ...prefs };  // later wins
// { theme: "dark", lang: "ur" }

const copy = { ...settings };        // shallow copy
const deep = structuredClone(settings);   // real deep copy (modern)

§Optional chaining & nullish coalescing

optional.js

const res = { data: { user: null } };

// old way: res.data && res.data.user && res.data.user.name
const name = res.data?.user?.name;        // undefined, no crash
const safe = res.data?.user?.name ?? "Guest";  // with default

res.onDone?.();     // call a function only if it exists

§JSON — objects over the wire

json.js

const player = { name: "Ada", level: 7 };

const text = JSON.stringify(player);        // object → string
// '{"name":"Ada","level":7}'
const back = JSON.parse(text);              // string → object

localStorage.setItem("save", JSON.stringify(player));
const loaded = JSON.parse(localStorage.getItem("save") ?? "{}");

§Common Mistakes to Avoid

🚨 Watch out for these

Copying objects with = — assignment shares one object between two names — spread {...obj} or structuredClone() for real copies
Reading deep properties without ?. — obj.a.b crashes if a is undefined — obj.a?.b returns undefined instead
Using arrow functions as methods — this inside an arrow method isn't the object — use method shorthand greet() {}

§Frequently Asked Questions

What's the difference between dot and bracket notation?

Dot (user.name) needs a literal key name; brackets (user[key]) accept any expression — required for dynamic keys or keys with spaces.

What does the ?? operator do?

Nullish coalescing: a ?? b returns b only when a is null or undefined — unlike ||, it keeps valid falsy values like 0 and "".

What's the difference between JSON and a JavaScript object?

JSON is a text format (always a string, double-quoted keys, no functions); an object is live in-memory data. stringify/parse convert between them.

How do I loop over an object?

for (const [key, value] of Object.entries(obj)) — or Object.keys(obj)/Object.values(obj) for just one side.

🎓 Want to master JavaScript properly?This reference covers one topic — the full free course takes you from zero to real projects, with quizzes and a certificate.

Start the Free JavaScript Course →

§Related JavaScript Topics

📦 Variableslet, const, var & scope 🏷️ Data TypesTypes, == vs ===, null & undefined 🧰 FunctionsDeclarations, arrows & callbacks 📋 Arraysmap, filter, reduce & friends 🔁 Loopsfor, for-of, while & control 🌳 DOM ManipulationSelect, change & create elements

← Arrays Loops →