This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Objects Exercise Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: Does anybody have any questions about? Yeah, Mark?
>> Mark: This one was in the chat room at the beginning. So I'm not sure if they answered it themselves, but what means tagline in an animal object, like any string?
>> Bianca Gandolfo: Yeah, yeah, it could be any string, it could be any string, so the top.
[00:00:23]
>> Speaker 3: So no spot for animal dating, that's what you were looking for.
>> Bianca Gandolfo: What was that?
>> Speaker 3: Your go to spot for animal dating, that was the tagline?
>> Bianca Gandolfo: Well it would be like your user tagline, so on your profile I don't know, like under your name you could say like-
[00:00:36]
>> Mark: I'm the hottest sheep on the farm.
>> Bianca Gandolfo: Yeah,
>> Mark: [LAUGH]
>> Bianca Gandolfo: Something to that effect, something to that effect. So, like single sheep looking for love, something to that effect, okay.
>> Mark: And other animals.
>> Bianca Gandolfo: What?
>> Mark: And two other animals.
>> Bianca Gandolfo: Yeah, and two other sheep, sometimes cows.
[00:00:58]
>> Mark: [LAUGH]
>> Bianca Gandolfo: Just kidding, so that's just gonna be a solution. I wanna thank Katrina, who's my awesome lead TA at Hack Reactor for providing the solutions. She is awesome. Okay, so first thing is we're just gonna create an empty animal object. So we're just using the object literal notation, storing in a variable.
[00:01:23] We're giving it a name, so animal.username. We're gonna call it Mittens and it's gonna have a tagline, which is pet me, and so this is dot notation, this is bracket notation. Again, at this point they're interchangeable. So here we're creating an array. I know we haven't gotten to arrays, but I'm assuming that you've used them before.
[00:01:44] An empty array, and then we're assigning that empty array to animal.noises. So when we console log our, one second here. When we console log our animal object, we see in our console that we have an object, should print out something like this. We have an empty array with a tag line, and a user name.
[00:02:10] Thumbs, did everyone get that far? Is everyone being honest? Cool, awesome, thank you everyone. So, for the counting one, we are going to loop through all of the properties in the object. So we have key and every time we loop we're gonna increment our counter. So count plus plus is the same as saying count equals count plus 1, it's just a short hand, and here we're gonna do that check I'm gonna recommend that we always use triple equals.
[00:02:56] Yeah?
>> Speaker 4: Can you explain that a little bit? That's one thing that I've never really understood.
>> Bianca Gandolfo: Triple equals versus double equals? So triple equals is a strict check, and then double equals is more lenient. So for example, if we do string one double equals one might return through.
[00:03:18] Even though that might not be what you are looking for, and then, because Java Script has some weird like falsy, truthy boolean things. It's better just to always do a strict check with the three equals.
>> Speaker 4: Could you argue that in some cases you'd wanna use double equals because.
[00:03:37]
>> Bianca Gandolfo: Yeah.
>> Speaker 4: You might not be sure what the value is, or something like that?
>> Bianca Gandolfo: Yeah, I mean hopefully.
>> Speaker 4: Maybe if you were developing an app should you try to force yourself to using triple equals all the time, and.
>> Bianca Gandolfo: Yeah, you.
>> Speaker 4: And ensure that you know what this-
[00:03:50]
>> Bianca Gandolfo: Even though JavaScript's really flexible, you should try to be strict.
>> Speaker 4: Okay.
>> Bianca Gandolfo: And kinda know what your expecting. You don't want your app to give you something that you're not expecting.
>> Speaker 4: Yeah, that makes sense.
>> Bianca Gandolfo: Cuz who knows the consequences of that? So try not to.
[00:04:04] If you really need to for some reason, then if you're working with some other code that you don't really have control over, and you know what you're doing, yeah.
>> Speaker 4: Thanks.
>> Bianca Gandolfo: Mm-hm?
>> Speaker 5: Some of the type conversions can be variable on how the browser manufacturer implements it as well, so you might not have the same-
[00:04:21]
>> Bianca Gandolfo: Mm-hm, and that's also a good point.
>> Speaker 5: Same behavior across browsers.
>> Bianca Gandolfo: Absolutely.
>> Mark: I just wanted to clarify something, that the variable returns from those for-in loop is always the name of the property, not the property itself. Is that correct?
>> Bianca Gandolfo: The variable return from the for-in loop.
[00:04:41] Well, there's no variable here being returned, for example, if I return the variable here-
>> Mark: So what key gets set to there in the for-in
>> Bianca Gandolfo: What key is it any given moment?
>> Mark: Yeah, it's the name of the property, not the property itself.
>> Bianca Gandolfo: Yeah, so it's the property so we have it like a property name and then a property value, and so the key is always gonna be the property name.
[00:05:05] If you think of an object as like a filing cabinet or a some language like python called them dictionaries, you can call it dictionary or a hash, you can think of it as a filing cabinet where we have the files and then there's a label. So the label in which we're gonna look up, our files, is gonna be the property name, and then what's contained within those folders is gonna be the values.
[00:05:30] So for example if you want to look up the user name in your filing cabinet. You would have to say, filingcabinet.username, so that means you're gonna be opening the filing cabinet, looking through, selecting that file who's tab, says. I don't know if people even know what filing cabinets look like anymore, but whose tab says username, and you pull out that file and you open it.
[00:05:53] What's contained in it is the value, and that's like the metaphor I like to think of for an object. So, and the key would be the property name, which is that tab. Cool, awesome.
>> Speaker 6: I just wanted to make a comment on equals equals, that's basically allowing typical version and Cal Simpson's new you don't know JavaScript book series.
[00:06:23]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 6: He covers a lot of type origin. In JavaScript, in his fourth book in the series called Types and Grammar.
>> Bianca Gandolfo: Cool.
>> Speaker 6: Its like, a good place to go if you want to learn the ins and outs of coercion.
>> Bianca Gandolfo: Awesome, cool. So back to the exercise, /ai we have this for loop, and here we're going to count excuse me.
[00:06:47] We're gonna count how many times we're looping through, and we know that whatever this number is, it's gonna be the number of properties we have in our object, right? So every time we loop we're gonna increment the counter. We're also gonna do this if-else statement. So it's always gonna check if the key, that property name, equals the string username.
[00:07:09] If so, it's gonna come into this block and console.log. Hi my name is and then name. And so notice here we're accessing the value at that key versus on this line we're accessing the property name. So, important thing and we're doing bracket notation again because key is a variable.
[00:07:29] And just remember in loops when you have like var i equals zero in some loops, or key those are always gonna be variables. And so that should be a que if you are looping that you're gonna be using the bracket notation and not that dot notation. So in here the same thing except if it's a tag line you I like to say, and then animal key in this case it's pet me.
[00:07:58] So a follow up question is what happens if you return hi my name is plus whatever instead of using console log inside the loop. What's gonna happen. Anyone try that out?
>> Speaker 6: Me.
>> Bianca Gandolfo: Did you get it to get there? Who got to that point? Okay, so can I see thumbs on who got to this part?
[00:08:24] Okay so most people didn't okay.
>> Bianca Gandolfo: Okay. Well, the answer is that when you put a return statement inside a loop, actually I don't know if you can even put a return statement outside of a function.
>> Speaker 5: So that's, there's exceptions.
>> Bianca Gandolfo: Okay cool, so but if this was inside of a function and you put a return statement inside the loop what it would do, it would immediately stop looping and return out of the function.
[00:08:51] We'll get into more detail about that when we get to functions in a few minutes. But that's something important, that's why I have you console.logging and not returning because it would stop the loop.