In application programming its very common to come across cases where we get return values as objects or arrays from an API call and then for logic sake we need to store them into variables.so basically deconstruction steps require:
- Declare appropriate variables
- Access data from array or objects and assign to respective variables
Automatic Deconstruction feature in ES-6 helps in overcoming lot of this redundant coding stuff. As the name suggest we need to deconstruct a complex object say array or object into variables. Let’s compare the old way of deconstruction versus the new way
Old Style Deconstruction
<script type="text/javascript"> function returnComplexObject(){ return {id : 1 , name:"test"}; } function returnArray(){ return [1,2,3]; } //Fetch Data var data = returnComplexObject(); var id = data.id; var name = data.name; console.log(id); console.log(name); var arrayData = returnArray(); var value1 = arrayData[0]; var value2 = arrayData[1]; var value3 = arrayData[2]; console.log(value1); console.log(value2); console.log(value3); </script>
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">
Output:
1
Test
1
2
3
New Style Deconstruction
<script type="text/javascript"> function returnComplexObject(){ return {id: 1, name: “test"}; } function returnArray(){ return [1,2,3]; } //Fetch Data var data = returnComplexObject(); //Use curly braces for deconstructing objects let {id,name} = data; console.log(id); console.log(name); var arrayData = returnArray(); //Use rectangular brackets for deconstructing arrays let [value1, value2, value3] = arrayData; console.log(value1); console.log(value2); console.log(value3); </script>
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">
Output:
1
Test
1
2
3
Scenario 1:
When we need to leave out some values from target and copy only few values
Indices are very important for array deconstruction. If we need to deconstruct only the first and last value from array we still need to supply 3 sized arrays with 2 named variables and leaving one empty like below example
<script type="text/javascript"> function returnArray(){ return [1,2,3]; } var arrayData = returnArray(); //Use rectangular brackets for deconstructing arrays let [value1,,value3] = arrayData; console.log(value1); console.log(value3); </script>
Scenario 2:
When the object properties and variable names are not matching
Output:
1
Test
Scenario 3:
Providing default values for variables while deconstructing
<script type="text/javascript"> function returnComplexObject(){ return {id : 1 , name:"test"}; } function returnArray(){ return [1,2,3]; } //Fetch Data var data = returnComplexObject(); //Use curly braces for deconstructing objects let {id :id1 ,name : name1, someOtherVariable = 10 } = data; console.log(id1); console.log(name1); var arrayData = returnArray(); //Use rectangular brackets for deconstructing arrays let [value1, value2 = 10 ,value3] = arrayData; console.log(value1); console.log(value2); console.log(value3); </script>
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-5021110436373536"
data-ad-slot="9215486331">
Output:
1
Test
1
2
3