Destructuring JavaScript Objects

Destructuring is a huge part of ES6. This post is a simple introduction to what destructuring actually is and how to destructuring JavaScript Objects.

Along with arrow functions, let, and const, “destructuring” is probably something you’re going to be using every single day. I find it to be extremely useful whether I’m writing client side or Node code.

so, What does destructuring mean?

It’s a JavaScript expression that allows us to extract data from arrays, objects, maps and sets into their own variable. It allows us to extract properties from an object or items from an array, multiple at a time.

Extracting data from the object

Let’s take a look at what problem JavaScript destructuring really solves.

Sometimes you need top level variables like so, consider the following object describing a car:

const car = {
  model: ‘E30,
  type: ‘saloon’
  manufacturer: ‘BMW’,
  color: ‘blue’,
  horsepower: ‘1800cc’,
};
const model = car.model;
const manufacturer = car.manufacturer;

…so for every property you get the point , repeat, repeat, repeat ….

where you need to make a variable from something that is inside of an object or inside of an array.

Instead we do the following:

We destructure them in a single line

const {model, manufacturer} = car;

[alert type=yellow ]
Caution: Just be careful Curly bracket on the left of the equals sign?

That is not a block. That is not an object.

It’s the new destructuring syntax.

[/alert]

What it really means ? ↓

Give me a variable model, a variable manufacturer, and take it from the car object.

Simple as that 😛

we are taking the model and manufacturer properties and putting them into two new variables that will be scoped to the parent block.

That’s really handy in many use cases. This is just one nested level, but for example, in React.js often you want to use destructuring because the data is so deeply nested in props or state.

Usage is API’s

Let’s suppose we have some deeply nested data like we might get back from a JSON api:

const profile = {
  first: 'Panayiotis',
  last: 'Georgiou',
  links: {
    social: {
      twitter: 'https://twitter.com/panay_georgiou',
      facebook: 'https://facebook.com/panayiotisgeorgiou.net',
    },
    web: {
      cv: 'https://www.panayiotisgeorgiou.com'
      blog: 'http://www.panayiotisgeorgiou.net'
    }
  }
};

The old way

const twitter = profile.links.social.twitter;

const facebook = profile.links.social.facebook;

…this get’s annoying 🙂

The new way much better!

const { twitter, facebook } = profile.links.social;
console.log(twitter, facebook); // logs the 2 variables

Notice how we de-structure profile.links.social and not just profile?

That is important because we are de-structuring a few levels deep.

That’s it for now.

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.