This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Underscore Exercise Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So we're gonna use an each loop, to loop through an array in console.log with different values. And the way that we would do that is, here we have our array and here's our call back function here. If we wanted the console log the value, so this gonna be the value.
[00:00:20] This will be the index. And this one would be the list. So if we wanna console.log the value, we do that. And then, if we wanted to console.log the index, we would do it that way. And how would this be different, if you were looping through an object?
[00:00:43]
>> Bianca Gandolfo: Anyone?
>> Speaker 2: Do the properties?
>> Bianca Gandolfo: Yeah, so the main difference in, there's not really a big difference, the only difference is that instead of the indexes, it would just be the properties. It would just, you could still call it index and it wouldn't matter. Cool. So our second function is called check value, it searches an array for a certain value.
[00:01:13] If it contains that value, it'll return true, otherwise it will return false. So here we are with just our regular for loop, we are initializing it i 0 and we're gonna loop, while i is less than array.length. And then, we're gonna plus one every time. And for every index of the array, we're gonna run this block.
[00:01:34] So we're gonna say if array i, so the first one, is zero, I should.do this. So check value, so we're gonna check the value for, for bye. So, it's gonna say if I array I, if the first time is gonna be zero, so if bonjour is the same as bye.
[00:02:04] Oops, I'm sorry. We have to do this. Let's start over. So we're passing helloArray, and we're also passing bye as a string that we're checking to see if that is in the array. So, we're looping through, so the first one would be bonjour, and the value that we're checking against says, bye.
[00:02:25] So that doesn't equal each other. So, we won't enter into this block here. We're gonna skip this, and then we're gonna run it again. And it says, if hello equals bye. And it doesn't, so it's gonna skip it again. It will run this block one more time. And it says, hola, so it does hola equal goodbye, no.
[00:02:50] So then, it's gonna skip this if block, and then this for loop is done. So then, we're gonna return false. However, for hello, well let's just do bonjour. For bonjour, we are going to say, we're gonna loop through the array and if bonjour equals bonjour, which it does, we're gonna skip in here and we're gonna return true.
[00:03:18] The important thing about returning true, right here, is that, it's gonna break out of if, and it's gonna break out of the for, and it's gonna break out of the function. So the entire function at that point will return true, it's gonna stop looping. So be really careful about where you're returning.
[00:03:34] If you're returning inside a for loop, you wanna make sure that you really wanna stop looping at that point, where you have that return statement.
>> Bianca Gandolfo: Cool, and then, so that same thing with bonjour, put it this down here. I'm sorry, with wow. I'm sorry, with each, it's been a long two days of teaching.
[00:04:00] So, the same check value with each, and how we're gonna do that is because we can't return anything from each, we have to initialize the value before it and return it after. So we're going to loop through and we're gonna check if the value, the first value, equals val, etc, etc.
[00:04:21] If it does, we're gonna say result is true. And it will, but this won't stop the loop, it will keep looping. And then, once we're done looping out of the each, we're gonna return the result. And so, result is false. Unless, proven true. And it will be proven true in here, otherwise it will just remain false and that's fine.
[00:04:41] We're gonna return it down there. Any questions about those first few ones?
>> Speaker 2: I'm looking at underscore, it also has a some function?
>> Bianca Gandolfo: Underscore?
>> Speaker 2: Yeah.
>> Bianca Gandolfo: Has a some function, like s o m e.
>> Speaker 2: S-O-M-E. Which would break off the first term it returns false, part true.
[00:05:05]
>> Bianca Gandolfo: Mm-hm. Cool. Yep.
>> Speaker 2: More efficient than each.
>> Bianca Gandolfo: Mm-hm, mm-hm. So underscore has tons and tons of awesome utility functions that you can go through. And once you get more familiar with the library, you'll these things will just come to you.
>> Bianca Gandolfo: Cool, so we're gonna write a loop that pushes all the values in an object to an array.
[00:05:31] We're going to skip this, and we're just gonna do the map. And so, we're gonna say var, what is it? MyNums equals map, so map is gonna loop through this object. And it's gonna and then the second the first parameter's a value, the second one is gonna be the property name, right?
[00:05:55] So adjust for reference. And then, we're just gonna return val. So val is gonna be 2, 4, 3, and this is the number, not the string, and 12. However, if we wanted to return the property names, we could just return prop. And that would return an array of property names.
[00:06:24]
>> Bianca Gandolfo: Cool. Any questions on that one?
>> Bianca Gandolfo: Cool. So then the last one is filter. It's really similar to map in each, except filter only returns, only returns the true, hold on, let me think how to explain this. So for the callback function, filter just returns. And we'll just add it, if it's true.
[00:07:03] Okay, actually, let me double check that, now I'm starting to doubt myself. Let's look up filters. So loops through the list. Yeah, so pass the truth test. So, if. I see. So I actually implemented it wrong. Excuse me. So, we can just return. It will give the value, if this is true.
[00:07:28] So val mod two will equal zero, if val is even.
>> Bianca Gandolfo: And then, we can double check this.
>> Bianca Gandolfo: Just to make sure.
>> Bianca Gandolfo: Syntax error.
>> Bianca Gandolfo: Okay.
>> Bianca Gandolfo: Curly bracket at the end, I think.
>> Bianca Gandolfo: Thank you. Of course. So I need to, whenever you see this error, underscore is not defined, that means you don't have the library in that window.
[00:08:25] And you can always do a quick check here. Whoops, not that one. Just by, you can literally just type underscore. And for some reason on the annotated source code page, we don't have underscore loaded. But if we check here, we see that we have underscore just returns an object, or a function, I'm sorry.
[00:08:47] Okay. Val is not defined. Val. There we go. So, that's filter. So, filter is going to push whatever values in the array, or I'm sorry, in the object or the array, into an array. If this function returns true. So, val mod two is true. Is equals, equals zero, when it's even.
[00:09:20] Does everyone know how the module works? Thumbs on module. Okay. Cool. Awesome. So do you have any questions on those exercises?
>> Bianca Gandolfo: Let me put the correct answer.
>> Speaker 3: Yeah, I have a question on line 43 there.
>> Bianca Gandolfo: Mm-hm?
>> Speaker 3: [COUGH] So map runs through your object, pulls out each property that you're returning.
[00:09:55] And then, that looks like magic to me, that it puts it into that array?
>> Bianca Gandolfo: It looks like magic?
>> Speaker 3: Both that.
>> Bianca Gandolfo: Is that a question? [LAUGH] Is it magic?
>> Speaker 3: Where's myNums?
>> Bianca Gandolfo: So my.
>> Speaker 3: MyNums is declared right there on line 43, right?
>> Bianca Gandolfo: Right.
[00:10:18]
>> Speaker 3: So we're not telling it's an array, it's an object or anything. So Javascript.
>> Bianca Gandolfo: Well, map always returns an array Map does? So that's just map. Yeah, the mechanics of map is that, it's always gonna return an array, and that array is always gonna contain the values that are returned from this function.
[00:10:37]
>> Speaker 3: Okay.
>> Bianca Gandolfo: So, since we're returning the val here, we know that's gonna be an array of the values. And filters really similar except that, if the value returns true, it will save that into an array. So it's still looping. The only difference with the map is that, it's the array is gonna be the length of the original array or object.
[00:11:03] So this length is important, so we have four properties. So we know that for map, it's gonna return an array with four indices, and filter is cool because you can sort of decide on how long that's gonna be. So you couldn't use map to filter, for example. Even though it kind of seems like it, cuz filter also returns an array, and map returns an array.
[00:11:34] Map always, just the mechanics of the loop, it's always just gonna return the same length, and since filter is a shorter usually, or the same size or shorter. You can't use map.
>> Speaker 4: So will you get a bunch of like, undefined gaps?
>> Bianca Gandolfo: Yeah.
>> Speaker 4: So like, so if you did the modulus on three that'd be undefined.
[00:11:53]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: Stuff like that?
>> Bianca Gandolfo: Yeah, yeah. So, and the difference here is that, this is actually just returning true or false, this isn't returning the value. You know? Where here, you actually have to explicitly return the value. If we did this in map, it would just return, it would be, it would then be an array of true or false values.
[00:12:23]
>> Bianca Gandolfo: [NOISE] Cool. Just went away. Awesome. So, that concludes our everything. Yeah. Thank you guys so much for coming. I'll stick around for more questions. Just a couple things, Mark will be sending out a link to submit for solutions, I'll submit them all in bulk, later today. What else?
[00:12:54] So we teach these classes live at Hack Reactor. About once a month, we have a different class that we teach to the public. You can find that on meetup. So www.meetup.com/ hackreactor, we have all of our events there. We have regular meetups too. Study groups, etc. And we also teach these classes through there.
[00:13:16] All live, in person in San Fransisco. Yeah, thank you guys so much, and I really appreciate everything.