Destructuring in JavaScript means copying the values of an array or the properties of an object to a variable. Destructuring does not imply destruction. It is not the case because the array or object you could copy the values from is not modified. This is a JavaScript expression that was introduced in ECMAScript 2015/16. In this article, you will learn how to destructure values in an array, properties in an object, and other uses of destructuring.
Basic destructuring in arrays
Destructuring makes it easier to access the values of an array. For example, If you want to access values in an array without destructuring,
const array = ["deer","greet","heyy"];
const arr = array[0];
const arr1 = array[1];
console.log(arr); //deer
console.log(arr1); //greet
In this example, you assigned the values by using their index. But with destructuring, this is how it will be.
const array = ["deer","greet","heyy"];
const [arr,arr1,arr2] = array;
console.log(arr); //deer
console.log(arr1); //greet
So you could assign the values of the array variable to the new variables all at the same time.
Swapping values In arrays, you could swap the values in a variable by switching places. Usually, you would need a third variable to achieve this.
Here's an example:
let arr = "deer";
let arr1 = "greet";
console.log(arr); //deer
console.log(arr1); //greet
let newArr = arr1;
//assigning the value "greet" to a new variable "newArr"
console.log(newArr); //greet
arr1 = arr;
//assigning the value "deer" to the variable "arr1"
arr = newArr;
//assigning the value "greet" to the variable "arr"
console.log(arr1); //deer
console.log(arr); //greet
But with destructuring, you can do that without a third variable.
const array = ["deer","greet","heyy"];
let [arr,arr1,arr2] = array;
console.log(arr); //deer
console.log(arr1); //greet
[arr,arr1] = [arr1,arr];
//using destructuring to swap the values
console.log(arr); //greet
console.log(arr1); //deer
Skipping Values
You could also skip values when assigning values to a variable. You do that by adding an extra comma to the array you are destructuring the values to. The comma indicates the index of the value.
In this example, a comma at the assignment's beginning indicates the array's first value.
const array = ["deer","greet","heyy"];
const [,arr1,arr2] = array;
//skipping the first value and using only the second and third
console.log(arr1); //greet
console.log(arr2); //heyy
Using array-destructuring with iterators
Array destructuring works on all iterable values. You can array-destructure any iterable value. Examples of such iterables are strings, sets, and so on.
For example, using array destructuring on a string,
const [a,b] = "abc";
console.log(a); //a
console.log(b); //b
example of using array destructuring on a set,
const array = ["deer","greet","heyy"];
const exampleSet = new Set(array);
const [arr,arr1,arr2] = exampleSet;
console.log(arr); //deer
console.log(arr1); //greet
console.log(arr2); //heyyy
Array-destructuring works on iterable values only. Non-iterable values would give an error. Examples of non-iterables are null and undefined.
Also, javascript would return undefined if the array you are destructuring is empty.
for example,
const [arr,arr1] = [];
console.log(arr); //undefined
console.log(arr1); //undefined
Here is another scenario:
const array = [];
const [arr,arr1] = array;
console.log(arr); //undefined
console.log(arr1); //undefined
Default values in arrays
When writing code, there are cases where you may be unsure of the values you are assigning. If that value is undefined, you would need a default value. Destructuring makes it easier for you to assign default values to an array.
See this example:
const array = ["deer","greet","heyy"];
const [arr,arr1,arr2,arr3] = array;
console.log(arr); //word
console.log(arr1); //fang
console.log(arr2); //grey
console.log(arr3); //undefined
To assign a default value to arr3
const array = ["deer","greet","heyy"];
//To assign a default value to arr3
const [arr,arr1,arr2,arr3="mirrors"] = array;
console.log(arr3); //mirrors
With that, you can assign a default value to a variable while destructuring.
Using the rest syntax
Destructuring in Javascript also uses the rest syntax. It is called the "rest" syntax as it covers the rest of the items in an array. The syntax is ... then the name of the array created. The name "rest" that appears after the three dots is optional. You could use another name after the three dots.
Syntax: (...rest)
When using the rest syntax, always make sure it comes last after other items, as it will give an error if you do otherwise.
Here's an example of rest in an array:
Using the previous example,
const array = ["deer","greet","heyy"];
const [arr, …newArr] = array;
console.log(arr); //deer
console.log(newArr); //[ greet, heyy]
As you can see, the newArr array was created from the old array.
Object destructuring
With object destructuring, you can retrieve property values from an object. Objects take a different syntax from arrays when assigning values to variables.
To assign values without destructuring would be:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
//example of the object
//To access the object property
const words = obj.word;
const boolean = obj.bool;
console.log(words) //dataTypes
console.log(boolean) //true
This is how to assign values to objects using destructuring.
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
//example of the object
//To access the object property
const { word, bool } = obj;
console.log(word) //dataTypes
console.log(bool) //true
This makes value assignments easier.
Note: The order does not matter in objects, and you should use the same name.
This would result in the following error:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
const { words, boolean } = obj;
console.log(words)
console.log(boolean)
//ReferenceError: obj is not defined
This is because JavaScript does not store the words and boolean variables as references for the object, hence the error.
However, you can assign different names to the values while destructuring.
Assigning different names to the object properties
You can assign different names to the object properties to access them.
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
const { word: words, bool: boolean } = obj;
console.log(words) //dataTypes
console.log(boolean) //true
Using object destructuring on arrays You can use the index of an array as a "property" when you apply object destructuring to arrays.
const {0:arr, 1:arr1, 2:arr2} = ["deer","greet","heyy"];
console.log(arr); //deer
console.log(arr2); //heyy
Initial declaration of variable
In objects, you could declare a variable initially before you assign a value to it.
let word;
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999 };
({ word } = obj);
console.log(word); //dataTypes
Note: during an assignment, use parentheses, or JavaScript would see it as a block function and return a syntax error.
Using the rest syntax in objects
You could use the rest syntax in an object. Like in arrays, the rest syntax comes at the end and covers the remaining properties in an object.
Here's an example:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
//example of the object
//To access the object property
const { word: words, ...others } = obj;
console.log(words); //dataTypes
console.log(others); //{ num:0001, bool:true, bigInt:2.99999999 }
Note: Like in arrays, javascript would return undefined when it is set to destructure an empty object. Object destructuring will return a type error when the values are undefined and null.
Default values in objects
In an object, you could assign default values to variables when destructuring. If a property was not in the object, you could create a variable and assign a default value to it.
For example,
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999, };
//example of the object
//To access the object property
const { word, bool, num, str="street" } = obj;
console.log(word); //dataTypes
console.log(str); //street
In this example, the default value street was assigned to the str variable while destructuring.
Summary
That sums up the main features of destructuring in JavaScript. I hope you learned something from this. If you liked this piece, you could share it with a friend or leave a comment. Thanks for reading. Need more information? Check out this guide for more on destructuring in javascript.