DEV Community

Josh Ellis
Josh Ellis

Posted on

Cleaner Code with JavaScript Destructuring

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'
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

...which is identical to this:

// ...
const cost = data.cost
console.log(`The cost is ${cost}`)
// => 'The cost is 25'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

...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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
joshanaba profile image
Josh Anaba

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.

Collapse
 
imjoshellis profile image
Josh Ellis

Awesome! I'm glad it was helpful!

Collapse
 
israel1116 profile image
israel1116

Awesome explication.

Collapse
 
gbenga profile image
Gbenga Ojo-Aromokudu

I've been avoiding destructuring for a while despite knowing it exists, but this just convinced me to start using it 🔥

Collapse
 
imjoshellis profile image
Josh Ellis

Glad to hear it -- Once you start using it, it's a lot simpler and more useful than you expect!