Array Destructuring

Suppose we have some data that lives in an array, and we want to pluck it out and assign it to a variable.

Traditionally, this has been done by accessing an item by index, and assigning it a value with a typical assignment statement:

const fruits = ['apple', 'banana', 'cantaloupe'];
const firstFruit = fruits[0];
const secondFruit = fruits[1];

Destructuring assignment offers us a nicer way to accomplish this task:

const fruits = ['apple', 'banana', 'cantaloupe'];
const [firstFruit, secondFruit] = fruits;

The first time you see it, those array brackets before the = look pretty wild.

Here's how I think about it: when the [ ] characters are used after the assignment operator (=), they're used to package items into an array. When they're used before, they do the opposite, and they unpack items from an array:

// Packing 3 values into an array:
const array = [1, 2, 3];

// Unpacking 3 values from an array:
const [first, second, third] = array;

Ultimately, this isn't really a game-changer, but it's a neat little party trick that can tidy things up a bit.

Skipping items (info)

What if we only wanted to grab the second item, and not the first? Can we use destructuring assignment in that case?

In fact, we can:

const fruits = ['apple', 'banana', 'cantaloupe'];
const [, secondFruit] = fruits;

We've removed firstFruit, but kept the comma. Essentially, we've left a gap where the first variable used to be. If you're familiar with sheet music, you can think of it like a rest.

Technically, we can leave many gaps, picking and choosing the items we want:

const fruits = [
  'apple',
  'banana',
  'cantaloupe',
  'durian',
  'eggplant'
];

const [, secondFruit,,, fifthFruit] = fruits;

console.log(secondFruit); // ‘banana’
console.log(fifthFruit); // ‘eggplant’

This is an interesting little trick with destructuring assignment, but honestly I don't know if it's a great idea in complex cases like this. It feels simpler to me to use the standard notation:

const secondFruit = fruits[1];
const fifthFruit = fruits[4];