Higher-Order Functions with Closure Exercise

Lesson Description
The "Higher-Order Functions with Closure Exercise" Lesson is part of the full, Functional JavaScript First Steps, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Students are instructed to create higher-order functions that close over the diamondPattern function. These higher-order functions will "lock in" values with closure to create more specific SVG-generating functions.
Transcript from the "Higher-Order Functions with Closure Exercise" Lesson
[00:00:00]
>> Anjana Vakil: So in our next exercise, we are going to revisit our diamond pattern. And this time we're not gonna ask, [LAUGH] we're just gonna test it, cuz we don't need to visually inspect the result of a pure function. We know if we give it the same inputs, it's always gonna give us the same output.
[00:00:18]
So we already figured out our impure rendering bit. We don't care about that anymore, that's on the outer edge, we don't need to actually see the that. We just need to make sure the computer verifies it is correct. So in this case we're just running some tests, and these tests are using a couple of new pattern functions.
[00:00:37]
So, we have our diamond pattern, which takes in two different colors, maybe different, but two color arguments and a width. And what we're gonna do here, is use closure to define new higher order functions that lock in some of the values, okay? So, for example, I wanna be able to get a monotone pattern.
[00:01:09]
This is a partial application of our diamond pattern. Purple pattern is partially applying values to the diamond pattern thing. In this case, it's locking in color1. Is monotone a good name for that? Probably not, but bear with me. Okay, so similarly, we're gonna have a fixed width pattern, which is gonna lock in the width value instead.
[00:01:33]
And then we're gonna have one that makes a monotone and fixed width pattern that locks in two values. So, your job is to make the tests pass, I've already kind of called some of these make pattern functions, but your job is to define those functions, and make sure that they return functions that have those given values locked in to the diamond pattern.
[00:02:01]
Let's take a moment and stretch our functional muscles.
>> Anjana Vakil: In make monotone pattern, we want to return a function. So I'm gonna start you out with, not anything useful, but a little scaffolding. This function, what arguments is it gonna take?
>> Speaker 2: Color1 and width.
>> Anjana Vakil: It's gonna take the rest of the stuff.
[00:02:40]
So this is gonna take in a color1, and a width, and it's going to return?
>> Speaker 3: Diamond pattern.
>> Anjana Vakil: The application of diamond pattern to color1, but also our closed over value color2,
>> Anjana Vakil: That is not one of the arguments here, cuz it's locked in by from our outer scope and our width.
[00:03:12]
A few of the tests are passing, seems that the failures are related to the rest of our functions, so we are golden. Let's keep going with the fixed width pattern. I'm just gonna
>> Anjana Vakil: Yank, and how do we need to modify what we did before? I know y'all can do this [LAUGH], so instead of taking in the color1 and the width, we're going to take in-
[00:03:46]
>> Speaker 4: Color2.
>> Anjana Vakil: The color2 instead, but same deal, we're locking in one of the variables, it's just changed, which one it is. This is interesting point, so I'm using these function keywords, but we could also write this totally validly with arrow functions, and some corrections to our curly braces.
[00:04:10]
This is a personal choice, if you prefer feeling like a fancy one line code type of thing, instead of using the function keyword and the curly braces. And again, I'm a big fan of error functions, especially for functional programming, because they make it really clear that we're just returning a value.
[00:04:30]
So we could have written it that way, too. So let's take this, and let's try to use the same principle to make our monotone fixed width pattern, which is gonna return a pattern function that locks in two values and takes in just the remaining value. So this is gonna lock in both color2 and width, and we're gonna return a function that takes in only color1 and closes over the others.
[00:05:04]
>> Anjana Vakil: We have our diamond pattern, originally, it takes in three different values, meaning it's a ternary function, it takes three arguments. And we've used that to make these partial application functions, a monotone pattern, a large pattern, or a small pattern, or what have you, a small monotone pattern, etc.
[00:05:25]
So those are partially applied versions of these that lock in those values that we want to remember, thanks to the notion of closure.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops