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

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
15 Likes

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?

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

8 Likes

thanks for explain and your time! =)

1 Like

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

1 Like

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.

1 Like

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?

5 Likes

@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.

1 Like

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

I appreciate you taking the time to reply, but I guess it will just take time to see whether it’s my biased that’s making me hate spread and destructuring or these are actually confusing. Right now, I’m not convinced that wasting a few bytes of typing and data using universally accepted code is worse than using a bunch of seemingly random dots and other symbols. It kind of takes me back to my CS days when there were always a couple of people in the class who would go out of their way to make their code as hard to read as possible to flex their internal knowledge of the language.

Even the nested loops are taught at the very first programming class any computer science student takes so to me that makes more sense. You can bring a C#, VB, C++, Java, or other programmer and even if they are not experts in Javascript, they can immediately recognize what’s happening but it’s not the case with ES6 notations.

I am watching a Frontend Masters workshop (on lynda.com) with Kyle Simpson and he seems to focus more on readability of the code than just using the new tools because they’re there.

1 Like

When they say

const { x : a, y : b, z : c } = voxel

It means a = voxel.x
so

const { length: len } = str
// <=> const len = str.length

This is what we need.

5 Likes

Yeah i got the answer but it doesn’t help my understanding of how the destructing assignment was used. The examples i understood but not the actual question

1 Like

ahh okay this makes more sense now.

I think this is disingenuous, for a few reasons.

Firstly, these constructs already exist in many commonly-taught and used languages. Take rest parameters: Java has varargs, C# has Parameters, C++ has variadic and so on. Python, which is extremely common on CS courses, has *args and *kwargs (and has destructuring). Python also has only one idiomatic way to do any one thing (the Pythonic way), and both of those constructs are part of that - it isn’t some weird special syntax, it’s how you should write Python.

Second is that pattern matching (of which destructuring is a basic form of) is a key feature of all functional languages and has found its way in as a basic feature of most practical modern languages (Kotlin has it, Swift has it, Rust has it, Elixir has it). C# >= v7 and C++ >= v14 have it as well. Java doesn’t have it, but Java lags significantly behind in several areas so that’s not unexpected. You need destructuring in JS to implement pattern matching in a sane way.

Third is that these things aren’t there as novelty extras, just to make the programmer look clever. They are there as an attempt to cause errors as soon as possible. JavaScript is extremely weird in that it attempts to return a value for everything, and this tends to make it difficult to write reliable code (runtime errors are very common). This isn’t massively important if you’re in your first CS class and are just learning to do loops, but it’s pretty damn important when you’re actually writing software. I want a balance where I write as little code as possible, that code is as safe as possible, and that code is as readable as it can be within those constraints. I could write everything imperatively and defensively, but that’s error-prone because I have to write a large amount of imperative, defensive code. If I instead use pattern matching, if the patterns do not match, the code should just naturally blow up at the point where the pattern failed.

Fourth: if I can construct objects or arrays using literals, why can I not deconstruct objects or array using literals? Why should the simple way to do things only go one way?

1 Like

doh! was hitting my head against the wall for 20 minutes for this thing… doh
Thanks for the post, now i can continue… brr

I agree - I am coming at this with very little prior coding knowledge and am finding it very hard to follow the challenges. Most of the ES6 course seems to require an understanding of other principles not taught in the curriculum to solve the tasks. Although there’s value in that because it makes you really scrutinise what the question is asking you to do, whether you’ve already learned that, or whether you need to do some extra research, I find it quite demotivating because I’m always a bit too lost at sea!

Thanks for your help.

thanks for the clues. will review all of ES6. Its confusing at first. But maybe repetition will help us understand it better. Goodluck to us all!

Here is the link to my solution, I hope it’s helpful: https://github.com/AdKapGo/ES6-Use-Destructuring-Assignment-to-Assign-Variables-from-Objects/blob/master/README.md

1 Like