ES6: Understanding the destructuring assignment syntax in Javascript

Luuk Gruijs
Jun 19, 2018 · 3 min read

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 , or 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 luuk.gruijs@sytac.io and i’m happy to tell you more.

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Luuk Gruijs

Written by

Dev lead @ Founda. We are hiring: https://jobs.founda.com/

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store