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”.
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.
Looking for a job in Amsterdam?
I work for Sytac as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands that works for a lot of renowned companies in banking, airline, government and retail sectors. You can think of companies like ING, KLM, Deloitte, Ahold Delhaize, ABN AMRO, Flora holland and many more.
From a personal opinion Sytac really sets itself apart with their client portfolio, but also with how they take care of their employees. They do really care about the wellbeing of their employees. Apart from a good salary (50K-75k), you will notice this in regular meetings with the consultant managers but also by the amount of events they organise and all the other perks they offer to keep all employees happy.
If you think you have what it takes to work with the best, send me an email on [email protected] and i’m happy to tell you more.