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

All this does is equivalent to

let len = newString.length;

which is not terribly impressive (and a bit confusing). You have simply created a variable len that holds the current value of newString.length

As your object becomes more complex then destructuring assignment becomes more useful.

const person = {name:"Bob", age:23, occupation:"Defender of the Universe"};

const {name,age,occupation:job} = person;
console.log(name,age,job)

When used in destructuring a parameter it becomes most useful. Author of a function can cherry pick properties of an object to use locally in the function while the user of the function need only pass the object unaware of (or unbothered by) the internal details.

function whoIsThisDude({name:firstName,occupation:job}){
  console.log(`Hi! I'm ${firstName}. I'm a ${job}`);
}

whoIsThisDude(person)
1 Like

First… need introduction how i can check available properties.
Really confusing.

Hi,
At first I’ve struggled to understand this too, but when I tried something like, const {x: len } = str; return x on the a same function in the console , it did not work . The reason why len is return str.length is because length is a string property and in this case, str is an string. So basically it’s getting the value of srt.length and assigning it to len and therefore len returns length of the parsed string.

It is as if the challenge is missing half of the explanation. We are told hey, there is this thing called destructuring, this is how it works in this one case. Now go and apply it to this other, completely different case. I never could have solved it without having read this thread.

Bump. The question is confusing, and I think it’s also partially because there is an in-line comment next to the return statement saying // you must assign length to len in line.

I thought they want me to assign it in that line.

In the example, the object voxel has a property x, which you can access with voxel.x, or using destructuring with const { x : a } = voxel. The curly brackets in this example don’t signify an object, they just say, take the variable voxel, and assign its property x to a new variable a.

In the assignment, length is a built in property of the string. So you can access with newString.length, or using destructuring with const { length : len } = str. This basically says - take the variable str, and assign its property length to a new variable len.

So you can see, the logic is similar, but the confusion in this question seems to stem that one is a built-in property, and in the example they use a custom property defined for the voxel object.

Also, the in-line comment next to the return line doesn’t help, as noted in my previous comment.

I found it hard to figure out this challenge as well. I still don’t understand it despite reading few sources and posts here. Few challenges before that are quite confusing as well. It feels really bad

Again, I feel like

const length = str.length;

is much easier and more intuitive. I can see how this would be beneficial, but in the example, it’s working with objects. The title is even called "Use Destructuring Assignment to Assign Variable from Objects. Why not change it so we work with an object, not a function that calculates the length of a string?

You’re right, but when I think of destructuring objects and I’m learning ES6 for the first time, I’m not thinking about string as an object, I’m thinking of JS objects as an object, since it’s what I learned was an object from previous challenges.

Very true, thank you for the clarification.

Its not as clear cut as you suggest. The challenge is using a string primitive and relying on JS automatically wrapping at the point of property lookup when destructuring. For someone just learning this is not going to be clear, especially as I dont see anywhere earlier in the curriculum where this is covered.

Thank you! This helped me a lot!

1 Like

Really poorly explained exercise, as is most of the ES6 course I am finding. when you look at some of the sections of the basics module, where it spends several pages teaching for loops, one page for adding, one for subtracting, one for even nuumbers, one for odd numbers. Then you get some of these exercises really poorly explained and giving you no chance of understanding them

1 Like

I was having a tough time understanding the decontructing assignment until you gave a perfectly executed example! Thank you very much @alhazen1

I don’t get it how is this working…

Why we calculate length of len, when we didn’t give len any value, we give value to str, how it calculates length str when we write length: len ?


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

}

console.log(getLength('FreeCodeCaamp'));

Was literally scratching my head.

Thanks a lot

I made a forum account just to say: I’ve been enjoying FCC, and this is the first exercise that I felt was really unclear and unfair. The problem is this:

I had no idea that length was considered a property of a string object (or at least that destructuring would work as if it were). Maybe the dot syntax should have clued me in, but it’s really not obvious. We’ve been using all sorts of functions, like Math.random(), that have dot syntax but are not intuitively properties of objects.

And without this realization, it’s pretty difficult to google up helpful info on this issue. The E6 section in general is full of problems that assume knowledge that hasn’t been explicitly taught. A few questions back, it’s assumed that the learner know about filter and map and reduce without those being explicitly taught. But at least those are easy enough to look up on MDN. Here, I had no idea how to even start looking up the information I was lacking.

1 Like

Yes. I agree with your comments on having to have knowledge of map() etc that hadn’t been taught. I felt dissatisfied that I hadn’t understood the topics even though I passed the tests so spent an hour or so on other sites learning those before coming back.

And now I feel deflated at having to effectively look up the answer here to progress at all.

I’ve finished the Javascript section now, and my advice is: skip the ES6 section and do it at the end.

I haven’t checked on this, but I feel like it’s pretty clear that they recently juggled around the order of the Javascript sections, but no one made sure that all the assumptions and the dependencies of the lessons made sense. There are a lot of lessons that assume knowledge that ends up getting taught later in the course. The ES6 section is the absolute worst offender here. It’s clearly the hardest section in the course and it assumes stuff from almost all the other sections… but it’s now ordered second. It makes no sense. I think someone probably decided that the ES6 upgrades should be considered “standard JS” from now on, so they moved the section to the beginning without considering how damaging that would be to the lesson flow.

It’s not the only offender in the JS course though. (Get ready to learn about objects a million times over as if you hadn’t seen them before.) The Front-End course was so well-designed that I felt really let down by the JS course. I kept a running list of the most prominent problems, and I should probably post them somewhere here. Luckily, the third course doesn’t have the same problems.

1 Like

Thanks for the link… I posted a concrete suggestion on github a little while ago but I didn’t realize there was a different area just for curriculum issues. The problem is that I have to think about how to tease apart the various issues I have. It would be easiest for me to write up a bunch of general experiences and complaints I had while taking the course, but I’m pretty sure that isn’t the right format for the issues submission section of the github repository. (Is it permissible to submit issues that are based on personal experience but that others might disagree with? I think probably not.)