Skip to content

What is object destructuring in JavaScript?

What does "object destructuring" mean and what is the result of a destructuring operation?

Say you have an object with some properties:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 57
}

You can extract just some of the object properties and put them into named variables:

const { firstName, age } = person

Now we have 2 new variables, firstName and age, that contain the desired values:

console.log(firstName) // 'Tom'
console.log(age) // 54

The value assigned to the variables does not depend on the order we list them, but it's based on the property names.

You can also automatically assign a property to a variable with another name:

const { firstName: name, age } = person

Now instead of a variable named firstName, like we had in the previous example, we have a name variable that holds the person.firstName value:

console.log(name) // 'Tom'
→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about js: