[Beta Feedback] ES6: Confusing challenge description (Destructuring Assignment)

JavaScript
#1

Tell us what’s happening:

I’ve been working on the ES6 challenges and the one called “ES6: Use Destructuring Assignment to Assign Variables from Objects” took me a long time to grasp.

I think the problem description of this particular challenge, in contrast to the other ES6 challenges is not clear enough.

It is also confusing since length is JS property and it doesn’t have any education benefit in this example.

It seems that there has been confusion around this exercise before:

I’ve posted the exercise description and code editor starting code below. Can anyone understand?

Exercise description:

Consider the following ES5 code:

var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
Here’s the same assignment statement with ES6 destructuring syntax:

const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
If instead you want to store the values of voxel.x into a, voxel.y into b, and voxel.z into c, you have that freedom as well.

const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54
You may read it as “get the field x and copy the value into a,” and so on.
function getLength(str) {
“use strict”;

// change code below this line
const length = 0; // change this
// change code above this line

return len; // you must assign length to len in line

}

console.log(getLength(‘FreeCodeCamp’));

Use destructuring to obtain the length of the input string str, and assign the length to len in line.

3 Likes
#2

If there isn’t one already, you can open a GitHub Issue.

1 Like
#3

length is a built-in property of strings. That is why you can write things like:

var str = 'Hello';
var len = str.length;
console.log(len); // displays 5

or

var str = 'Hello';
var len = str['length'];
console.log(len); // displays 5

I think using the length property in this challenge has great educational value, because it has the bonus learning point that you that built-in properties can be accessed the same as properties you define in your own objects.

1 Like
#4

After read this (https://stackoverflow.com/questions/42595907/how-does-destructuring-array-get-length-property) I understand how to solve de question.

function getLength(str) {
  "use strict";
  // change code below this line
  const { length : len } = str; // change this
  // change code above this line
  return len; // you must assign length to len in line
}

The solution is above. In “{ length : len } = str” we are saying copy the value from length property of the str for len.

17 Likes
#5

Is it just me or in this case destructuring doesn’t make sense? I mean, this

const len = str.length;

seems a lot more intuitive and clean than this

const {length : len} = str;

11 Likes
#6

This is just to challenge you and it was indeed quite a challenge for me which helped bake the idea in my brain (hopefully…).

3 Likes
#7

Really, without reading this explanation there is no way I would ever be able to understand what they are asking in the challenge!

9 Likes
#8

Totally agree, it is a terribly written question!

I did have a look to see if it had been raised already on github, which it was, but appears to have been closed again. I still haven’t really got to grips with github so I was a bit confused with the issue thread tbh.

4 Likes
#9

I have to agree here as well, it’s one of those exercises where I’m not even sure what they are asking.

My suggestion here is to provide an example closer to what is asked in the problem.

2 Likes
#10

So In this example de-structuring is using the str.length property and immediately assigning the value to len but inside object literal notation. What a long winded, non-intuitive way to do it! It might satisfy the challenge criteria but I don’t see the clarity or speed benefit of doing so in real world apps.

1 Like
#11

I think some of you are missing the point. In this particular challenge using destructuring assignment may have been overkill (and counter intuitive). But don’t let this one challenge sour you on destructuring assignment because knowing this is not optional.

@japickering It is not object literal notation. This is a way to extract properties from objects (and arrays) and assign them to local variables.

Consider this…

// this - much better
const {lastName : name, age , zipCode : zip} = clientList[currentRegion].clients[i];

// vs this - good 
const name = clientList[currentRegion].clients[i].lastName;
const age = clientList[currentRegion].clients[i].age;
const zip = clientList[currentRegion].clients[i].zipCode;

If you are going to be doing complex operations on this client list working with variable names like name is better than clientList[currentRegion].clients[i].lastName
Assigning all those in a sweet one-liner is WAY better

8 Likes
ES6: Use Destructuring Assignment to Assign Variables from Objects (FCC Beta)
#12

If the challenge specifically asked us to convert something like your second example into a one-liner using deconstruction syntax ,I think it would have been much clearer both in terms of what was required, and what the benefits are.

The original was that counter-intuitive that I was really confused, even understanding the syntax and what the benefits would be!

I think you explained it in a much more clear and concise way @alhazen1 ! :+1:

3 Likes
#13

This is an outstanding explanation

#14

what I know untill now that when we create a string like this
var sttre=“hello javascript”;
javascript wraps an object around the sttre wich make us execute properties upon the sttre ,
and here in this challenge the parameter of the function contains a str (string) so the same thing happens ,javascript wraps an object around the str ,and when we want to access the str length ,
we access it like this str.length the same way when we want access an object ,we start by its name and point then the property name ,wich means that the name here of the object is str ,
and if we follow the Destructuring Assignment method we can do this :
const {length:len)=str
I hope this is somehow helpful.

#15

Hard to understand, still confused…

#16 
const obj = { name: 'Bob', age: 34, title: 'Lead Ninja' };

// obj has a property name
// let's make a variable name and assign it the value of obj.name
let { name } = obj;
console.log(name); // Bob

// obj has a property name
// let's make a variable firstName and assign it the value of obj.name
let { name: firstName } = obj;
console.log(firstName); // Bob

// OK - more like the example
// myString has a property length
// let's make a variable len and assign it the value of myString.length
let myString = 'Hi There!';
let { length: len } = myString;
console.log(len); // 9

Hope this helps. Good luck.

6 Likes
#17

Now I understand this better. Thank you so much!

1 Like
#19

That’s so confusing.
They said that :
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54
You may read it as “get the field x and copy the value into a,” and so on.
But I think this const [ {length : len} = str ] doing another thing.
It’s taking value from str and assinging str.length to the variable len…
Still didnot understand

#20

I agree. Just provide us with an array rather than getting us to destructure .length.

#21

Thank you buddy to tell us and save our time. Thank you also to reference of StackOverflow to better understand.