Cleaner Code with JavaScript Destructuring

#javascript #beginners

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"