Object Destructuring | joeyreyes.dev

June 28, 2019

This week continues to be pretty hectic. Aside from the office move, the gas has been off at our apartment for the last three days. No hot water, no stove or oven (i.e. no cooking unless it's in our instant pot), no laundry. It's been rough. But on we go with the coding blog.

Today I'm looking at Object Destructuring, which is similar to Array Destructuring, just for data objects.

Say you had a little bit of data you needed to access in a JavaScript object. Typically you would need to use dot notation to access the values by their keys and save them into top-level variables:

const car = {
  make: 'Toyota',
  model: 'Camry',
  color: 'Silver',
  year: 2001,
  mileage: 200000
};
const make = car.make;
const model = car.model;
console.log(make);
// expected result: "Toyota"

But that's a lot of lines of code. Instead, let's cut down on that repetitive, ugly code by using destructuring.

const car = {
  make: 'Toyota',
  model: 'Camry',
  color: 'Silver',
  year: 2001,
  mileage: 200000
};
const { make, model, color } = car;
console.log(make);
// expected result: "Toyota"

Object Destructuring is an elegant syntax for unpacking the data from a JavaScript object. It also works for nested data, which is what you'll typically be running into when you work with APIs or React props.

const restaurant = {
  name: 'Snarfs Sandwiches',
  type: 'Sandwiches',
  specialties: ['Italian Sub', 'Roast Beef'],
  links: {
    social: {
      twitter: '@SnarfHappens',
      facebook: 'SnarfsSandwiches'
    },
    web: {
      website: 'http://www.eatsnarfs.com/'
    }
  },
  locations: {
    colorado: ['Denver', 'Boulder'],
    texas: ['Austin', 'San Antonio']
  }
};

const { twitter, facebook } = restaurant.links.social;
console.log(twitter);
// expected result: "@SnarfHappens"

// Array Spread also works really nicely here!
const [ ...texasLocations ] = restaurant.locations.texas;
console.log(texasLocations);
// expected result: ["Austin", "San Antonio"]

You can also assign new variable names while you're destructuring your object:

const person = {a: 31, h: true};
let {a: age, h: hungry} = person;

console.log(age);
// expected result: 31
console.log(hungry);
// expected result: true

You can also also set default values for your variables:

const { height = 20, width = 10} = { height: 30 };

console.log(height);
// expected result: 30
console.log(width);
// expected result: 10

And lastly you can both reassign variable names and give them default values at the same time you're destructuring your object.

const { h: height = 20, w: width = 10 } = { h: 30 };

console.log(height);
// expected result: 30
console.log(width);
// expected result: 10

From MDN: The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

See more examples and documentation here.

More Spread Syntax

Read more about Spread Syntax, Destructuring, and Rest here: