Use Lodash Curry to Build Utility Functions

John Lindquist: [0:00] I have this button reference in this element on my index HTML. We'll go ahead and add a event listener to it by using button.addEventListener. Type in click and then, type in a callback where we can log to the console and log something like clicked. I'll go ahead and click the button, and you'll see clicked in the console.

[0:22] Now, we can wrap this entire thing inside of a function. We'll call that function addEventListener, and make it a standard arrow function, and cut and paste this inside of that function. Now, we'll extract all the pieces that we can the element, the event type, and the listener.

[0:39] We'll extract this, we'll call this element, and type that in as an argument. We'll extract the event type, we'll call this eventType, and add that as an argument. We'll extract this listener, so I'll cut this out, type listener, and add that as an argument.

[0:59] Now, we have a function wrapping the previous functionality. We can invoke the function addEventListener with what we had before as arguments, so button Click, and a callback with a console log clicked. We'll go ahead and Click me! And you see clicked in the console.

[1:19] Now, with Lodash, if we import {curry} from lodash, we can fill in this function one parameter at a time. We'll use the curry function by reassigning addEventListener to a curried version of addEventListener. Now, the way we can use addEventListener is by passing in only button which can create a new function called addButtonListener.

[1:44] We can take the remaining two arguments, the eventType and the listener, and pass those into addButtonListener, so click, and a callback that will log out clicked. Now, we have the same functionality if I click here, as we did before, but now we have a utility function where we can add any event type and any callback to this button.

[2:06] Let's go ahead and do that by duplicating this a couple of times, one, two. I'll add a mouseenter event and type in enter in the console log, and a mouseleave event and type in leave in the console log. Now, when I enter the button, you see enter in the console, when I leave it, you see leave, and when I click it, you see clicked in the console.

[2:30] We can also do this with the input, which we have referenced in our index HTML here, and use our addEventListener, and pass in the input, pass in the event type, then, pass in the callback. This time, we'll take the event so that we can console log out the event.target.value.

[2:49] Now, when I type inside of this, I'll type hello, I get hello in the console, and I still have my functionality on my button. Now, because this addEventListener function is curried, we can also create a function called addButtonClickListener, which would take our addButtonListener. We'll paste that down there, and we'll pass in click.

[3:12] Now, we can get rid of this addButtonListener, which takes the click, and instead do addButtonClickListener, then, pass in any callback we want. We can console log clicked in this one, and we can duplicate this and console log something like track click.

[3:30] Now, when I click on this, you'll see clicked and track click, because this function has the button and the event type stored inside of it. The only remaining argument at once is the final listener, which you can pass in.