ES6: Use Destructuring Assignment to Assign Variables from Objects (FCC Beta)

ES6: Use Destructuring Assignment to Assign Variables from Objects (FCC Beta)
0

#1

I’m very confused by this challenge, the examples given seem to be different from what is asked from me. So I realized that i should be treating String as an object with a property of length and this is my code:

function getLength(str) {
  "use strict";

  // change code below this line
  let {length} = str;
  let len = length;
  // change this
  // change code above this line

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

}

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

and the tests say that destructuring wasn’t used. What am I missing?
also when i used “length = len” I didn’t pass any tests


#2

The starting challenge code is:

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'));

You ONLY need to change the one line with the comment “change this”. Do not add/modify any code above or below this line.

You need to use the syntax of the 3rd example to pass this challenge. Note how the variables a, b, and c are used in the 3rd example. This is the way len will become the value of str’s length property.

Your solution returns the same value, but the point of the challenge is to be able to assign the length value directly using destructuring instead of creating an extra step (two assignments).


#3
const {length : len} = str;

now i got it


#4

I would love if these examples could be more real world. And if there’s a chance you could show why ES6 syntax is better. I mean in this example if I want the length of a string it’s a million times easier, and more readable to just do:

const len = str.length;

Why would anyone want to use this??? Make this example more relevant, or more challenging and certainly more clear.


#5

so confusing question when you need to change a so small code


#6

I find the question confusing because it’s not obvious that a string is an object that has a length property, whereas this is the reason this solution works.


#7

Exactly kuntzthomas, there needs to be a section going more in-depth into how String is an object with properties before this section comes up. Some of these ES6 sections could use some work, is there a way we can post suggestions?


#8

Sure! You can improve the curriculum by opening an issue or a pull request on freeCodeCamp’s GitHub repository at https://github.com/freeCodeCamp/freeCodeCamp :wink:


#9

Amazing !!!


#10

Thank you - this explanation gave me the understanding I needed to work it out :slight_smile:


#12

Hi people, someone can explain me HOW the code return 12 and not the text?. I don’t understand in which part, the text “freeCodeCamp” change to 12 because I don’t found any .length or something like that.

Thanks and sorry for my english! :frowning:


#13

So strings, when you do anything to them in JavaScript, get put in an object (the String object). That object has some properties, one of which is length. This challenge is asking you to pull out that property. So

const { length: len } = "foo";

Is basically saying "from the string object that represents the string 'foo', grab the length property and call it len"

It’s…a confusing challenge

As pointed out, it is the same as

const len = 'foo'.length

Use Destructuring Assignment to Assign Variables from Objects Help
#14

So does the string object look like this under the hood?

A_STRING_OBJECT = {
                   length: value_of_a_string.length,
                   another_property: its_value;
                   <etc...>
                   }

Pardon me the way I’ve put it, but it made me sense like this. In the end, you treat a string like an object and can access its’ value in the same way one would access a custom object property’s value?


#15

Yes, you are correct: it has all of the properties and methods here

and here

and here

However it only get wrapped in an object (boxed) for a split second (there are ways to keep it as an object, but generally that isn’t going to be the case), once the property has been accessed or the method has been applied, it gets unwrapped (unboxed) back to a primitive string

Edit:

For example, you can do this:

const {length, constructor, valueOf} = 'foo';

The length property will be there (3)

The constructor property will be there ([Function String])

The valueOf property though is a method, and if you try to execute it (valueOf()), instead of foo, you will get an error because the String object that wrapped 'foo' no longer exists, it has been garbage collected so there is no reference


#16

thanks for explain and your time! =)


#17

Thank you!!! I spent way to much time on this challenge.


#18

Honestly struggled to understand what I was being asked to do.
Never before has an example text had so little relation to the question following it, and the question been so cryptic too.

So, where you put “length” in the code you could theoretically have any array property (length, name, caller) but this question has no name or caller so they return undefined.
This question was very poor, in my opinion.


#19

I got the new curriculum a couple of weeks ago and except for the “let” assignment have not found any of the other ES6 things even remotely useful and just confusing and unnatural. Maybe it’s because I am still new to javascript and haven’t had to suffer under the problems that it tries to fix but I don’t think it makes code any cleaner and it makes reading it much harder, in particular for those from a C type language. Part of the fun of javascript for me was that no matter what, the syntax was similar to C. Arrow functions seem confusing. and as pointed out, why would anybody use a destructuring assignment when an old fashion len=str.length save so much time and is so easy to read?


#20

@Coogie
I can see how one might feel that way especially if based only on the brief introduction in the FCC challenges. I just finished these recently too and I’m only just beginning to grasp the value of some ES6 magic myself. For me ES6 has been an ‘aha’ moment on a par with higher order functions. (And arrow functions do become just as natural as function declarations after using them for a few weeks)

Some things you might learn to love…

  • Spread and rest operators - hellalotta power for just typing three dots.
  • Template literals - no more clunky " this " + " that " + val +" more " + +++.
  • Arrow functions + Higher Order functions = sweet self-commenting one liners. No more for loop shell games arr[i][j] + arr[i+1][j] that take up half a screen.
  • Default parameters - poor man’s function overloading
  • Not C-like but somewhat Pythonic

Here’s my rant on destructuring assignment (and why that challenge did kind of suck a little) that might warm you up to the concept some.

Try to work these new concepts into future challenges (or refactor some old ones) and you’ll probably develop an appreciation.


#21

Thank you for this explanation!!! You explain it so well that it really should be a lesson in Basic JavaScript.