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

The "Invoking a Decorated Function" 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 demonstrates the effect of a function decoration on the existing function, multiplyBy2.

Preview
Close

Transcript from the "Invoking a Decorated Function" Lesson

[00:00:00]
>> Will Sentance: Now things get interesting. David, what am I calling next? I've saved oncifiedMultiplyBy2, and so I'm now?
>> David: Invoking it.
>> Will Sentance: Invoking it. There it is, oncifiedMultiplyBy2 with the input of 10. Now, the reader looks at that and goes, it's multiplyBy2, I'm gonna run multiplyBy2. We know the difference, we know the reality.

[00:00:33]
Instead, what function are we really running, David, when we run oncifiedMultiplyBy2?
>> David: Inner.
>> Will Sentance: [SOUND] Inner, exactly. And thank goodness we are, because inner has what?
>> David: A backpack.
>> Will Sentance: A backpack. And if I wanna limit a function running, I need to remember it's previously being run, meaning I need a backpack to count up that it's previously being run.

[00:01:00]
And then to look out and check how many times have I run inside of oncifiedMultiplyBy2 really inner, whatever I wanna run, which in this case looks like it's going to be multiplyBy2, it's gonna be run under the label convertMe. I'm only gonna allow it to run as long as my backpack counter is 0.

[00:01:18]
I'm editing my function to make it more reusable in new situations. Okay, let's open the execution context. And, this, people, this is, let's put it on the call stack.
>> Will Sentance: Here's our call stack. Putting global. And we now execute oncifiedMultiplyBy2 with the input of 10. Into it we go.

[00:01:52]
I don't even know if I have room here, but, okay, into it we go. And in my local memory. The reason it's gonna be so challenging is, we're gonna be bouncing back and forwards between the backpack. oncifiedMultiplyBy2, again, Jasmine was born as?
>> Jasmine: Inner?
>> Will Sentance: Inner, she's spot on, gosh, here we go.

[00:02:14]
In his backpack it has everything we need, the functionality we wanna run, and a counter to limit how many times that functionality can run. And then, inner's got the code to say, go run the functionality in the backpack, convertMe, I can see it's gonna be run only if the counter is 0, and then increment the counter.

[00:02:33]
[SOUND] All right, here we go. David, first thing in local memory at 10?
>> David: Input.
>> Will Sentance: Input, one on the parameter input. Excellent, from David, there it is. Now we hit our conditional. If counter.
>> Will Sentance: Is 0. Here we go. Where do I look for counter first, David?

[00:03:03]
>> David: Local memory.
>> Will Sentance: Do I find it? Where do I go to next, David?
>> David: Backpack.
>> Will Sentance: It's the backpack of the oncifiedMultiplyBy2 function, I'm calling that. It was born inside the oncification of multiplyBy2, in which inner was created, and pulled out multiplyBy2 in the backpack, and I go find counter is indeed, what, David?

[00:03:20]
>> David: 0.
>> Will Sentance: 0, 0, I wanted to use a different color, hold on.
>> Will Sentance: I put it from the backpack, therefore I'm gonna use it in pink, is 0, is 0 equal to 0, David?
>> David: Yes.
>> Will Sentance: And so, what line do I hit next, David?
>> David: The first line inside of the conditional, which is to define output.

[00:03:45]
>> Will Sentance: Exactly. Okay, hold on, hold on, hold on, give me a second. So, output is going to be the return of calling convertMe with the argument of input. My goodness. Okay, what is convertMe, Anna? Where do I look for convertMe first, Anna?
>> [INAUDIBLE]
>> Will Sentance: David, where do I look for convertMe first?

[00:04:15]
Exactly of?
>> David: Of the current execution code.
>> Will Sentance: Which is?
>> David: OncifiedMultiplyBy2.
>> Will Sentance: Well done, excellent, give it a ten. Do I find convertMe in there?
>> David: No.
>> Will Sentance: No. Where do I look for it next? I'm running oncifiedMultiplyBy, it has a?
>> David: Backpack.
>> Will Sentance: Backpack, a permanent persistent store of memory that I can use, what is that?

[00:04:37]
There you go, that I can use again and again. And what do I find convertMe is?
>> David: In the backpack.
>> Will Sentance: It is, I grab it, and I use it, and it's what?
>> David: It's a function, multiplyBy2.
>> Will Sentance: MultiplyBy2, look at that
>> Will Sentance: Is my oncifiedMultiplyBy2, multiplyBy2? It is so far away from it.

[00:05:02]
It is a function inner that we created inside of oncify, in order that it had a permanent memory even though our multiplyBy2 was not born with one. And then, literally, in that pool of memory is where we store the multiplyBy2 function, wecause we defined inner adjacent to all that, including the parameter argument combination of convertMe and multiplyBy2.

[00:05:23]
So when we return that inner into oncifiedMultiplyBy2, there's our multiplyBy2 function sitting happily, and we grab it. Anna, here's where I say it's the mind. I'm not gonna swear, this doesn't really apply now, it's the mind F, there we go. Here is where I'm gonna say it is, cuz look, we grab the function from oncifiedMultiplyBy2's backpack, which was only there because.

[00:05:43]
When oncifiedMultiplyBy2 was created as inner inside of oncify, we had multiplyBy2, the functionality we wanted, so oncify, in the convertMe parameter, meaning it came out into here. Where do we get the thing we're gonna pull in and actually multiply from, Jasmine? What are we gonna pass in to convertMe, which is multiplyBy2?

[00:06:08]
>> Jasmine: The 10?
>> Will Sentance: Which comes oncifiedMultiplyBy2's direct execution context. We're gonna grab it straight from there. The functionality that we're gonna run that's to be oncified, came from the backpack. The condition under which we were gonna confirm we're allowed to run it came from the backpack. And then, the thing we're gonna run multiplyBy2 on came dynamically live as the input to our pretend oncifiedMultiplyBy2 function.

[00:06:39]
So, we as the reader are like, the 10 goes in, it must be just multiplyBy2. [LAUGH] It's being passed through a layer in to a running at multiplyBy2 inside of oncifiedMultiplyBy2. Oncify and more opportunities wrapping up, it's in sight, well, they call it decorating the underlying function, which we grabbed from the backpack and pull it through.

[00:07:04]
Okay, output of that, Jasmine, is?
>> Jasmine: 20?
>> Will Sentance: 20, and we stole that where?
>> Jasmine: Output?
>> Will Sentance: It's output, there it is, 20. And then the final, but ultimate thing we do is what, Sam?
>> Jasmine: Increment counting.
>> Will Sentance: We increment the backpack counter. My God, there it is.

[00:07:20]
Counter++ it's in the backpack, we increment it to 1. And then finally, Jasmine, we do what?
>> Jasmine: Return?
>> Will Sentance: The value of?
>> Jasmine: Output, which is 20.
>> Will Sentance: Exactly 20. We don't store it anywhere, but there it is. Look at that, people, we created a function. We didn't create a function, well, we did.

[00:07:45]
But, we appeared to edit a multiplyBy2 function to create a function under the condition of counter still being 0 worked, and appeared to look just like multiplyBy2. It's called function decoration. It's profoundly significant, especially in this model. But we're not done yet. Let's put oncifiedMultiplyBy2 off the call stack, and run it again, this time with the input of 7.

[00:08:14]
I remove it, put it back on, if you wanna erase it over, put it back on. Let's run it again. OncifiedMultiplyBy2, input of 7. New execution context. Andrew, into it we go. Into it we go, and what's the first thing in local memory, given, Andrew, oncifiedMultiplyBy2 is really just?

[00:08:44]
>> Andrew: Input, which is 7.
>> Will Sentance: Input, which is 7. Input, which is 7, and now we do our check. If counter is 0. Counter in the local memory, Andrew?
>> Andrew: No.
>> Will Sentance: No, where is it?
>> Andrew: It's in the back.
>> Will Sentance: And what is the value counter?
>> Andrew: 1.

[00:09:03]
>> Will Sentance: And is that equal to 0?
>> Andrew: No.
>> Will Sentance: No, it's not. So what do we auto return out?
>> Andrew: Sorry.
>> Will Sentance: You've turned out sorry. And there it is, people. We have here used giving functions backpacks to actually edit the behavior, or the apparent behavior, or, sorry, apparently edit the behavior of our multiplyBy2 function.

[00:09:30]
Making it more reusable in other places in our code.

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