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'
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025