Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Functions Review" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will reviews how two different functions are executed in detail. The audience is asked to describe in great technical detail how a function executes in JavaScript, and have solid foundations for the rest of the class.

Preview
Close

Transcript from the "Functions Review" Lesson

[00:00:00]
>> Will Sentance: Now, we move onto the beauty of higher order functions. On the very next slide, we're gonna see a task, a function, there's gonna be profoundly similar, profoundly similar. And we're gonna go it must be some better, and then on the third slide we're gonna see the same function with only another slight change.

[00:00:22]
And we've got to ask ourselves, there must be a better way. But I'm gonna literally want you to get bored in the next few minutes because when you get bored, you're never going to make this mistake again. You're never going to want to deal with this situation again.

[00:00:40]
You're never gonna put yourself in this position again. Where something takes so much longer, because you're doing a repeatable task that could have been done once. You're never gonna be put in that position again, you're gonna fight it in the future. You're gonna stay with your instincts and say, actually, maybe there's a better.

[00:01:02]
[LAUGH] All right. [LAUGH] Okay, good.
>> Michael: It's called going meta.
>> Will Sentance: Seth, line one, what are we doing here? It does look good, though, at the end, right?
>> [INAUDIBLE]
>> Will Sentance: It is quite big.
>> Michael: Global context.
>> Will Sentance: Yeah, global context, with saving in memory what, Seth?
>> Michael: Renaming it some ungodly long name, copyArrayAndMultiplyBy2.

[00:01:27]
>> Will Sentance: CopyArray, some clear semantic name, copyArray, MultiplyBy2, saving it there it is. Next line, we're going to go to, Charles, if we say copyArrayAndMultiplyBy2, what's our next line, Charles, do we actually [INAUDIBLE] does?
>> Michael: It's gonna be myArray.
>> Will Sentance: Yeah.
>> Michael: And it's gonna be assigned 1, 2, and 3, yeah.

[00:01:53]
>> Will Sentance: An array of 1, 2, 3, excellent. Next line, who hadn't called on yet, [SOUND] Mike, [LAUGH] Michael, Michael, what we doing the next slide left hand side?
>> Michael: We're assigning to result, we're assigning the result of-
>> Will Sentance: Yeah.
>> Michael: Calling that function.
>> Will Sentance: The return value of executing copyArrayAndMultiplyBy2.

[00:02:14]
People, that level of technical communication, if you are finding this earlier stuff a little bit too manageable, focus on the quality and precision of your technical communication. That's the ability to communicate what your code is doing with such precision that somebody else could actually implement it, just by hearing you verbalize it.

[00:02:30]
That is a key feature of a senior developer. And I take my understanding of the code base and make it meaningful to people who are not even seeing it yet, that's a real skill. Excellent, so result is declared. While we head off and we execute copyArrayAndMultiplyBy2 with the input of myArray which is 1, 2, 3, there it is.

[00:02:57]
We create, and because all of you are not yet bored by saying this, you can say it instead of me. We create a brand new?
>> Michael: Execution context.
>> Will Sentance: Very nice, I hope the online audience is typing that in vigorously. And there it is, a thread of execution goes in, and in our local memory, I'm going to try and keep this tidy for posterity people.

[00:03:20]
In our local memory, we have what?
>> David: David, first thing? We have the const output.
>> Will Sentance: That's the second thing we do.
>> David: I'm sorry, the parameter coming in with the-
>> Will Sentance: I would even say, the parameter is not coming in. The parameter is in there waiting, the argument is coming in.

[00:03:41]
The parameter is our placeholder, the label array being filled in with what, David?
>> David: 1, 2, 3, of myArray.
>> Will Sentance: Exactly, and that is our?
>> David: Value.
>> Will Sentance: Yep, often nodes specifically in this situation as our?
>> Will Sentance: Jasmine?
>> Jasmine: Argument.
>> Will Sentance: Our argument, excellent. Parameter, argument, parameter, argument.

[00:04:03]
David, what's this?
>> David: An array.
>> Jasmine: [LAUGH]
>> Will Sentance: David! Was that a joke?
>> David: Yes, it was.
>> Will Sentance: [LAUGH] Hilarious, all right, good. Remove it, all right, okay? Output is in the array, we declared, that’s what we need, right? We wanna take it out, input array, create a new output array, loop it through the input array, double each element, stick them in the output array, great, okay?

[00:04:27]
Not profound maybe but let’s keep going. So now we're hitting the for loop, and I'm gonna diagram my for loop like this. I'm gonna take my array 1, 2, 3, I'm gonna use this sort of the left hand side where the thread is executing just like is gonna working area.

[00:04:42]
I'm not copying them, I'm just working on them here. For the way about how for loop works, I like not to speak in hypothetical loop through, no, no, no. First time you hit the body of it, i's value is literally what, Sam?
>> Sam: Zero.
>> Will Sentance: Zero, array position zero, is what?

[00:04:59]
Array position 0 is? Array index zero is?
>> Sam: That's the index.
>> Will Sentance: Yeah. [LAUGH] Array zero is?
>> Sam: One. Zero.
>> Will Sentance: Is one. Is it one? Yes, David, array zero is one. Array is 1, 2, 3, array position 0 is 1, when you take that 1, we do what with it, Mike?

[00:05:19]
>> Mike: We multiply it by two.
>> Will Sentance: We multiply it by two, we get two, and we do what with that, Jasmine?
>> Mike: We push it onto the-
>> Will Sentance: We push it onto the what?
>> Mike: Onto the output.
>> Will Sentance: Output array. It's a for loop though, and this time around, Andrew, i is what?

[00:05:36]
>> Andrew: One.
>> Will Sentance: One, a reposition one is what, Andrew?
>> Andrew: Two.
>> Will Sentance: Two, by the way don't worry, maybe I've given this talk here but on iterators, I started off by having people experience developers verbalize the value of i and the value they wanna find in an array.

[00:05:54]
And consistently, I would say eight out of ten times when I asked him what's the value of i, they say one, because everybody really in their heart doesn't care so much about the position of the element as just the element. So don't worry if they have sign you for an offer.

[00:06:14]
2 by 2 is 4, we push it to output there, it is 2, 4, 6, so there's our output array 2, 4, 6. We finished our for loop, we move quickly through this. And Virginia, the final line of calling copyArrayAndMultiplyBy2 with the input of 1, 2, 3, the final line is, we've got our lovely output array there but it's stuck inside our execution context, how do I get it out, Virginia?

[00:06:37]
>> Virginia: Return.
>> Will Sentance: I return what?
>> Virginia: That array.
>> Will Sentance: Absolutely, I return the value of output which is the array, out in, Virginia, to what global label?
>> Virginia: Result.
>> Will Sentance: Into result, there it is, 2, 4, and 6. Good, I took in an array 1, 2, 3, I created a brand new array with the each element doubled 2, 4, 6, and not an unusual they are feasible task to do.

[00:07:05]
Do you like this function? Do you love this function? You're gonna love my very distinctive next function. So different. What are we doing? I'm gonna do it down here for the first time, how about that?. Alex, what are we doing here in line one with this radically different function?

[00:07:27]
So different.
>> Michael: Storing label of copyArrayAndDivideBy2?
>> Will Sentance: Yeah, exactly, and actually, this is a whole new app. There it is, a whole new app, so don't think about the memory being crossing over, copyArray and DivideBy2. It's a whole new function, we're having to write and save all of its code all over again.

[00:07:54]
And the next line, Alex?
>> Alex: Creating a storing label of myArray.
>> Will Sentance: Yeah.
>> Alex: The value of the array of 1, 2, 3.
>> Will Sentance: Yeah, okay, yeah, exactly, 1, 2, 3, next line, Sam?
>> Sam: You declare copy or you invoke copyArrayAndDivideBy-
>> Will Sentance: Right, but the left hand side first, yeah, where I declare result exactly., and it's it's what right now?

[00:08:19]
>> [INAUDIBLE]
>> Will Sentance: Uninitialized, yeah, we don't yet know what to store in it, okay? But we do have an idea what to do to figure out what to store on it. We go off and run, Sam?
>> Sam: You're invoking-
>> Will Sentance: Go ahead.
>> Sam: copyArrayAndDivideBy2.
>> Will Sentance: DivideBy2, with what argument?

[00:08:40]
>> Sam: myArray.
>> Will Sentance: Which is what value?
>> Sam: 1, 2, 3.
>> Will Sentance: 1, 2, 3, excellent. There it is, and it’s output will be stored into results. Let's create the new?
>> Sam: Execution context.
>> Will Sentance: Execution context, [LAUGH] well, already, Mike's voice has become execution context. [LAUGH] Here it is, let's go into it, there it is.

[00:09:10]
And in local memory, what's the first thing we have? And try and be as precise as possible with the technical communication here. Try and be as precise as possible, David, you're up. We have what in our local memory, David?
>> David: We have an array, which is the parameter.

[00:09:34]
>> Will Sentance: Nope, giggling, [SOUND] be supportive.
>> David: Argument.
>> Will Sentance: Argument, excellent, David. Exactly, thank you, David, spot on. And moving this one on as well, and our parameter, David, is?
>> David: Array.
>> Will Sentance: Array, that's our placeholder name in which we're gonna fill in with the actual value. Very nice from David.

[00:09:50]
Thank you, David. There it is, array. Next line, Jasmine?
>> Jasmine: We're declaring output.
>> Will Sentance: Yeah, exactly, we added the body of the function, now output is an empty array. Let's use that output array, let's fill it in with each element from the input array, this time halved. Okay, for loop, we're gonna diagram it on this side here so it's easier to work with array 1, 2, 3, output is an empty array.

[00:10:20]
There it is very nice. And, Ana, first time you get the body before your i's value is?
>> Anna: Zero.
>> Will Sentance: Zero, array position, zero is?
>> Anna: One.
>> Will Sentance: One, one divided by two is?
>> Anna: 0.5.
>> Will Sentance: Not 0.5, yeah, I'm going to spread that British pronunciation, not 0.5.

[00:10:44]
>> Will Sentance: I can't tell you this, I can't tell the same joke at [INAUDIBLE]. And not 0.5, and do what with it, Anna? Do what with the 0.5?
>> Anna: Push it onto output.
>> Will Sentance: Push it into output, excellent. Thank you, Anna, there it is. And now, i's value is what, Jasmine?

[00:11:03]
>> Anna: One.
>> Will Sentance: I's value is one, array position one is?
>> Anna: Two.
>> Will Sentance: Two, two by two is?
>> Anna: One.
>> Will Sentance: One, we do what with it?
>> Anna: Push it onto the-
>> Will Sentance: Okay and then the final 1.5. There it is, 0.5, 1, 1.5. We grab that array, the value of output, and we return it out to where, Jasmine?

[00:11:22]
>> Jasmine: Result.
>> Will Sentance: Into result, excellent, Jasmine, thank you.
>> Will Sentance: There it is.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now