Destructuring is a really useful way to get named variables out of an object in JavaScript and can make your code more readable.
Imagine we had a data
object that looked like this:
const data = {
color: 'red',
cost: 25,
name: 'balloon'
}
Without destructuring, we could access the values like this:
// ...
console.log(`The cost of the ${data.color} ${data.name} is ${data.cost}`)
// => 'The cost is 25'
Even with short variables, that's already starting to feel cluttered.
Basic destructuring would look like this:
// ...
const { cost } = data
console.log(`The cost is ${cost}`)
// => 'The cost is 25'
...which is identical to this:
// ...
const cost = data.cost
console.log(`The cost is ${cost}`)
// => 'The cost is 25'
The big win with destructuring is when you want to pull multiple values off an object:
// ...
const { color, cost, name } = data
console.log(`The cost of the ${color} ${name} is ${cost}`)
// => 'The cost of the red balloon is 25'
...instead of this:
// ...
const color = data.color
const cost = data.cost
const name = data.name
console.log(`The cost of the ${color} ${name} is ${cost}`)
// => 'The cost of the red balloon is 25'
What if you don't like the name of a key? You can just change it:
const data = {
color: 'red',
cost: 25,
name: 'balloon'
}
const { color, cost, name: itemName } = data
console.log(`The cost of the ${color} ${itemName} is ${cost}`)
// => 'The cost of the red balloon is 25'
What about nested objects? If you want to access the items from just one key, you can put the key on the right side of the equal sign:
const data = {
user: {
name: 'Josh',
email: 'josh@imjoshellis.com'
}
}
const { name, email } = data.user
console.log(`The email of ${name} is ${email}`)
// => 'The email of Josh is josh@imjoshellis.com'
What if you want values from multiple levels? No problem:
const data = {
user: {
name: 'Josh',
email: 'josh@imjoshellis.com'
activity: {
status: 'inactive',
lastLoggedIn: 'yesterday'
}
}
}
const { name, activity: { status, lastLoggedIn }} = data.user
console.log(`${name} logged in ${lastLoggedIn} and is currently ${status}`)
// => 'Josh logged in yesterday and is currently inactive'
What if the key doesn't have a value? You can set a default which will get assigned if the value of the key is undefined:
const data1 = {}
const { undefinedKey = "default value" } = data1
console.log(undefinedKey)
// => "default value"
const data2 = { definedKey: "provided value" }
const { definedKey = "default value" } = data2
console.log(definedKey)
// => "provided value"
This was a quick intro into how destructuring works in JavaScript. I hope you were able to learn something!
This article (not written by me) goes into more depth if you're looking for even more examples and explanations: https://dmitripavlutin.com/javascript-object-destructuring/#2-extracting-a-property
Top comments (5)
I learnt object destructuring earlier but was unable to wrap my head around it ,not up till now, this was super helpful, goodbye to cluttered code.
Awesome! I'm glad it was helpful!
Awesome explication.
I've been avoiding destructuring for a while despite knowing it exists, but this just convinced me to start using it 🔥
Glad to hear it -- Once you start using it, it's a lot simpler and more useful than you expect!