Arrays and objects destructuring in JavaScript

Assume, that we have an object:

const obj = {
  a: 'a',
  b: 'b',
};

And we want to get b property. We have a simple way:

obj.b; // 'b'
// or
obj['b']; // 'b'

but, we can use a JavaScript ES6 thing called destructuring - but what’s this?

Destructuring assignment

Most used JavaScript data structures are Array and Object.

Array let us store data in ordered collection, syntax looks like:

const student = ['John', 'Doe'];

Object allow us to create an entity, where we can store data by keys, for example:

const student = {
  firstName: 'John',
  secondName: 'Doe',
};

And when we’ll need to use Array or Object, in most common cases, we’ll need all data or only some of them.

The New ES6 feature gives us syntax sugar which allows us to in an easy way get only fields that we’ll need. It works really well when we’re facing big objects, or arrays and need only a few fields.

Object destructuring

Let’s get back to our example student object.

const student = {
  firstName: 'John',
  secondName: 'Doe',
};

A classic way of getting one of the field value is

student.firstName; // John
// or
student['firstName']; // John

The new syntax allows us to do it in my opinion - a cleaner way.

const { firstName } = student;
firstName; // John

The same thing we can do with secondName

const { firstName, secondName } = student;
firstName; // John
secondName; // Doe

One what we need to remember is that we need to know what keys objects store.

Also, it isn’t a problem to change the key name on the fly.

const { first: firstName, second: secondName } = student;
first; // John
second; // Doe

But what if we will have a more complex structure? Maybe like this?

const student = {
  firstName: 'John',
  secondName: 'Doe',
  parents: {
    father: {
      firstName: 'Joe',
      secondName: 'Doe',
    },
    // ...
  },
};

To get father field, we can as in old way - do it in dot or bracket notation or new way

const { parents: { father: { firstName } } = student;
firstName // Joe

Summary

Getting variables using destructuring makes our life a bit easier. It looks nicer than the normal way and makes code reading easier.

For now, I’m using them more than the old way, and what do you think about it?