This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Objects Iteration" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So, now we're gonna talk about Iteration. We talked about adding things and taking things out, what about if we wanna just like, loop through the entire object and get out those values and take a look at that property, so. Mm-hm?
>> Speaker 2: A question came up.
>> Bianca Gandolfo: Sure.
[00:00:18]
>> Speaker 2: In the chat room. If size is a string but you assign it a value that's a number, does it become an integer?
>> Bianca Gandolfo: Wait one more time?
>> Speaker 2: If size is a string but then you assign it a value that's a number, does it then become an integer?
[00:00:32] Or.
>> Bianca Gandolfo: Right, so are we talking about here?
>> Speaker 2: Right
>> Bianca Gandolfo: This, this is a number.
>> Speaker 2: Right, but if it's that word that's a string there, I think they're asking that if you were to assign it a number does it-
>> Bianca Gandolfo: Like this?
>> Speaker 2: Right.
>> Bianca Gandolfo: No, then it would just be a string that happens to have a number, a character that's a number inside.
[00:00:55]
>> Speaker 3: I think the question he's asking is, if you set it as a string and then later you set that same property to an integer, it will change its type.
>> Bianca Gandolfo: Yeah. Yeah, it will change.
>> Speaker 3: I think that's what he's asking.
>> Bianca Gandolfo: Yeah, so if we said box.size.
[00:01:10] So we set it here as 9 and then we said box.size equals 9. Or whatever, you know, whatever. Then, and we said, like, type of, type, type of box.size, that would return, return string. Did I answer the question?
>> Speaker 2: Yep.
>> Bianca Gandolfo: Okay. So back to looping. So, we wanna loop through our object and look at what's inside.
[00:01:50] And so, we have a handy, what should I call this? We, I mean we have a loop for a four n loop and this loop is special for objects. Which is great because everything in JavaScripts an object, so it works for almost anything. So here, we have a loop that is looping through our box.
[00:02:15] Some key words here for our loop, for this particular loop, there are tons of different loops and there's like six different loops or so, in JavaScript. This one in particular, there's two key words to keep in mind. We have for and then we have in and that's why I call it the for in loop.
[00:02:31] Then we also have this var key, which is a variable that we just create. And this key, this variable is going to hold the value of the property name always. That's just the way that this loop works. And then, the other important thing to keep in mind is where we have box and that's going to reference our object we're looping through.
[00:02:54] Right, so we have our box up here, and we're leaping through here in this box. And so, knowing what we know about this loop, what do we think this console.log is gonna return for us?
>> Speaker 2: It's real, zero. Funny characters.
>> Bianca Gandolfo: 0, you mean you can't pronounce this?
[00:03:20] I think it's pronounced [SOUND]. I think, that's how you say it.
>> Speaker 2: [SOUND]
>> Bianca Gandolfo: [SOUND], yeah. Cool, so it's going to log our property names, cool? So what if we wanted to-
>> Speaker 3: Not necessarily in that order.
>> Bianca Gandolfo: Yeah, not necessarily in that order. There's no guaranteed order in the objects, so it will come out, however.
[00:03:47]
>> Speaker 2: [INAUDIBLE] I'm sorry, it was a little confusing there is, so is key a kind of reserve word, or could you have called it anything?
>> Bianca Gandolfo: Nope. We could call it, we call it anything, it's just a variable.
>> Speaker 2: Right, okay, so it's not like, as long as it's consistent.
[00:04:01]
>> Bianca Gandolfo: Yeah, and so. Yeah, and so we tend to see key or prop, but that's just a convention it doesn't actually mean anything. I usually just call it cow, my code. Just kidding, they don't.
>> Speaker 2: Would it still be valid, if you did the variable declaration outside of the four expression?
[00:04:21] Okay, and just passing the variable in.
>> Bianca Gandolfo: Mm-hm. Cool.
>> Speaker 3: Why is that on the key and not on the value? So how does it know that cow is referring to the key?
>> Bianca Gandolfo: Cuz that's just how the loop is. So that variable, whatever variable you put here before the in is gonna be the key.
[00:04:39]
>> Speaker 3: Okay. The key and so, you thought it rather, whatever for the value if you wanna do loop out, cardboard now and testing?
>> Bianca Gandolfo: Totally, and that will be my next question. Let's see, who here is really shy? I'm gonna pick on you. What about, you look particularly shy this morning.
[00:05:00] If we wanted to print out the value. So, just like Rich in the front row said. If we wanted to print out the value, how would we do that? So if we wanted to do cardboard, meow, testing one, two, three. How we do that?
>> Speaker 4: You're asking me, right?
[00:05:19]
>> Bianca Gandolfo: Yeah, I'm asking you.
>> Speaker 4: Yeah, I don't know, I was literally just playing around with that, trying to get that exact same thing here in my editor.
>> Bianca Gandolfo: All right.
>> Speaker 4: I don't know.
>> Bianca Gandolfo: Cool, that's fair. What about. What about you, over there.
>> Speaker 5: [INAUDIBLE]
>> Bianca Gandolfo: Cool.
[00:05:37] So box, bracket, cow. Will that work?
>> Speaker 2: Yep.
>> Bianca Gandolfo: What about this? What about purple shirt, front row. Is that gonna work?
>> Speaker 6: Yes.
>> Bianca Gandolfo: Why?
>> Speaker 6: If this bracket is the same as
>> Bianca Gandolfo: It's close except for when?
>> Speaker 2: When it's not. [LAUGH]
>> Bianca Gandolfo: Yeah, what it's not.
[00:06:10]
>> [LAUGH]
>> Speaker 6: When it's not.
>> [LAUGH]
>> Bianca Gandolfo: Yeah, except for when it's a variable or a special character or a number. So in this case, actually, cow is a variable. We can see that here, actually, when we see var cow. We see that, that's a variable. So, in this case actually, we can only use bracket notation for it to work.
[00:06:35] Thumbs on, thumbs on that? Everyone, everyone's gonna have their thumbs, thumbs in the chat room. So, a b, lower case b is thumb up. And a p is thumb down. I know, chat room doesn't like-
>> Speaker 2: We have a question in the chat room.
>> Bianca Gandolfo: Sure.
>> Speaker 2: And this for loop, he was just asking if you should be checking box that has own property, before locking in?
[00:07:04]
>> Bianca Gandolfo: Yeah. Yeah. And that's why when we get to our functional program, we're going to talk about looping using underscore and why it's better, because you don't have to do a check, like that. But yeah, that's a good point. Cool.
>> Speaker 7: Bianca?
>> Bianca Gandolfo: Mm-hm.
>> Speaker 7: In that second assignment, box bracket 0, I'm still struggling with that.
[00:07:28] What is that actually doing, again?
>> Bianca Gandolfo: This one here?
>> Speaker 7: Yeah.
>> Bianca Gandolfo: Yeah, so what that's doing is It is creating a property zero. And so, you're passing it in there. Zero is a number, so you don't need to put quotes around it. But underneath, it's gonna be running two strings.
[00:07:50] So you can kind of imagine it, to say like this.
>> Speaker 7: So it's not looking at A 0 with index and returning that material property. That's what I'm struggling with.
>> Bianca Gandolfo: Sort of like, you're thinking of an array.
>> Speaker 7: Mm-hm, yeah.
>> Bianca Gandolfo: Yeah, no, no, this is different.
[00:08:12] And then also with an array, we'll talk about that after the first exercise. That these things still work for a raise and that the zeroith property in an array is actually just a property name, it actually isn't paying attention to the fact that it's the first one or not, it's actually like, zero colon value.
[00:08:34] In this case, meow. But yeah, it has nothing to do with the order.
>> Speaker 2: They're just asking, if you could explain again, why dot notation wouldn't work? For that console.log.
>> Bianca Gandolfo: Sure. Yeah, so dot notation wouldn't work, because key is a variable name. And since it's a variable, we have to always use bracket notation.
[00:08:58] Because we want our interpreter to look up that variable, instead of just using it as a string. So if I did put quotes around it, what would happen is we're looking for a property now called key on box not on variable. So the variable key in this case, in this loop is going to hold different property names.
[00:09:23] For all the property names and the object each time. So this object has three properties, so it's gonna loop three times. And every time, key is gonna hold the value of the property name. So the first time, it might hold material. The second time it might hold zero, but it's gonna be stringfied zero, actually.
[00:09:46] And then a third time, it's gonna hold srilona. That's how you pronounce this third one, I think. My accent's kinda off, but.
>> Speaker 2: Do you leave the bar on the four loop? So starting out [INAUDIBLE]
>> Bianca Gandolfo: You should always use far, because it keeps it from being a [INAUDIBLE] variable.
[00:10:07]
>> [INAUDIBLE]
>> Bianca Gandolfo: But, it wouldn't break it if you didn't do it, but it might interfere with other. If you have a bunch of for in loops and they all have key, and they're all global, it could do some weird things. Potentially. Yeah, cool. Sure.
>> Speaker 8: I actually get three undefined's when I run that.
[00:10:31]
>> Bianca Gandolfo: Really? With the quotes around it?
>> Speaker 8: Yes.
>> Bianca Gandolfo: Yeah, cuz we don't have a property key, at
>> Speaker 8: [COUGH] In the box.
>> Bianca Gandolfo: In the box. So the quotes around it is an example of how you shouldn't do it.
>> Speaker 8: All right [LAUGH]
>> Bianca Gandolfo: So without the quotes is an example of how you should do it.
[00:10:52]
>> Speaker 8: Great.
>> Bianca Gandolfo: Yeah. Why do you think that there's three undefined's though?
>> Speaker 8: Cuz it's going through each
>> Bianca Gandolfo: Mm-hm.
>> Speaker 8: Property-
>> Bianca Gandolfo: Totally.
>> Speaker 8: Of each one of them.
>> Bianca Gandolfo: Even though we're not doing anything with those properties, it's still gonna loop three times. Even though you're looking up that quotes.
[00:11:10]
>> Speaker 8: Because if while doesn't know if there is one called key, so it's gotta go through it to look for it.
>> Bianca Gandolfo: Hm, it's just gonna loop No matter what it's gonna loop three times, cuz that's just the mechanics of a loop. It's gonna loop through all of the properties on the object.
[00:11:30] Cool.
>> Speaker 3: So you're iterating all the properties, but you're always looking for the same thing.
>> Bianca Gandolfo: Right.
>> Speaker 3: But if I was looking for key-
>> Speaker 10: But if we're looking for key in quotes How does that loop know that there isn't
>> Bianca Gandolfo: The loop doesn't know anything.
>> Speaker 10: Right.
[00:11:43] So it goes and it goes to the first property and it checks to see if that one is quote key. It says, undefined. So it has to, it has to iterate until it finds something.
>> Speaker 3: Right, but you're not comparing for key, you're just iterating all the properties.
[00:11:56] And do something with whatever that property is.
>> Bianca Gandolfo: Whatever you're doing in this block, the loop doesn't know about.
>> Speaker 3: But if she called it quote key or quote hello world, it wouldn't have mattered.
>> Bianca Gandolfo: Yeah. Cool. Any more questions? Check.
>> Speaker 2: [COUGH] I think that another question, are you also using bracket notation because one of the properties is a number, or is it just because of the variable.
[00:12:28]
>> Bianca Gandolfo: Just because of the variable. Because again, just one last thing. If we put quotes around it or we use .key, it's only gonna be looking for a property called key on the object, which we don't have, right? And that's why we need to have the brackets.