JavaScript Object Destructuring

Pull Properties Into Variables

JavaScript Object Destructuring

Destructuring lets you extract object properties into named variables — with renaming, defaults, and nested patterns.

5 min read Level 2/5 #objects#destructuring#defaults

What you'll learn

Destructure object properties into variables
Rename while destructuring
Provide defaults for missing properties
Destructure function parameters

You’ve seen array destructuring. Object destructuring is the same idea — pull values out by name instead of position.

Pull out properties script.js

const user = { name: "Ada", age: 36, role: "admin" };

const { name, age } = user;

console.log(name); // "Ada"
console.log(age);  // 36

▶ Preview: console

Compare with the verbose version:

const name = user.name;
const age = user.age;

Renaming

The property name may not be the variable name you want. Use : to rename.

Renaming script.js

const user = { name: "Ada", id: 42 };

const { name: fullName, id: userId } = user;

console.log(fullName); // "Ada"
console.log(userId);   // 42

▶ Preview: console

Read as: “extract name, but call it fullName”.

Defaults

If a property is missing (or undefined), use a default.

Defaults script.js

const user = { name: "Ada" };

const { name, role = "user", age = 0 } = user;

console.log(name); // "Ada"
console.log(role); // "user"  ← default
console.log(age);  // 0       ← default

▶ Preview: console

You can combine renaming and defaults: { name: fullName = "Anonymous" }.

Nested Destructuring

Mirror the shape of the object.

Nested destructuring script.js

const user = {
  name: "Ada",
  address: { city: "London", country: "UK" },
};

const { name, address: { city } } = user;

console.log(name); // "Ada"
console.log(city); // "London"
// console.log(address); // ReferenceError — we destructured INTO it, not OUT

▶ Preview: console

Rest in Destructuring

Capture “everything else” with ....

Rest script.js

const user = { name: "Ada", age: 36, role: "admin" };

const { name, ...rest } = user;
console.log(name); // "Ada"
console.log(rest); // { age: 36, role: 'admin' }

▶ Preview: console

A clean way to peel off a field.

Destructuring Function Parameters

This is where destructuring really earns its keep. Functions can declare exactly the fields they care about:

Destructure in parameters script.js

function greet({ name, role = "user" }) {
  console.log(`Hi, ${name} (${role})`);
}

greet({ name: "Ada", role: "admin" });  // "Hi, Ada (admin)"
greet({ name: "Lin" });                  // "Hi, Lin (user)"

▶ Preview: console

You can also default the whole parameter to {} so the function doesn’t crash on a missing argument:

Default empty object script.js

function logUser({ name = "anonymous", age = 0 } = {}) {
  console.log(`${name} is ${age}`);
}

logUser({ name: "Ada", age: 36 });
logUser();   // doesn't crash

▶ Preview: console

Try It Yourself

Exercise

Destructure an HTTP response

Difficulty 2/5~3 min

Given the `response` object below, use a **single destructuring statement** to pull out `status`, the body's `id`, and the body's `name`. Rename `id` to `userId` while destructuring. Then log the three values. Expected output (in some form): ``` 200 42 "Ada" ```

solution.js

const response = {
  status: 200,
  body: { id: 42, name: "Ada", email: "a@b.c" },
};
// your code here
console.log(status, userId, name);

4tests will run

💡 Show hint

`const { status, body: { id: userId, name } } = response;`

✅ Show solution

const response = {
  status: 200,
  body: { id: 42, name: "Ada", email: "a@b.c" },
};
const { status, body: { id: userId, name } } = response;
console.log(status, userId, name);

Up Next

A peek behind the curtain — every object in JavaScript has a prototype.

JavaScript Prototypes →