Object Destructuring in Javascript

In the previous article we learned about array destructuring, now let's talk object destructuring. In most cases, it's going to be the same as array destructuring but there are a few additions to it.

Object Destructuring - Basic Syntax

Let's say we have an object about Tom the cat 🐈

const tom = {
  type: 'animal',
  species: 'cat',
  breed: 'domestic shorthair cat',
  'best friend': 'Jerry'
};

Imagine you want to pull out the tom.species & tom.breed and put them into their own variables. Let's do that:

const { species, breed } = tom;

Here species would be cat & breed would be domestic shorthair cat. And if you want to split the other properties into variables as well then you can either do the same thing or use the rest operator to store all the leftover key-value pair into another object. Let's see that by an example:

const {
  species,
  breed,
  ...other
} = tom;

Now other would be an object containing type & best friend and their respective values.

// 👇 console.log(other) 👇
{
  "best friend": "domestic shorthair cat",
  "type": "animal"
}

Let's say you want to store the value of the property best friend into a variable rival:

const {
    'best friend': rival
} = tom;

// Now, on logging rival to the console
// 👇 console.log(rival) 👇

"Jerry"

Providing default value

Suppose if for some reason the property type is missing from the object tom, then this is how we would provide a default backup value otherwise, we would get undefined as the value for type

// imperative style
const type = tom.type !== undefined ? tom.type : 'animal';

// declarative style with object destructuring
const {
  type = 'animal'
} = tom;

The latter one looks easy, right?

Assignment Destructuring

Destructuring is more about assignment than declaration, what it means is that you can declare the variable before destructuring.

let species, breed;

({
  species,
  breed
} = tom);

The parenthesis looks a bit odd, but this is the syntax we have to deal with. However, if you reference the object to another variable, you can remove them:

let myCat = tom;
let species, breed;

myCat = {
  species,
  breed
} = tom;

Object Default Assignment

Suppose the API which we are using to fetch the tom object is having a rough day and it returns undefined or null instead of the tom object, then on calling any property from the object will throw a type error. I don't like errors, so if I have to prevent the code from throwing an error, I would simply use a default of an empty object.

function tom(){
  return;
}

const {
  breed
} = tom() || {};

But since there is nothing that tom() is returning we would still get undefined for breed. Fortunately, we now know that we can also provide a default value:

const {
  breed = 'domestic shorthair cat'
} = tom() || {};

It is a good practice to include those default values.

What about Nested Objects?

Let's tweak the tom() to create a nested object:

function tom(){
  return {
    type: 'animal',
    species: 'cat',
    breed: 'domestic shorthair cat',
    friends: {
       first: 'Jerry',
       second: 'Spike',
       third: 'Butch Cat'
    }
  };
}

Now, this is how you would destructure the nested object's properties:

const {
  friends: {
    first,
    second,
    third
  }
} = tom();

Now if you log them to the console:

/*
  first 👉  "Jerry"
  second 👉  "Spike"
  third 👉  "Butch Cat"
*/

Nested Array & Objects

A more intuitive approach to adding a list of friends to the function tom() would be to use an array instead of an object.

function tom(){
  return {
    type: 'animal',
    species: 'cat',
    breed: 'domestic shorthair cat',
    friends: [
       'Jerry',
       'Spike',
       'Butch Cat'
    ]
  };
}

This is how you would destructure friends array:

const {
  friends: [
    first,
    second,
    third
  ]
} = tom();

Here first would be Jerry, second would be Spike & third would be Butch Cat. Now you easily destructure any complex object or array or a combination of both.

---

That's all about the object destructuring if there's something you would like to talk about you can ask me in the comments or, you can directly reach out to me on Twitter @AyushCodes

If you like this, I'm sure you would love to read more informative articles like this. I would recommend you to subscribe to my newsletter 🙌