I think the ES2015 destructuring syntax is pretty cool. It might not grab the headlines like Promises, Generators or the class syntax, but I find it really useful. It’s also surprisingly detailed when you read into it.
The only shame is that most of the examples I’ve found focus on just the syntax and not real life usage. Like this one from the MDN docs:
var a, b; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20
Luckily I have a real life use case for destructuring for you right here.
One of my favourite uses for destructuring is when using
Promise.all to wait for a number of asynchronous tasks to complete. The result of
Promise.all is returned as an array and you would normally iterate over it or pick out the results you need by hand.
But, if you know what objects you are expecting to receive you can use parameter destructuring to make your life easier and your code both prettier and more descriptive by naming the parameters up front. Let’s see an example.
Let’s say you want to compare two of BrewDog’s delicious beers, something I find myself doing in real life all the time. We can get the information about them from Sam Mason’s gloriously named Punk API. To implement this we use the
fetch API to get the data on each beer from the API. We need both requests to resolve before we can compare the beers.
Let’s take a look at the code:
We can tidy that Promise up with parameter destructuring:
We know we’re getting two beers as a result and the way this example is constructed we even know which beer is which. So we can use the parameter destructuring to name the beers in the array instead of plucking them out.
Ok, this may still seem like a made up example, but it certainly is closer to real life. The first time I found myself using this technique was when writing about Service Workers for 12 Devs of Christmas. It came in handy when writing the method
returnFromCacheOrFetch which implements the “stale while revalidate” caching method using the
The method opens up a named cache and tries to match the current request against the cache. Before returning, it then kicks off a
fetch request for the requested resource, caching the result. Finally if the request was found in the cache the cached response is returned, otherwise the new fetch request is returned. You can read more about it in the original blog post.
The final code looked like this:
In this case I needed both the result of
cache.match(request) in order to perform the background fetch and return the cached response. I drew them together using
Promise.all and destructured the resulting array keeping the code tidy and descriptive.
In these examples, parameter destructuring allows us to name the results we expect to get from the resolved Promises we pass to
Promise.all. In fact, anywhere we use parameter destructuring, particularly with arrays, it allows us to name objects early and more descriptively. This in turn makes the code more readable and more maintainable in the long term.
Are there other places in your code that you’ve found the ES2015 destructuring syntax helpful? I’d love to know how you use the feature too, so please share your destructuring tips with me on Twitter.