This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Looping" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: Cool. So we have our animal maker, its returning object has speak. We can even put a name function on it if we wanted to, just so we can remember who's who. Say name, his name, and then we can, I don't know, owner maybe.
>> Bianca Gandolfo: So what if we wanted to loop through these animal names, and create an animal object with each one?
[00:00:42] How do we go about doing that? Actually, I'll give you a moment. I'll give you five minutes to try this out on your own. So what we're gonna do is we're gonna loop through. For each name, we are going to pass it to AnimalMaker and create a AnimalObject.
[00:01:06]
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: Let me know when you guys have done that.
>> Bianca Gandolfo: And then too, the question about counsel log with the plus sign. So you can use a plus sign if you want. What it does though to this variable is that it forces it into a string.
[00:01:33] So if name was an object, that would run into some problems cuz if you stringify an object, it's saying this, string plus some object. It's gonna quote object Object, and when you're console logging, maybe that's not gonna enlighten you the way that you need to. And if you wanted to print out what it is, you can just use the comma.
[00:02:09]
>> Bianca Gandolfo: And it will just print out the object prettier.
>> Bianca Gandolfo: I forgot to mention that you wanna add it to your farm.
>> Bianca Gandolfo: So you want your animal objects to be in your farm, which is just an array.
>> Bianca Gandolfo: So when you're looping through your array, you're creating your animal objects, and then adding them to your farm array.
[00:02:40]
>> Bianca Gandolfo: All right, so what's the first thing I need to do? I suddenly, guys, I have this like periodic amnesia that happens where I just forget everything I ever knew about JavaScript. So I'm gonna have to rely on you. I'm kind of in a high pressure situation, I'm on camera.
[00:02:59] So I need your help. Really desperately need your help. How do I make my farm?
>> Bianca Gandolfo: You guys are not the rescue type? I'm here on the spot.
>> Speaker 2: Sorry, what is the question?
>> Bianca Gandolfo: So, how are we gonna loop through this array?
>> Bianca Gandolfo: All right. We're gonna make a for loop.
[00:03:29] For var key in, should I do it this way?
>> Speaker 2: Yep.
>> Bianca Gandolfo: Yeah? Probably not, right? We kinda talked about that. This is for objects, so we want the I one, right?
>> Bianca Gandolfo: AnimalNames.length, right?
>> Bianca Gandolfo: I sometimes make mistakes so let me know. Okay, so I wrote my for loop, so this loop is going to loop through all my animal names.
[00:04:06] And now I want to create an animal object for each one.
>> Speaker 3: On Animal Maker and pass in the index.
>> Bianca Gandolfo: Pass in the index? All right.
>> Speaker 3: AnimalNames.i. [INAUDIBLE] for syntax.
>> Bianca Gandolfo: Like that?
>> Speaker 3: Bracket.
>> Bianca Gandolfo: Bracket. And then what? So now we're creating the animal objects, but they're just going out in space, we want to add them to our farm.
[00:04:50] Otherwise they're wild animals and this would be the jungle.
>> Speaker 4: Farm, square bracket I equals Animal Maker. Or in front of that, animal maker.
>> Bianca Gandolfo: I see. Whoops.
>> Bianca Gandolfo: So, is this gonna work?
>> Speaker 5: I see.
>> Bianca Gandolfo: I think it'll work. It'll work. That's one way to do it.
[00:05:22] Awesome. So this is how we're gonna create our farm. We're gonna use our constructor function. We're gonna loop through our animal names and be coming up with these robust animal objects that have methods on them. So all of our animals on our farm can now speak. And if we later wanted to change our constructive function to load differently.
[00:05:42] We could maybe even add more. So here's an example of the answers of how we could do that. We could do farm.push. So the one we did before was farm(i) = AnimalMaker. Another way we could do it, we could just use the .push method where we say var animal equals again AnimalMaker(animalNames[i]) and then we just push it.
[00:06:07] Each one, or we can just do it all it one line. So we could say farm.push(AnimalMaker(animalNames[i])). Thumbs on how we got there? Thumbs, thumbs, thumbs. Thumbs in the front? Cool.
>> Speaker 6: Is there a reason why you're not using new, new to create the-
>> Bianca Gandolfo: Because then I would have to explain this, I would have to explain the key word new.
[00:06:40] And, at the end of the day, when you use the keyword new, all it's doing is returning an object. So, at its core, like there's a bunch of different class patterns, that you can use in Java Script, cause we don't really have formal classes. So you can just write a function that returns an object.
[00:06:58] And there you are, you have a class or a constructor. And then there is a way using the keyword new, you can look it up, it's called pseudo classical, that's the pattern. And that tends to be the typical pattern using the keyword new. You see this in there a lot, the .prototype, etc.
[00:07:18] But that's like, I have another class on [INAUDIBLE] Java Script, it's a week long. So it's just like a whole other animal, and I try not to introduce too much extra, too much extra stuff, but good question. Any other questions?
>> Speaker 7: Kate's asking, how the object is being created.
[00:07:38] She doesn't understand that.
>> Bianca Gandolfo: Sure. So this return statement here. These two. These curly brackets here are the object that's being created. So, if we just copy this quickly into our console. Let me make it a little bigger. And we just save our obj = AnimalMaker. So, whatever.
[00:08:14] So how this is working, is that whatever this function is returning is then gonna be stored in this variable. And so obj, since AnimalMaker, when we know what AnimalMaker is returning, if we go back up. We look into the function body. Again, the function body is between the curly brackets.
[00:08:36] And we look at that return statement. And that return statement is going to explicitly tell us what we're returning. And notice we have these curly brackets. It's a little bit confusing because there's a lot of curly brackets in there. But there's no function keyword, there's no if, there's no for.
[00:08:51] They're just naked curly brackets and that tells us that that's an object literal. And so that return statement is just explicitly returning an object. So if we for example went back here and we just deleted the speak function, which is adding some extra curly brackets, and we just looked at it like this.
[00:09:15] You can see that it's just returning an object.
>> Bianca Gandolfo: And that's just where the object's coming from.
>> Bianca Gandolfo: Mm-hm. So there's nothing fancy-special here. It's just literally returning an object literal. Mm-hm?
>> Speaker 8: Can you console.log something there? I can't understand what's in the array.
>> Bianca Gandolfo: In the farm?
[00:09:45]
>> Speaker 8: Yeah.
>> Bianca Gandolfo: Sure. [BLANK AUDIO] I don't know. [BLANK AUDIO] [NOISE] So here we have our farm which is an array of three objects. So for every animal name, we have an animal object for them that we had put into the farm. So if we look at the object, it's just an object that has a speak method on it.
[00:10:24] So each one will do that. And then does that answer your question?
>> Speaker 9: How do I get the names to actually show up?
>> Bianca Gandolfo: Mm, well what we could do is we could change this to.
>> Bianca Gandolfo: And then I think, lets see if it'll show it now, yeah.
[00:10:54] So, now you can see the actual name.
>> Speaker 9: Okay, let me see what you did then.
>> Bianca Gandolfo: All I did is I added another property on there called name just so you could explicitly see the name. Before we just had a function in there. Cool?
>> Bianca Gandolfo: Awesome. So now, what if we wanted to then loop through our farm now, and have all our animals say their name.
[00:11:35] We're having like a farm role call. How would we do that?
>> Speaker 10: In the [INAUDIBLE] stage animal [INAUDIBLE]
>> Bianca Gandolfo: So, we want to loop through the farm, right? So, it would be a new for loop, right?
>> Speaker 10: Yep.
>> Bianca Gandolfo: I'm going to delete this old one, is that okay?
[00:12:01] Just for room. For var i = 0, i < farm.lengt; i++ [SOUND]. Okay. And then what do we have to do? What's the next step?
>> Speaker 10: Farm [i].speak()
>> Bianca Gandolfo: Cool, thumbs on where we're at. Can I see everyone's thumbs just so I can have a check? Thumbs, thumbs, okay, cool.
[00:12:44] So let's test it out. Wait, let's just do this one.
>> Bianca Gandolfo: Cool.
>> Speaker 10: Could you go back to that slide?
>> Bianca Gandolfo: Mm-hm.
>> Speaker 10: On that function animal maker, that's where we're defining it. We don't need the var there or anything like that? I mean [INAUDIBLE]
>> Bianca Gandolfo: Yeah, so that's the other.
[00:13:09] Remember I was saying there's two ways that you can name a function? This is the other way. This is the way actually I don't recommend, but because of slide real estate, I use them a lot in my slides. But in code, you should just use var X equals function, so you could say I guess this one has more room.
[00:13:29] Could say var AnimalMaker, not mater, because that's a different thing. Actually, maybe that's accurate. So, it's more or less the same. It does have different implications as far as like hoisting and scope things, but for today we'll just go with it's the same. We talk about scope tomorrow, so we can talk about that.
[00:13:56] So stack crease around errors too?