Javascript Destructuring Assignment: (Extract variables from arrays and objects in JavaScript)

Learn how to use the ES6 JavaScript destructuring syntax.

Javascript Destructuring Assignment is a way to extract values from arrays and object and store them in to individual variables. In this tutorial you’ll learn how the Javascript Destructuring Assignment works for both arrays and objects. You’ll learn how to extract values from these data structures and put them in to your own variable names. The Javascript Destructuring Assignment feature was added in the ES6 update a few years ago so it’s not that much of a new feature but it’s possibly one of the more overlooked parts of JavaScript but it’s something that can make your code neater and cleaner. In the tutorial you’ll first lean about how to destructure an array into it’s individual values and store these in variables. Also, you’ll learn some of the tips and tricks to skip over values or extract just one particular value from an array. You’ll then learn about destructuring objects which is a little different to arrays but equally as useful. You can extract properties from an object by specifying the name of the property you need from the object and storing this value in a variable name. There also some tricks that can be done with objects to only extract certain values and ‘throw away’ the rest of the object. Javascript Destructuring Assignment is something that is very much encouraged by standards such as the AirBnB style guide (https://github.com/airbnb/javascript) mainly for the reason that you can use it without mutating the original array or object. So when working in a Junior Developer position you may be asked to use this technique so that your code is conforming to those standards.