What is a destructuring assignment in JavaScript?
Destructuring assignments were introduced in JavaScript as part of
In destructuring, the left-hand side of the assignment operator contains variable(s) that will store the destructured values. In contrast, the right-hand side has the array or object, which is destructured.
How to destructure an array
If individual elements of an array need to be stored independently, it can be cumbersome to access each element with the standard method.
Instead, the following method can be used.
Code
Example 1
function nextFour(num){return [num, num+1, num+2, num+3, num+4]}let result = nextFour(3);console.log(result);console.log(result[0], result[2]); //accessing individual elements[a, b, c] = result; //destructuring the result arrayconsole.log(a,b,c);
Explanation
In the code above, the nextFour function returns an array that contains the next four numbers starting from the number passed as an argument.
In line 8, the elements of the resulting array are accessed individually using indices.
However, line 10 presents a way to destructure the array. Since only three variables were provided, only the first three elements were parsed to a, b, and c.
Example 2
result = [3, 4, 5, 6, 7];[a, b, c, ...x] = result; //using the rest operatorconsole.log("a: ", a);console.log("b: ", b);console.log("c: ", c);console.log("x: ", x);
Explanation
The code above provides more examples of how to destructure arrays.
When only certain elements need to be stored separately and the rest can be grouped together as part of a list, the rest operator (...) is used.
In the example in line 3, variables a, b and c store the elements at array indices 0, 1, and 2 respectively, and the variable x stores the remaining list of numbers.
Example 3
[num1, num2, num3, num4] = [10, 20, 30]; // using more variables than requiredconsole.log("num1: ", num1)console.log("num2: ", num2)console.log("num3: ", num3)console.log("num4: ", num4)
Explanation
In this example, the number of items to unpack from the array was fewer than the number of variables present.
In such a case, the remaining variable, num4, is not assigned a value from the array and is assigned undefined.
Example 4
array = [1, 2, 3, 4, 5]const [a, , b, ,c] = array;console.log("a: ", a)console.log("b: ", b)console.log("c: ", c)
Explanation
This example shows how certain values of an array can be ignored using ,.
How to destructure an object
Objects are destructured in a manner similar to arrays.
Code
Example 1
const student = {id: 23,year: "senior",};const {id, year} = student;console.log(id);console.log(year);
Explanation
In the code above, the object student is parsed to the two corresponding variable names.
Example 2
const obj = {x: 100, y: true, z: "hello"};const {x: aa, y: bb, z: cc} = obj;console.log(aa);console.log(bb);console.log(cc)
Explanation
In this example, the object, obj, is destructured and the variable values are replaced such that aa, bb and cc refer to the values from obj.
Free Resources
