What is a destructuring assignment in JavaScript?

Destructuring assignments were introduced in JavaScript as part of ES6ECMAScript 6. It enables destructuring array or object elements into separate variables more quickly and efficiently.

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.

Illustration of array destructuring

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 array
console.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 operator
console.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 required
console.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.

Relevant Answers

Explore Courses

Free Resources