JavaScript: From Fundamentals to Functional JS, v2 Looping Solution, Part 3

Transcript from the "Looping Solution, Part 3" Lesson

[00:00:00]
>> How'd it go guys?
>> I think I just don't understand exactly what you're looking for.
>> I hear you.
>> Were you trying to get the actual color strings not the suspect objects?
>> Right, yeah, no, so, Let me rewrite this exercise. So destructure, this nested data structure into two variables.

[00:00:29] One variable should have the string red and the next variable should have the string orange. Did anyone do that? Okay,
>> I think so.
>> You think so. [LAUGH]
>> Yeah.
>> No worries. All right. Should we try it out. All right. So take this tab.
>> Yes, so what I did is I did const.

[00:01:01]
>> Okay.
>> FirstColor, = game.suspects

[0].color. And then the same thing for a second color but just change the 0 to a 1.
>> Got it, okay, so you're just using the bracket notation. Okay, so this is the task, but let's do this task with destructuring, which is saves us from writing this.

[00:01:45] Did anyone get there? You did?
>> I think so. [COUGH]
>> Let's see what you got.
>> So var [color1, color2]. Bracket not, I'm sorry.
>> The-
>> Curly bracket? Not curly bracket just straight bracket.
>> Okay.
>> = [suspects

[0].color, suspects[1].color end with a semicolon.
>> Cool. What do you guys think, is that gonna do it?

[00:02:41]
>> Yes.
>> But what just normal not the curly brackets though around the outer, yeah.
>> Okay, like this. Cool, cuz it's an array. All right, did anyone do it a different way? So there is also this way where you, Do, Color, so that's another way of doing it.

[00:03:36] So then it's assigning orange to firstColor and red to secondColor. So as you can see, there are a few ways of doing it.
>> Basically so the I see what you just did in line 16 there is you made a variable firstColor and that lined up with the color property.

[00:04:01] And so I'm curious then why it feels like basically if you're assigning this value to the property or to the variable firstColor. Usually that's on the left, how did that kinda work their in Noodl look,
>> Yeah.
>> For the named property color and then gave a valid firstColor?

[00:04:22]
>> Yeah, so how it works under the hood? I'm not quite sure, but, It's just backwards then when you would expect. Yeah.
>> Is it kinda like if you were to try and read that in English you'd say, for the first color property we find, call that firstColor and make-

[00:04:47]
>> Which is the first index of the array.
>> And so each index of the array is with the new kinda object like they were doing there with the secondColor.
>> Yeah, and so if we wanted to do something a little simpler to draw a parallel. We could do this.

[00:05:13] So this is similar to sorry I should actually not do that.
>> In the bracket. So that's what I did and that gives you not just the color but the whole object with the name and the color.
>> Yeah, but as you can see that this is just specifying a little deeper in that nested data structure, yeah.

[00:05:45] It's a little bit of a mind bender.
>> So you might be about to go into this then. But is there a way where we can do that without knowing how many objects we have total?
>> How nested it is?
>> Well, if we were to add on several suspects to that list.

[00:06:06]
>> Directly in the destructuring notation, I don't think you can do that. You can use a spread operator and turn it into an array or something like that, like the remainder turn it into an array. But that's not exactly answering your question.