Check out a free preview of the full A Practical Guide to Algorithms with JavaScript course

The "Wrapper Functions" Lesson is part of the full, A Practical Guide to Algorithms with JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Bianca introduces wrapper functions as a pattern for recursion.


Transcript from the "Wrapper Functions" Lesson

>> Bianca Gandolfo: So next we're going to talk a little bit about two patterns for recursion. The first one is a wrapper function, and the second is the accumulator pattern.
>> Bianca Gandolfo: [LAUGH] I love my own jokes. So awesome, okay, so back to our looping, we're going to loop first, this is our original loop, actually.

So the loop that we already did, we're using a wrapper function. And in this one, we are just passing our values each time. So let's investigate how this loop works using our call stack game. All right, so let's call, what are we gonna call it with, let's just call it with 1 and 3, so.

>> Bianca Gandolfo: So this is like our function's actually being called over here. And then somewhere else, inside your execution environment, your browser, or wherever you're running your JavaScript, this is happening,
>> Bianca Gandolfo: Over there. Okay, so i is 1, and 3 is the end, okay, so we're just gonna remove this console.log.

>> Bianca Gandolfo: Just so that we have a little more space here. So we will start, so this is a lot shorter than the other one, but it's doing the exact same thing. So we are going to check, is i greater than 3, yes. So we're gonna do the thing where we add our function to the call stack.

Cuz we're executing the function, and we're creating a new execution environment. All of these scoped variables live in a separate world from these scoped variables. How, then, do we get i and end in this execution context, we get that by passing it in, so what do we pass in?

And I'm just gonna put our line there, we are passing in i + 1, which is 2, then end, we're not doing anything to it, 3. So we're just passing it through, and then we say i is two, 2, end is 3, that is still working for us.

So we're going to call it again, we're gonna add it to our call stack. Again, we're just leaving off right here, just a little reference of where we were before.
>> Bianca Gandolfo: So then, 2,
>> Bianca Gandolfo: [LAUGH] 2 + 1 is 3. Okay, so is 3 less than 3, no, so we have our implicit return.

Implicit return, and we pop, again, we are gonna finish up where we left off with this line. And we're gonna move down here, we're gonna have our implicit return and pop, random continue here where this line is. And again, this is important if we were doing more work, which a lot of times, you will be doing more work in your recursive functions after this line.

And it's important to recognize that the stuff that happens after this line, even though this is the first call, anything that happens after this line is actually happening last, so just keep that in mind.
>> Speaker 2: What's the purpose of this if it returns back undefined, right, so why are we even doing this?

>> Bianca Gandolfo: Just as an exercise on how we can loop and how we can pass things around, and get to a certain base case. Without having to worry about, what is an intermediary step that we need to take, and what is our big picture problem that we're solving. We're starting with a small problem, which is, let's just loop and console.log some stuff, and see how this executes.

And then we're gonna take this and apply it to some sub problems. Right, recursion is just all about breaking a bigger problem into sub problems and then calculating through each loop. Okay, so implicit return, pops it off, so this is doing the exact same thing as,
>> Bianca Gandolfo: Our other one that we were doing earlier.

Which is defining a function, calling it here, while we're retaining access to the closure. So one is using a closure with a recursion,
>> Bianca Gandolfo: And this one is not, that's the difference.
>> Bianca Gandolfo: Any questions about the difference between these approaches?
>> Speaker 3: So we said the first one has a closure in it?

>> Bianca Gandolfo: Yep.
>> Speaker 3: But there's no returning of the function though, right, so-
>> Bianca Gandolfo: No, yeah, that's a good point, so this closure is not. So a closure happens when you have a function inside of a function, which in JavaScript land is all the time, so it's kind of almost silly.

However, things get interesting when you return a function that is in a closure. So that's when we can do the interesting thing with the generic memowise, is because we're returning that function that has access to closure scoped variables. And so we have this interesting interface where we can interact with scoped variables that are static.

And then we can create new execution context for our child function. So interesting things can happen when we do that, but you don't have to do that for it to be a closure, yeah. And so end, for example, the fact that we're referencing end while we're in here is accessing a closure scoped variable, yeah.

>> Bianca Gandolfo: But you don't need to know the vocab words. You just need to be able to make it work, and understand how it runs when you press this play button.

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