Functional-Light JavaScript, v3

Spread Adapter

Kyle Simpson

Kyle Simpson

You Don't Know JS
Functional-Light JavaScript, v3

Check out a free preview of the full Functional-Light JavaScript, v3 course

The "Spread Adapter" Lesson is part of the full, Functional-Light JavaScript, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle discusses a common problem with arguments in functional programming where input elements are in an array instead of being individual arguments, and demonstrates how to use the apply function to spread them.


Transcript from the "Spread Adapter" Lesson

>> Kyle Simpson: Another example of shape adaptation that we commonly do, you will see this much more often than may be obvious at this moment. One kind of shape adaptation is I have a function that takes individual arguments, but I wanna call that function with an array. It's expecting individual arguments, but here I have an array.

What do I do? How do I get all the contents of this array into the individual arguments? Some of you may know about JavaScript's .apply method, which just takes an array and spreads the values out as arguments. And there's a reason why that utility is called .apply, because that's what functional programmers call it.

When you take an array and spread it out as individual arguments, that's called an apply. Here I've called it spreadArgs, just so you knew exactly what it's doing. It's spreading the argument, the array of arguments, out into individual ones. See how it does line three, the ..., that's the spread operator.

It is spreading out an array of arguments into individual ones. But that's exactly what JavaScript's .apply does, and it turns out the name for this utility, as you'll find it in almost all functional programming libraries, is apply. So the apply, g is the apply of f. Line 11, it's the spread Args, it i's the apply of f.

So, when I call g with an array, f gets individual arguments. Everybody follow me? Here is a little pop quiz. We're not gonna actually show this code but I just want you to just play with this in your head, maybe type it in your code for just a moment.

This is a pop quiz. If spreadArgs is a function that can take an array and spread it out onto individual ones, what's the inverse of that? What would unspreadArgs look like? Unapply, what would that look like? I would be able to pass in individual arguments, and the underlying function would receive what?

>> Speaker 2: An array.
>> Kyle Simpson: An array. Just think about that for just a moment, we'll just take like 30 seconds. As the pop quiz, I want you to think about, look at that spreadArgs and think how would I change this to do the inverse?
>> Kyle Simpson: It's not as complex as you might have thought the ..., operator on line three, we simply need to move it from line three to line two.

We need to gather the arguments from line two and pass them as a single array, line three, that's it. That's the only difference between a spreadArgs and a gatherArgs or an apply and an unapply, is whether we gather first and then pass the array, or take an array and then spread it.

It's the only difference between the two, and you'll find apply and unapply in all your favorite functional programming libraries.

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