Array destructuring

At this point, we've got the dishes that our restaurant is going to choose down to the following three choices, that we've saved in this array:

const finalMenuItems = [
  "American Cheeseburger",
  "Southern Fried Chicken",
  "Glazed Salmon",
];

They're listed them in the order that the restaurant prefers them, 1st place through 3rd place. But now we want to take these values out of our array and put them into variables, namely first, second and third:

const finalMenuItems = [
  "American Cheeseburger",
  "Southern Fried Chicken",
  "Glazed Salmon",
];

let first;
let second;
let third;

So since we know the index of each item and in what variable, we want to put them in, we could easily use the bracket syntax like so:

const finalMenuItems = [
  "American Cheeseburger",
  "Southern Fried Chicken",
  "Glazed Salmon",
];

let first = finalMenuItems[0];
let second = finalMenuItems[1];
let third = finalMenuItems[2];

And if we console log each of these variables now.

console.log(first, second, third);

[Run code] We see that this works. But can we make this any better? See that we have to reference the array name every single time we want to get a value from it. Is there a better way to get elements from an array and put them immediately into variables?

If we remember our objects section and what we were able to do there, we saw how object destructuring made getting values from properties a lot easier. And just like the spread operator is available for both objects and arrays, so is the destructuring. Just as we have object destructuring, we have array destructuring to solve our problem here.

We don't need to have all of our created variables on separate lines. Just like object destructuring, we can declare multiple variables at once on a single line, like so:

const finalMenuItems = [
  "American Cheeseburger",
  "Southern Fried Chicken",
  "Glazed Salmon",
];

// let first;
// let second;
// let third;

const [first, second, third] = finalMenuItems;

So looking at this code. It's very clear what's happening. To see what, we just have to compare the two sets of brackets. Using destructuring and the equals sign, the first array element is taken and put in the first variable, since it's in the first position, in this other set of square brackets.

The second array element is taken and put in the second declared variable, second, and the third array element is taken and put in the third variable, third.

And now we can console.log all these value to see in fact that these variables hold the first, second and third positions of our old array:

console.log(first, second, third);

[Run code] And they do. So we've now taken array elements and put them in variables. And note that these values are not taken away from the original array. Array destructuring does not mutate the original array:

console.log(finalMenuItems); // original items...

[Run code]

Know that we don't have to destructure every single value. We can just get the values that we need. Say we brought the final options down to just two choices instead of three.

We could just destructure the first two values now:

const [first, second] = finalMenuItems;

console.log(first, second);

And to more easily see the name of the variables and their respective values, we can use a little trick with the object shorthand syntax (when the object property and value have the same name).

We can wrap each logged value with a set of curly braces to make it a key-value pair on an object literal:

console.log({ first }, { second });

[Run code] And when we do this, we see much more easily our variables and their values. This is a great trick to use if you want to make sure a variable is being updated correctly.

Swapping array order with destructuring

So now, what if, however, after getting our first and second values that our preference changes? Meaning, what if we need to swap the values that's in the variable second with what's in the variable first.

A great, lesser-known convenience about array destructuring is that we use it to swap the values between two variables.

All we have to do is perform the destructuring again. This might be a bit of a challenge, but see if you can figure this out on you own...

Well if we want to swap our variable values and we don't want to change our variables names, we can simply put the two variables into a brand new array literal that we destructure once again, which gives us a chance to swap the names:

[second, first] = [first, second];

So note two things:

  1. A destructuring statement doesn't require a variable declaration on the same line. We can reuse variable names, but...
  2. Since we originally declared first and second as const variables, we can't reassign them. This means this variable swapping trick will only work if we enable reassignment, which means changing const to let when we declare them:
let [first, second] = finalMenuItems;

[second, first] = [first, second];

And finally, let's console.log first and second with our object trick both before and after the swapping:

let [first, second] = finalMenuItems;

console.log({ first, second })[(second, first)] = [first, second];

console.log({ first, second });

[Run code] So looking our logs, comparing before an after, we see that the values of the first and second variables are indeed swapped.

So finally, we've established our winning menu item--American Cheeseburger. But we still don't want to throw out the other two items. We want to keep them together in their own array.

So if we only care about getting one of the values of the array and want to gather the rest, we can gather them all together.

So returning to our original example, we can destructure the one value that we want, say first:

const finalMenuItems = [
  "American Cheeseburger",
  "Southern Fried Chicken",
  "Glazed Salmon",
];

const [first] = finalMenuItems;

But if I want to say, hey gather me all the rest of these array items and put them in some other array on their own, we can use a new operator, called the rest operator. It's going to say hey, put the rest of these values in an array.

This might be a bit strange to you, but it has the same syntax as the spread operator: ...

So to use it, we add a comma after first, then get the rest of the values in a new array that we call whatever we like, such as 'rest' or 'others':

const [first, ...others] = finalMenuItems;
console.log(first, others);

Review

So note that array destructuring is not just for creating variables that contain primitive values, but using the rest operator, we can grab all the rest of the array with the rest operator.

So be sure to use array destructuring to snag the values from the arrays that you need in put them in more easily reusable variables.