How is this destructuring an array?

JavaScript
1

Tell us what’s happening:
The test at “ES6: Use Destructuring Assignment to Assign Variables from Arrays” on https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays

says that we are supposed to, “Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a.”

But the test to work on offers this starting code:
let a = 8, b = 6;
// Only change code below this line

But that’s not an array. It’s two variables assigned single values!

The given solution says that the answer is:
[ a,b ] = [ b,a ]

I don’t understand how that’s an example of destructuring. It strikes me more as a case of creating a new array from two declared single-value variables and then rearranging the elements. What makes this a test of destructuring?

Your code so far


let a = 8, b = 6;
// Only change code below this line
console.log(b,a);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36.

Challenge: Use Destructuring Assignment to Assign Variables from Arrays

Link to the challenge:

2

[a, b] = is the destructuring.

[b, a] is an array. Just because it wasn’t declared as a variable like:

const array = [b, a]

doesn’t make it any less of an array.

3

But what is [a,b] destructuring? Two declared variables? I don’t understand what is being destructured here.

4

The array [b, a] on the right side of the equals sign. As I said, just because it wasn’t declared as a variable doesn’t make it any less of an array.

5

The example for the exercise can be little bit confusing when you are learning this ES6 feature. But what it does is, rather than directly showing an example of array destructuring,it is taking one step more and making use of array destructuring to do something useful, swap values of a & b.

You see, below code only works in ES6. You can’t just declare arrays like this in ES5 and older versions.

What happens here is [b,a] is an array which holds values [6,8] and then using the array destructuring, the it’s values are assigned to a,b. You can try writing this code in ES5 and see what will happen. You can use this tool by Babel which transpiles ES6 code to ES5.

babel
babel1064×270 5.56 KB

1 Like
6

So you have two values that you put into an array. You then rebind them using destructuring.

It might be more obvious if I start with a destructing statement and then follow it up with [a, b] = [b, a] where a is reassigned to the current value of b and b is reassigned to the current value of a.

Let’s start by declaring the values of a and b in a destructuring statement.

let [a, b] = [8, 6];
console.log(a, b);

In the above code, we are declaring the variables a and b and assigning their values in one statement using destructuring. Please note that you would have to comment out any previous declarations of a and b, or you’ll get the following error:

let a = 8, b = 6;
// Only change code below this line
const [ a, b] = [8,6];
console.log(a, b);

SyntaxError: unknown: Identifier 'a' has already been declared

Now let’s extend the example above by reassigning the values for a and b. Copy and paste this code into a code editor and the logging will walk you through exactly what is happening here.

//let a = 8, b = 6;
// Only change code below this line
//[b, a] = [a, b]

let [a, b] = [8, 6];
console.log("a =", a, "\nb =", b);

let flipArr = [b, a];
console.log("\nflipArr =",flipArr,"\na =", a, "\nb =", b,"\nWe created a new array, flipArr, but a and b still have the same values." );

let rebindArr;
console.log("\nLet's create a copy of flipArr called rebindArr that we will use to rebind the values of a and b.")
rebindArr = flipArr;
[a, b] = rebindArr;

console.log("\na =", a, "\nb =", b);

This example goes beyond the scope of the assignment but hopefully it helps you see what’s going on a little clearer. In the absence of destructuring,

let a = 8, b = 6;
[a, b] = [b, a];

we’d have to take the extra step of creating a temporary value for either a or b to get the same result.

let temp, a = 8, b = 6;
temp = a;
a = b;
b = temp;
1 Like
7

Thanks to everyone for your help. I’m working through all of your replies carefully. Hopefully, I’ll “get this” soon! :grinning: