Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
The ECMAscript 6 specification introduced a new syntax which makes it easier to get values out of arrays and objects. We call this syntax “destructuring”.
Photo by Dayne Topkin on Unsplash
The destructuring assignment syntax with Arrays
The destructuring assignment syntax allows you to easily get values out of arrays and objects while using an array or object literal like syntax. This syntax is very short and very easy to read.
Without using the destructuring syntax getting multiple values out of an array can be quite cumbersome. You would do something like this:
With the destructuring assignment syntax this can be written like this:
Pretty neat, right? Let me explain what’s happening. Basically this syntax automatically assigns the value of the corresponding indexes to a variable. You can decide wether you assign the values to existing variables or you can declare new variables by simply adding var, let or const in front of the assignment.
There are a few gotcha’s:
You can skip items:
This syntax also works with nested arrays:
You can combine the destructuring syntax with the rest syntax:
The destructuring assignment syntax with Objects
Just like with Arrays, Objects have a similar destructuring syntax. While getting values out of objects usually is less cumbersome, the destructuring syntax can definitely be of help.
Destructuring with Objects helps you assigning property values to variables. It works in a similar way as with Arrays. You specify the to be binded property, followed by the variable you want to bind the value to. This can look like this:
You can even further optimise this by using a shorthand syntax if you don’t mind that the variable name and the key name are the same. The above can then be written like this:
Just like with Arrays you can also use this syntax with nested objects:
Destructuring syntax use cases
It’s good that you now know what you can do with the destructuring syntax. But apart from just a shorter way to write things there are a few other use cases where this syntax comes in handy.
The destructuring syntax can help when accepting parameters in functions. Instead of requesting specific arguments in a specific order it would be a lot easier to just pass one object and then expose only the needed properties using the destructuring syntax:
Another thing where it can be nice to use the destructuring syntax is when you use functions that return multiple values:
And just as with arrays, you can also do this with objects:
Last but not least the destructuring syntax is very helpful when importing from CommonJS modules. Most likely the module exports more than you need and with this syntax you can avoid cluttering the namespace.
Conclusion
The descructuring syntax helps you to write cleaner code. Mixing it with other es6 beauty’s make’s it even more powerful. It’s now available in almost all latest browsers without needing any polyfills or transpiling. I would highly recommend using it, if you don’t use it already.
ES6: Understanding the destructuring assignment syntax in Javascript was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.