JavaScript: From Fundamentals to Functional JS, v2 _.map() Solution, Part 2

Transcript from the "_.map() Solution, Part 2" Lesson

[00:00:00]
>> Bianca Gandolfo: So in implementing _.map(), we need to make sure that we return an array somewhere, right? Okay, what else do we need to do?
>> Speaker 2: Create an empty array to store.
>> Bianca Gandolfo: Yeah.
>> Bianca Gandolfo: To store e, right,
>> Bianca Gandolfo: Anything else?
>> Bianca Gandolfo: How about this corner?
>> Speaker 3: Do we need to check if the list is an array?

[00:00:38]
>> Bianca Gandolfo: Mm-hm.
>> Bianca Gandolfo: And, in fact, for this, since we're getting late on time, we'll just do it for array.
>> Bianca Gandolfo: We'll just skip the doing both.
>> Bianca Gandolfo: Okay, you're letting me spell badly in public. It's like me having spinach in my teeth and you not telling me. Just so you know, that's really rude, it violates my trust in you.

[00:01:11] Okay so we're gonna create an empty array and we're going to return an array. I think there are some steps in the middle. We need a loop.
>> Bianca Gandolfo: And then what do we need to do in that loop?
>> Speaker 4: Call back on each element and then push it to the storage array.

[00:01:43]
>> Bianca Gandolfo: All right, seems like a solid plan. What do we think, anyone else have extra steps you think we should consider? No, okay. So let's create our array. We can say var, call it storage, okay? We're gonna loop, so we're just gonna assume the list is an array.

[00:02:14] So = 0.
>> Bianca Gandolfo: list.length
>> Bianca Gandolfo: [LAUGH] Just seeing if you're on your toes, I know it's getting late in the day. Okay, so we're looping. What's the next thing we wanna do?
>> Speaker 3: Push every,
>> Speaker 3: And then see every i to the storage, the empty array.
>> [INAUDIBLE]

[00:02:56]
>> Bianca Gandolfo: Close.
>> Speaker 5: Run it through the callback?
>> Bianca Gandolfo: Yeah, want to call on the callback.
>> Bianca Gandolfo: Okay.
>> Bianca Gandolfo: Do we wanna run it with i though? What's i again? It's just gonna be a number.
>> Speaker 6: Is it list i?
>> Bianca Gandolfo: list.i, yep. And then, i and the list

[00:03:27]
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: How do we feel? Feeling good? You think this will explode or you think it'll run?
>> Speaker 7: Both.
>> Bianca Gandolfo: That would be exciting, right? Okay, so let's do our test case here. We want to give it a list, and then we need to give it our callback function.

[00:04:04] And then we need to return the val + 1, and we'll put the value here, okay? So, what should this print out, or what should this return?
>> Speaker 8: An array of two, three, four.
>> Bianca Gandolfo: Yep, exactly.
>> Bianca Gandolfo: So we're expecting that. Let's take it for a whirl.
>> Bianca Gandolfo: This is where you're just like, please work, please work.

[00:04:40]
>> Bianca Gandolfo: All right,
>> Bianca Gandolfo: So hey, this is our last chance to make sure there's nothing that's gonna make it explode. Are we confident in this piece of code? If this was taking us to Mars, [LAUGH] just kidding you'd never do that in a JavaScript.
>> Bianca Gandolfo: We knew it guys.

[00:05:03] Come on, we have to snap, it's more fun, this is the celebration phase. There we go, you guys can do it, you both have two fingers at least. Cool, so there we are.
>> Bianca Gandolfo: Come a long way. Let's see, it is past 4, so I'm gonna replace this for loop.

[00:05:27] I've been trying really hard not to say puns all day, but I did. All right, so I want to do each instead because functional programmers don't like loops. We like to use functions that do the loops for us so we don't have to think about it. Okay, so,

[00:05:51]
>> Bianca Gandolfo: How do we translate? I guess I can leave the loop here so we can look at it. How do we translate this looping situation into our each? What's our list?
>> Speaker 9: Just list.
>> Bianca Gandolfo: What's our callback?
>> Speaker 9: Just call back.
>> Bianca Gandolfo: Is there a function callback?
>> Speaker 2: It's cuz you already are taking in a callback function.

[00:06:24]
>> Bianca Gandolfo: But what happens if we do this?
>> Bianca Gandolfo: And we get rid of this?
>> Speaker 2: You'd still have to push it to an array.
>> Bianca Gandolfo: Yeah, it's not pushing it to the array. So we're skipping some functionality.
>> Speaker 2: I see.
>> Bianca Gandolfo: Yeah, but that's a common misconception.
>> Bianca Gandolfo: All right, so we have our value,

[00:06:50]
>> Bianca Gandolfo: And of course,
>> Bianca Gandolfo: What are we doing here? Where were we? Okay, we were translating our for loop into each, which seemed easier earlier right? It was not a big deal and suddenly we're throwing it in here and it gets a little funky, right? I think what makes it complicated is that,

[00:07:19]
>> Bianca Gandolfo: The nested function thing, right, adds some borders there, but it's really these arguments, right? We need to make sure that we're keeping in mind this, and not,
>> Bianca Gandolfo: These ones.
>> Bianca Gandolfo: All right, so what was the thing that we wanted to do? So we looped through it.

[00:07:50] So now this is looping, right? It's looping, it's calling an empty function, great, what was the second thing we need to do?
>> Speaker 10: Push it.
>> Bianca Gandolfo: Push it.
>> Bianca Gandolfo: So how do we push it?
>> Speaker 3: Storage.push?
>> Bianca Gandolfo: Mm-hm, all right, what are we gonna?
>> Speaker 3: Is it just v?

[00:08:12]
>> Bianca Gandolfo: Mm-hm, and list.
>> Bianca Gandolfo: Cool, so we have access to this in our parent scope. So we'll just push it, with the value, the index, and the list, because that's the expected behavior. We have access to all of that data. Sorry.
>> Bianca Gandolfo: There, with a callback so what ever the callback returns should be pushed to our storage.

[00:08:49]
>> Bianca Gandolfo: Cool,
>> Bianca Gandolfo: Questions?
>> Bianca Gandolfo: Which one do you like better, the for loop or the each?
>> Speaker 2: Each.
>> Bianca Gandolfo: Each? Feels a little fancier, right?
>> Bianca Gandolfo: All right,
>> Bianca Gandolfo: Any questions about each or map?
>> Bianca Gandolfo: it's like one of those things that you take for granted. And then you realize, it's a little challenging when you haven't thought about it that way.

[00:09:32] But then, once you get used to thinking about it that way, it starts to feel natural. So if it's feeling unnatural right now, and this is the first time you ever done that, that's totally normal, that's where you should be. It took us a whole day to get to this point and we even skipped ahead.

[00:09:53] Usually I wait to do this until after we talk about functions, but I thought let's just push ahead and do the fun stuff earlier than usual
>> Bianca Gandolfo: So, if it's feeling a little uncomfortable, totally fine.
>> Bianca Gandolfo: But it'll become natural. And I think implementing the internals forces you to really think about what's happening rather than kind of just letting it run and see what happens, letting it run and see what happens.

[00:10:23] And a tip I like to give is to never do that. It is to actually seek to understand all the code that you write. So, this means don't like change something, save it, refresh see what happens, change something, fiddling like that. It might seem faster or maybe it feels easier cuz it takes less brain power.

[00:10:47] But in the long run, you're not gaining the skill of properly modeling your program in your mind. And so,
>> Bianca Gandolfo: Once you're able to model your program in your mind it's going to be easier to catch bugs without having to go back and forth refresh, etc., rerun it, whatever it is you're doing.

[00:11:10] It also will help you start to understand when you're code is too complicated to hold it in your mind. If you're code is starting to get too complicated to hold in your mind, that is a sign that your code should be simplified. It can be rewritten in a way that is easier to hold in your mind at one time.