JAVASCRIPT ES6 DESTRUCTURING AND A FEW USEFUL TRICKS

This is just a quick intro on Destructuring assignment in ECMAScript 6 (or as most developers call JavaScript ES6) as there are plenty of excellent resources on the topic; for example:
– Exploring ES6, Chapter 10. Destructuring
– MDN Destructuring assignment.

Basically destructuring enables the extraction of values from objects and arrays into named variables; I like to think of it as the opposite of constructing an object or array literal. For example, a point object can be declared like this:

const point = {
    x: 1,
    y: 2
  }

Which is shorthand for

const point = {}
  point.x = 1
  point.y = 2

We can extract or destruct the x and y values from the point object with the following syntax:

const {x: copyOfX, y: copyOfY} = point

So now we have two variables named copyOfX and CopyOfY with the values 1 and 2 respectively. Alternatively if the name of the extracted variable is the same as the object parameter name then the syntax can be more concise:

const {x, y} = point

This is similar to the shorthand for constructing an object form variables:

const x = 1
const y = 2
const point = {x, y}

NAMED FUNCTION PARAMETERS

Imagine a function that requires a long list of parameters.

function foo (parameter, anotherParameter, someOtherParameter) {
  // ... do something
}

The obvious problem with such a function is the difficulty of remembering the ordering of the parameters when calling the function. A simple approach to this problem is to wrap the parameters in an object and re-write the function to expect it’s argument from this object:

function foo (options) {
  console.log(options.parameter)
  console.log(options.anotherParameter)
  console.log(options.someOtherParameter)
}

However, we can rewrite the above the function to deconstruct it’s single argument into named variables and do away with the annoying options access construct.

function foo ({parameter, anotherParameter, someOtherParameter}) {
  console.log(parameter)
  console.log(anotherParameter)
  console.log(someOtherParameter)
}

DEFAULT VALUES

Another nice feature of destructuring is the ability to define default parameters, especially for deeply nested structures. For example the results field from an elastic search query is buried inside the following object:

{
  data: {
    hits: {
      hits: {
        results: []
      }
    }
  }
}

A plausible scenario is the requirement of a function that performs an elastic search query and either returns the results, or if nothing is found, an empty array. If we were to program defensively and check that each nested value exists using pre-ES6, the code might look something like this:

var results;
if(data && data.hits && data.hits.hits && data.hits.hits && data.hits.hits.results) {
  results = data.hits.hits.results;
} else {
  results = [];
}

However using destructuring assignment, it can be condensed to:

const {data: {hits: {hits: results = []} = {}} = {}} = response;

This looks much nicer. One gotcha you need to be aware of here, is the necessity of giving the entire object a default value of an empty {} object — this is because the destructuring algorithm can’t cast an undefined value to an object.

SUMMARY

I’ve only listed a few use cases for destructuring. If you wish to learn more, then please do look at the references listed in the beginning of the post. Thanks for reading.

If you found this article useful/inspiring tap the 💚 so others can enjoy it, too.

Thanks for your time! Follow me on Twitter and LinkedIn.