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

The "Decorating a 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 what function decoration, or higher order function is, and how it runs.


Transcript from the "Decorating a Function" Lesson

>> Will Sentance: Here we go, Seth, line one, my friend, what are we doing here, take it away.
>> Seth: A function called oncify.
>> Will Sentance: Excellent, into global memory goes, there it is. Oncify is saved. Next line, Jasmine.
>> Jasmine: I'm declaring multiply by 2 as a function.
>> Will Sentance: There it is, multiply by 2 is a function, it takes in, there it is, it's a function not within, but an nom, and the result of nom by 2.

Next line.
>> Seth: [INAUDIBLE]
>> Will Sentance: That's exactly. He knew I was gonna ask, this is it. Anyway, left hand side, yes.
>> Speaker 4: Once right, multiply by 2.
>> Seth: Absolutely, and everybody who sees these thinks that oncify is gonna somehow mutate, as it multiply by 2 to make it limited to only run once.

Can I edit functions after they've been saved, Virginia?
>> Jasmine: No.
>> Will Sentance: No, [SOUND], so instead, we're going to trick the reader, [LAUGH], into thinking it's edited, but in reality, and that's a problem, right? It's gonna be more readable in a sense, but we're not gonna have to work under the hood, and therefore, harder to debug.

We will know. We're gonna make oncify multiplied by 2 as a brand new function with a backpack. And I have a feeling, we're gonna stall the multiply by 2 function into oncify multiple by 2 backpack. We're then gonna store more than just data there. We can store functionality in oncify multiply by 2 backpack.

Oncify multiplied by 2 is going to be the return value of calling oncify on multiply by 2. There it is, everyone together, a brand new-
>> Speaker 5: Execution context.
>> Will Sentance: Beautiful, here it is, not a huge one, because its main job, people, is to set up a function that will be stored into oncify multiplied by 2.

And who has two key things attached to it, in its backpack, in its persistent memory. Functionality multiple by 2, and a count to keep track of how many times has been run. So that's what we're doing inside oncify. So let's go into it, and the local memory, what is the first thing, Michael, inside of oncify's local memory?

>> Speaker 4: Counter?
>> Will Sentance: That's a second thing. What's the first thing we need?
>> Speaker 5: Right, convert me.
>> Will Sentance: Exactly, this parameter convert me, which has stored on it, what, Michael?
>> Speaker 5: Multiply by 2.
>> Will Sentance: The entire multiply by 2 functionality. There it is, with imperative nom, and return value of nom by 2.

All right, that's counter. And finally, the final thing, Andrew, that we do inside of oncify, it's a bigger also, the penultimate thing, the biggest the big thing we save is what? The function? The function nom button known as?
>> Seth: Inner
>> Will Sentance: Inner, there it is, there it is.

But we missed something. When I save a function inside the running of another function set, what also happens?
>> Will Sentance: When I save, Jasmine, a function inner inside the running of oncify, it gets what?
>> Jasmine: An execution context?
>> Will Sentance: When I save it, definitely not.
>> Jasmine: You get a backpack.

>> Will Sentance: I get, what, a link. I wouldn't even call it a backpack, I get a link to all the surrounding memory.
>> Will Sentance: Meaning, Sam, when I return the functionality known as inner out into what global label, Sam? The functionality declared inside of oncify is inner, it gets returned out into what global label, Sam?

>> Sam: Oncified-
>> Will Sentance: Oncified multiplied by 2. When I return it out,
>> Will Sentance: Out it comes, it was born as inner. There it is. It was born as inner. What's it bring with it, Virginia?
>> Virginia: The backpack.
>> Will Sentance: The backpack, exactly, attached onto it is, and look at what's inside of it.

It's got,
>> Will Sentance: What's it going inside of it, Jasmine?
>> Will Sentance: What's inside the functions backpack?
>> Jasmine: Multiplied by 2?
>> Will Sentance: Multiply by 2. But that's fantastic, right? Because we want this oncyfied multiplied by 2, to have the ability to run, multiply by 2. Is it, is oncified multiply by 2, multiply by 2?

It's a brand new function called inner that has a backpack into which we store. Whatever we pass into oncify, in which that function inner was created, and then, pull that stuff out on the back of inner. Inner's only job is to determine by looking in its backpack, in new bytes new name, oncified multiply by 2.

His only job is its own by looking at his backpack. Am I allowed to run from the backpack, the multiply by 2 function? Okay, what's the other thing, Jasmine, in the backpack?
>> Jasmine: Actually, I had a question first.
>> Will Sentance: Hold on one second, I promise. What's the other thing in the backpack, Jasmine?

>> Jasmine: The counter.
>> Will Sentance: Counter set to what?
>> Jasmine: To 0.
>> Will Sentance: Set to 0. Go ahead, Jasmine.
>> Jasmine: So the backpack is created once the inner function is created.
>> Will Sentance: As soon as inner is created, it gets a link to exactly the surrounding local memory. When inner gets returned out of running oncify into where?

>> Jasmine: Oncify-
>> Will Sentance: Oncify multiplied by 2. It pulls with it all that data, exactly. And what is that data? Well, it's the function we want to convert into being a function with a memory. And, it's the counter that's gonna allow us to keep track of whether multiply by two has been run before inside of oncified multiply by 2.

All right, and this execution context, everybody, this point, gone. Exactly.

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