ES6: Use Destructuring Assignment to Assign Variables

JavaScript
1

In this challenge the code goes as follows:

const a = {
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6

Yeap the output is, as expected, 5 and 6.
BUT
Why does it claim this?

> In the example above, the variable start is assigned the value of a.start, which is also an object.

I went as far as to run this example in Chrome Developer Tools and, yeap, I was right: the variable start is undefined.
Is it a bug or am I wrong? Please, help me figure this out) Thanks in advance!!!

2

Destructuring does not save intermediate variables for you to use. So:

const { start : { x: startX, y: startY }} = a;

an empty object extracts start from a AND another empty object extracts x and y from the previous one, assigning them to startX and startY.

Yes, it is confusing, since we’re used to reading in one direction.

1 Like
3

Tl;dr: The “variable ‘start’” is never assigned, you’re misunderstanding what the quoted claim is saying.

I had a fair amount of difficulty in understanding the destructuring assignment syntax. To help, I'd work on it at two levels, and refer you to the concept of "mapping" in mathematics (think back to algebra, when you mapped domains onto ranges):

No nesting syntax

const { propertyMappingFrom: variableMappingOnto } = objectWhosePropertyIsOriginOfMappingArrow;

Nesting Syntax

const { firstLevelPropertyMappingFrom: { SecondLevelPropertyMappingFrom: variableMappingOnto } } = objectWhosePropertyIsOriginOfMapping Arrow;
Notice that in the code of the challenge, "start" is never defined as a variable. It is merely the first-level property of "a", and only used as a way to address the real value we want to map from: a.start.x

Hope that helps.

1 Like
4

Thanks for clarification. I understand the concept and why the variable start wasn’t created. It shouldn’t)
My question was whether what is stated in the tutorial is correct?
Your explanation is awesome by the way thanks a lot)

5

I mean this:
> In the example above, the variable start is assigned the value of a.start, which is also an object.

6

It certainly is) Thank you)

7

Haha. I directly contradicted myself at the beginning and end of my own post. You are correct. The statement in the tutorial is factually wrong. Start is never assigned a variable, it is merely a label used to address a member of “a”, “a.start.”, which is it itself a variable. It might be time for a pull request to clarify this language. I felt their explanation of destructuring needed work. In their quest for concision, they missed the issue of mapping/addressing, which explains destructuring nested objects better. Maybe when I figure out how to say it more concisely, I will offer it up.

1 Like
8

I would be happy if my remark helps freeCodeCamp or if I can help in any way)))