Object destructuring

JavaScript course · Advanced · Lesson 24/100

Learn to extract object properties into variables with a shorthand.

Object destructuring

Destructuring is a shorthand for pulling an object's properties into variables in one line. You write variable names inside curly braces; JavaScript finds the property with the same name and copies its value.

For example, const { name } = user takes the value of user.name into a name variable. It is the same as const name = user.name, only shorter and clearer.

The same-name rule

In destructuring, the variable name must be the same as the property name. When you write const { title } = book, JavaScript looks for the book.title property. If you want a different variable name, you rename with a colon (covered later).

You can pull several properties in one line, separated by commas: const { name, email, age } = user. Order does not matter; each name is independent.

Exercise Extract user details

Create an object called user with name and email properties. Use destructuring to pull name and email into variables. Then log each one separately with console.log.

Show example solution

const user = { name: "Alex", email: "alex@example.com" };
const { name, email } = user;
console.log(name);
console.log(email);

Test yourself

What does `const { title } = book` create?
- A new object called `book`
- A variable called `title`
- It deletes the `book.title` property
- An array called `title`
Show answer

A variable called `title` — Correct. The value of `book.title` is copied into a `title` variable.

Complete the object destructuring

const user = { name: "Alex", email: "alex@example.com" };
const { name, email } = ____;
console.log(name, email);

Show answer

const user = { name: "Alex", email: "alex@example.com" };
const { name, email } = user;
console.log(name, email);

Which is valid object destructuring syntax?
- `const [name] = user`
- `const { name } = ( user )`
- `const ( name ) = user`
- `const { name } = user`
Show answer

`const { name } = user` — Correct. Curly braces connect to the source object with an equals sign.
Match the concepts

destructuring

Shorthand for extracting properties
curly braces

Starts the object pattern
same-name rule

Variable matches property name

Object destructuring