JavaScript - Destructuring Assignment 
Tags: javascript, challenge, todayilearned, dailypost
Published: 2020-12-12 18:57:52

_Today, We will learn how to use the ES6 destructuring assignment that allows us to destructure an array into individual variables_.

ES6 provides a new feature called destructing assignment that allows you to destructure properties of an object or elements of an array into individual variables.

**_Array destructuring_**

Let's take an example of a function that returns an array of subject list as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usvl6fzm1inz70h8oh5p.PNG)

The following invokes the getSubjectList() function and assigns the returned value to a variable:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c216qmbwhtvz563r4tzi.PNG)

* Prior to ES6, there was no direct way to assign the elements of the returned array to multiple variables such as x, y and z.
* To get the individual subject to a variable, We need to do like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ba8e635vobjljd1u062m.PNG)

Fortunately, From ES6, We can use the destructing assignment as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ynwqsu8wyiyvsfixcnh1.PNG)

The variables x, y and z will take the values of the first, second, and third elements of the returned array.

Note that the square brackets [] look like the array syntax but they are not.

_If the getSubjectList() function returns an array of two elements, the third variable will be undefined, like this:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gw3px6x6wqjqht543e47.PNG)

_In case the getSubjectList() function returns an array that has more than three elements, **the remaining elements are discarded.**_

_For example:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wpsso8uurlo2rnivfqpj.PNG)

**_Array "Destructuring Assignment" with "Rest" Parameter_**

+ It’s possible to take all remaining elements of an array and put them in a new array by using the rest syntax (...):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oyyss6yyjvy3m2jqp34z.PNG)

+ The variables x and y receive values of the first two elements of the returned array. 
+ The args variable receives all the remaining arguments, which are the last two elements of the returned array.

---

**_Setting default values_**

_For Example:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jvz8lvnzjpiqon7i0v5o.PNG)

How it works:

* First, declare the getValues() function that returns an array of two numbers.
* Then, assign the dataValue variable to the returned array of the getValues() function.
* Finally, check if the third element exists in the array. If not, assign the value 0 to the thirdItem variable.

*_It’ll be simpler with the destructuring assignment with a default value:_*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t3gyiimzwcms1pes4qzi.PNG)

*_If the getData() function doesn’t return an array and you expect an array, the destructing assignment will result in an error._*

_For example:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c6n7kzpduhyhd3h4mpja.PNG)

**Uncaught TypeError: getData is not a function or its return value is not iterable**

_A typical way to solve this is to fallback the returned value of the getData() function to an empty array like this:_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y84whfe4sai969ncb4zo.PNG)

---

**_Summary_**

* The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
* We can set user-defined default values if array has returned null or variable has a undefined.

---