Need help with ES6: Use Destructuring Assignment to Assign Variables from Arrays

JavaScript
1

Tell us what’s happening:

As usual, I don’t understand the instructions. They talk about destructuring an array, but the code in the exercise does not have any arrays in it. The code in the exercise (no arrays) looks nothing like the example code (arrays). How can we destructure an array when there is no array to destructure?

Your code so far
I don’t have any code yet.


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36.

Challenge: Use Destructuring Assignment to Assign Variables from Arrays

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays

2

You created one here:

[a, b] = [b, a];

For a moment, disregard the destructuring (left) and focus only on the right of the equal sign… that’s an array :slight_smile:

It would have been equivalent to:

let a = 8, b = 6;

// create an awesome array
let myAwesomeArray = [b, a]
// then
// TODO: destructure myAwesomeArray to complete the exercise

Hope this clarify things up :+1:

2 Likes
3

Thanks for the reply. Actually, I just plugged in some code I found on the forum:

[a, b] = [b, a]

However, I don’t understand what it means or how it works.

Aren’t they both (meaning [a, b] and [b, a] )arrays? They both look like arrays to me. What is the destructuring on the left? Isn’t that just an array? Don’t we have to declare an array in order for the array to exist? And again - the code given doesn’t have any arrays in it, so how can we destructure an array that does not exist?

4

I’ll try my best to clarify things up for you.

So the destructuring assignment is a javascript expression, its main purpose is to create ad hoc variables.
Or to say it simple, to “unpack” arrays (and objects).

Note that is an assignment, this means that it needs an assignment operator, that in javascript is simply the equal sign =.
Or to say it simply, it has to be on the left of the equal sign.

An example:

/*
note that this is on the right: 
myArray points to an array.
*/
var myArray = [1,2,3,4,5,6,7,8]; 

/*
Let's say I want the first item in myArray
*/
var firstItem = myArray[0];
//or
var [firstItemAgain] = myArray;

In the second case I use the destructuring assignment to “unpack” the first value of myArray and assign it to a variable called firstItemAgain.

That is NOT an array declaration, but the syntax to destructure.
To prove it if we run this

typeof firstItemAgain // 'number'

Practical use cases:
If you ever will dig into React Hooks, they heavily uses array destructuring:

const [count, setCount] = useState(0);

// somewhere in your React code
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>

React useState returns an array, and thank to destructuring you have a convenient way of assigning those returned value to some variables for later use.

OR
Let’s say you are writing an API that looks into your user DB table and wants to return the name and the age.
You read about tuples (a common data structure that exists in many other languages) and decide that your API want to use a similar structure so you return a list that looks like:

['Jim', 23] ['Bob', 36] ['Amber', 41]

To be used in your app, all you have to do is

// imagine we are looping
const [name, age] = myAPIData
return `Hi i am ${name} and I am ${age} years old`

…pretty convenient :slight_smile:

Hope this clarify things for you.

1 Like
5

Thanks for the detailed response. Unfortunately I don’t see how any of this relates to the exercise.

6

it relates to how the presented feature can be applied

so, destructuring

let’s say we have an array of stuff, like let arr = ["Alan", 24]
we can store each of those values in an appropriately named variable instead of using arr[0] and arr[1], and instead of using various lines to assign the values to appropriately named variables, we can use destructuring to do it in one line:

let [name, age] = arr;
//instead of 
let name = arr[0];
let age = arr[1];

if the above is clear we can go forward, otherwise please ask again

destructuring can be used also to invert the value of two variables, without using a temporary variable in the middle
so the usual method would be:

let temp = a;
a = b;
b = temp;

let’s do it in steps. If you understood destructuring above, you can understand that this is also possible, right?

let arr = [a, b]; // we put the variables in an array
[b, a] = arr; // destructuring as used before, no let or const as the variables already exist

without using the variable, we can just do this:

[a, b] = [b, a];

here we do not use let or const because we are dealing with already existing variables, we put the two variables in an array, and use destructuring so that the value of the first variable in the array to the right is then stored in the first variable in the array to the left, and the second variable in the array to the right is stored in the second variable in the array to the left

7

@Marmiz and @ilenia, thank you both for the detailed information.

However, as often happens with me, I think I am not understanding something fundamental.

Mozilla says: The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

And the instructions for this exercise state: ES6 makes destructuring arrays as easy as destructuring objects.

Then they give some example code with arrays:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

and

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

However, in the code given in the exercise:

let a = 8, b = 6;

// change code below this line

// change code above this line

console.log(a); // should be 6

console.log(b); // should be 8

Above, I don’t see an array or an object.

So here is my fundamental question: If destructuring is something we do to arrays and objects, how can we destructure when there is nothing to destructure? In other words, in the exercise code, there is no object or array to destructure. So none of the information you provided makes sense to me in the context of this exercise.

8

you create the array to destructure
you write [a, b] = [b, a] and you create in place the array [b, a] in the same line in which it is destructured
this challenge/lesson is not about destructuring something, but about using destructuring in an “out of the box” way

9

I’m sorry, I still don’t understand. I’ll try to be clear about what I don’t understand:

I don’t understand how the example code:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

and

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

relates to the code in the problem:

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

In the example code, I see arrays. There are no arrays in the problem we are to solve. In the problem, two variables are declared (a and b), but there are no variables declared in the example code.

So my first thought was (and continues to be)- how on earth does the example code relate to the problem? I can’t see any relationship.

You stated that we create the array to destructure - how would I know to do this from the instructions? And why do we need to declare the variables, when we are going to create an array anyway, then destructure it?

In:

[a, b] = [b, a]

I don’t see any array declaration. So how is the array created? We need to create an array like this:

let fruits = ['Apple', 'Banana']

But I don’t see any such declaration. You mentioned that this lesson is about using destructuring in an “out of the box” way - what does that mean?

10

declarations are for variables
You create array by just writing the square brackets and putting stuff in it
so when you do let arr = [1, 2, 3, 4] you create an array and assign it to a variable, arrays are not declared with any keyword, you declare the variables to which they are assigned

if you think the instructions of the challenge are not enough explanatory, you can create a github issue

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

but, have you understood how array destructuring work, and how to use it? and how to use it for swapping the value of variables?

“thinking out of the box” is an expression about using something in a way that is not immediately apparent

in the example code the variables are declared doing let [a, b, c, d] = arr, this declare the variables a, b, c, d and then assign them values via destructuring an array

in this exercise there are no arrays to start because it is about swapping variables values, so about using desctructuring without actually destructuring an array, other then the array we create in place to hold the variables for the swapping

we could create the array to hold the variables in advance and hold it in a variable

let arr = [a, b];
[b, a] = arr;

but it’s less space used and works the same if we create the array in place, instead of using the arr variable

[b, a] = [a, b]

this is about destructuring to obtain a result in an ‘unconventional’ way

11

@Sharad823
Destructuring is confusing at first.
Let’s take a look at the first example code

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

is the same as

const arr = [1, 2, 3, 4, 5, 6];
const a = arr[0]; // 1
const b = arr[1]; // 2

So instead of writing variable arr and then declare variable a and b, you could just simplifiy it by typing const [a, b] = [1, 2, 3, 4, 5, 6];
So destructuring is about less typing. That’s it.

The second example is almost the same
Instead of writing it like this

const arr = [1, 2, 3, 4, 5, 6];
const a = arr[0]; // 1
const b = arr[1]; // 2
const c = arr[4]; // 5

you could write it like this

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

Now about array. You could write a new array with an array literal

[]

but it won’t do anything since you don’t save it within a variable right?
if you want to save it in a variable you write something like

const arr = []

now variable arr has the value of []. In JS you could write any value inside an array, really, any value: boolean, number, string etc. Let’s populate it with number of 1 and 2.

const arr = [1, 2];

You could also refer the value to a variable like this:

let a = 1;
let b = 2;
const arr = [a, b];

But what if you want to swap the value of a and b ?
you could hardcode it

let a = 1;
let b = 2;
a = b;
b = a;

Correct? No, you can’t do it. Try it in your browser console.
a and b now have the same value which is 2. So how do we swap value in JS?
We declare new variable to store it.

let a = 1;
let b = 2;
let temp = a;
a = b;
b = temp;

Yes, it is quite verbose to just swap value in JS. So can you make it simple? With destructuring, you can. How? I hope you already know by this point how to make it less verbose.

let a = 1;
let b = 2;
// since we can't do this
// a = b;
// b = a;
// we can do
const arr = [a, b];
a = arr[1] // 2
b = arr[0] // 1
// or you could use array literal and destructuring it
[a, b] = [b, a]

Remember = is about assigning a value on the right to the left.
Sorry for my boring and long explanation. Feel free to ask anything if you still confuse with this challenge. :smile:

2 Likes
12

Honestly, swapping variables is not a terribly common use case, nor is skipping items in a list by using a bare comma. When I want to ignore a destructured item, I usually assign it to a variable like _dummy or _unused or something. It reads much clearer than a bare comma, which just looks like a typo.

1 Like
13

OK, thanks for the additional info. I think I do understand in general how destructuring works on an array, but I still don’t really understand how it works in this exercise. What does it mean to create an array in place, instead of using the arr variable?

14

thanks for the explanation. Maybe I am not understanding what an array literal is? And then I definitely still don’t understand what you mean by

// or you could use array literal and destructuring it
[a, b] = [b, a]

It just doesn’t look anything like any of the destructuring in the other exercises so I am not sure what is being destructured and how.

15

Thanks, interesting to know how it is used (or not used) in practice.

16

the array [b, a] is being created and used at the same time, this is creating the array in place

why do you think it is different from example code

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);

?

is it because in the array that is being destructured you have variables instead of numbers? it doesn’t matter what stuff is in the array, it works the same. The values in the array to the right of the assignment operator are put in the variables listed to the left of the assignment operator

17

In the expression x = [1, 2, 3], the [1, 2, 3] is the literal. Basically, it’s an array value that isn’t a variable and doesn’t use any other variables inside it (i.e. all its members are also literals).

A string literal would be "Hello World", a number literal 123, and an object literal {foo: 123, bar: "hi"}

In destructuring, like [x, y] = [123, 456] the [x, y] isn’t even an array, it just looks like one to point out that it’s an array on the right side that you’re destructuring. It has some technical term in the spec I can’t remember, but “assignment target” or just “target” are commonly used.

18

It is different from the example code because the example code uses const and there are only two items in the array on the left of the equals sign and there are six items on the right.

In the solution
[a, b] = [b, a]

there is no const and there are only variables and no numbers and there are two items in the array on the left and on the right.

I’m still not clear on this so maybe I will just move on for now.

19

I still don’t understand what a literal is. Why is [1, 2, 3] considered a literal? How do we know that the array is not a variable? How do we know that the members inside are also literals? Also, I don’t understand why

[x, y] = [1, 2, 3] is considered destructuring. I think I’m just having a mental block with these concepts.

20

We know it’s a literal because it doesn’t contain any variables. We know the numbers aren’t variables because, well, they look like numbers (like 12345) and not names of variables (like foo).