Understanding Array Destructuring in JavaScript

Destructuring is a concise feature in JavaScript that allows us to extract values from arrays or properties from objects, directly into named variables.

Basic syntax

Array destructuring uses square brackets ([]) on the left-hand side of the assignment to unpack values from iterables (e.g., array, string, map, set) into individual variables.

const numbers = [1, 2, 3, 4, 5, 6, 7];
 
// Destructuring assignment
const [first, second, third] = numbers;
 
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

In this example, the variables first, second, and third receive the values of the array numbers in order.

Get Alexandra Caulea’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It’s essential to note that in array destructuring, the value assigned to the variables depends on the order.

Skipping elements

We can skip elements in the array by leaving blank spaces between commas. In the example below, the second and third elements are skipped.

const colors = ['purple', 'lightblue', 'magenta', 'lightgreen'];
const [firstColor, , , lastColor] = colors;
 
console.log(firstColor); // "purple"
console.log(lastColor); // "lightgreen"

Default values

We can provide default values for variables if the value unpacked from the array is undefined:

let x;
let y;
const array = [0];
[x = 1, y = 7] = array;
 
console.log(x); // 0
console.log(y); // 7

In this example, x is set to the first element of the array, while y takes the default value of 7.

Swapping variables

Array destructuring makes it easy to swap values between two variables without using a temporary variable.

let num1 = 10;
let num2 = 20;
[num1, num2] = [num2, num1];
 
console.log(num1); // 20
console.log(num2); // 10

Rest operator (...)

We can use the rest operator (...) to gather the remaining elements into a new array.

const [first, ...rest] = [1, 2, 3, 4];
 
console.log(first); // 1
console.log(rest); // [2, 3, 4]

Nested array destructuring

We can also destructure nested arrays:

const array = [1, [2, 3, 4], 5];
const [a, [b, c, d], e] = array;
 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

Array destructuring in function parameters

We can destructure arrays directly in function parameters:

function displaySummary([name, age, location]) {
  console.log(`Name: ${name}, Age: ${age}, Location: ${location}`);
}
 
const user = ['Bob', 30, 'Copenhagen, Denmark'];
displaySummary(user); // Name: Bob, Age: 30, Location: Copenhagen, Denmark

Destructuring inside a for...of loop

We can combine array destructuring with for...of loops to iterate through arrays of arrays, making our code more readable.

const users = [
  ['Bob', 30, 'Copenhagen, Denmark'],
  ['Alice', 25, 'Munich, Germany'],
  ['Dan', 20, 'Rome, Italy'],
];
 
for (const [name, age, location] of users) {
  console.log(`${name} is ${age} and lives in ${location}.`);
}
 
// Bob is 30 and lives in Copenhagen, Denmark.
// Alice is 25 and lives in Munich, Germany.
// Dan is 20 and lives in Rome, Italy.

The old way of doing

Before destructuring, values had to be accessed one by one:

const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];
 
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Summary

Benefits of using array destructuring:

1. Improves code readability and reduces boilerplate code
2. Provides a concise way to work with arrays
3. Direct assignment of values from arrays to variables
4. Skip elements or provide default values
5. Swap values between variables without using temporary variables
6. Use the rest operator to gather the remaining elements into a new array
7. Destructuring of nested arrays
8. Use destructuring in function parameters and loops