Destructuring or destructuring assignment is a syntax that allows us to unpack arrays or objects into variables. This blog post will go over array destructuring.

To illustrate, let’s look at an example. We will create a function that takes an array of numbers and displays the numbers.

const myNumbers = (arrOfNumbers) => {
    const a = arrOfNumbers[0];
    const b = arrOfNumbers[1];
    const c = arrOfNumbers[2];
    const d = arrOfNumbers[3];
    const e = arrOfNumbers[4];
    const f = arrOfNumbers[5];
    const g = arrOfNumbers[6];

    console.log(a, b, c, d, e, f, g)
}

myNumbers([7, 2, 19, 4000, 12, 45, -17]); // 7 2 19 4000 12 45 -17

Above is fine, but we have to assign variables to each array index, and it is a ton of repetitive code. You could also loop over the array.

const myNumbers = (arrOfNumbers) => {
    arrOfNumbers.forEach((value) => {
        console.log(value);
    })
}

myNumbers([7, 2, 19, 4000, 12, 45, -17]); // 7, 2, 19, 4000, 12, 45, -17

Looping works but now we have added logic.

Destructuring simplifies this.

const myNumbers = (arrOfNumbers) => {
    const [a, b, c, d, e, f, g] = arrOfNumbers;
    console.log(a, b, c, d, e, f, g); // 7 2 19 4000 12 45 -17
}

myNumbers([7, 2, 19, 4000, 12, 45, -17]);

As simple as that! Destructuring maps the left side of the expression to the right and assigns those values.

Using default values

Not every time the left or right-hand side of the equation will be the same in length/size. We can assign default values in such cases.

let a, b;

[a=19, b=-17] = [1];
console.log(a); // 1
console.log(b); // -17

It assigned 1 to a, but that was the end of the array. b got the default value of -17. When there are extras on the right-hand side, they are ignored.

let a, b;

[a = 19, b = -17] = [1, 2, 3,];
console.log(a); // 1
console.log(b); // 2

Swapping variables without temporary variables

let a = 5;
let b = 15;

[a, b] = [b, a];
console.log(a); // 15
console.log(b); // 5

Using it with function returns

function foo() {
  return [1, 2];
}

let a, b;
[a, b] = foo();
console.log(a); // 1
console.log(b); // 2

Ignoring specific values

There are times when the values you are interested in are not in order in an array. We can skip the intermediate values.

function foo() {
    return [1, 2, 3, 4];
}

let a, b;
[a, , , b] = foo();
console.log(a); // 1
console.log(b); // 4

Using with strings

split string method comes in handy when we want to combine destructuring and strings.

const [firstName, lastName] = "Parwinder Bhagat".split(' ');
console.log(firstName); // Parwinder
console.log(lastName); // Bhagat

Assigning to objects

let user = {};
[user.firstName, user.lastName] = ["Parwinder", "Bhagat"];

console.log(user); // { firstName: 'Parwinder', lastName: 'Bhagat' }

Destructuring and rest (…) operator

If we are interested in the first few values, but also want to gather all the following, we can use the rest (…) operator to save the rest of them!

let [name1, name2, ...remaining] = ["Parwinder", "Lauren", "George", "Eliu", "Gaurav"];

console.log(name1); // Parwinder
console.log(name2); // Lauren

console.log(remaining.length); // 3
console.log(remaining[0]); // George
console.log(remaining); // [ 'George', 'Eliu', 'Gaurav' ]