Passing function with arguments to a higher order function?

Question

I am working on a basic JavaScript program that plays sounds when I click buttons. I am using a switch to be able to tell which sound should be played. I am also using event listeners on each button to respond to clicks.

When I do something like:

currentButton.addEventListener("click", function() {
    // code here
})

It works fine. However, I want to try defining the function outside of the event listener, and then passing it to the event listener.

I have a simplified example here:

function setPathAndPlay(currentButton) {
    let audioPath;
    switch (currentButton.innerHTML) {
        case "w": {
            audioPath = "./sounds/crash.mp3";
            break;
        }
    }
    const audio = new Audio(audioPath);
    audio.play();
}

for (let currentButton of drumArray) {

    currentButton.addEventListener("click", setPathAndPlay(currentButton))
}

This does not work. I believe what is happening is setPathAndPlay(currentButton) is directly running as it is a function call, which is causing problems. How can I pass the currentButton to setPathAndPlay though? Since that function needs access to the button.

I'm not sure what to try to fix this. I believe something with an arrow function or some sort of wrapper function may work. I am looking to find a solution as simple as possible to help me understand. Thank you!

Answer 1

If you want to pass in an arrow function:

currentButton.addEventListener("click", () => setPathAndPlay(currentButton))

This way, you're passing a pointer to the function (with parameters), instead of executing it right away

Answer 2

This is actually a really common pattern in javascript. Basically all you want to do is wrap setPathAndPlay(currentButton) in an arrow function so it looks like () => setPathAndPlay(currentButton) then your code should work as expected.

function setPathAndPlay(currentButton) {
    let audioPath;
    switch (currentButton.innerHTML) {
        case "w": {
            audioPath = "./sounds/crash.mp3";
            break;
        }
    }
    const audio = new Audio(audioPath);
    audio.play();
}

for (let currentButton of drumArray) {
    currentButton.addEventListener("click", () => setPathAndPlay(currentButton))
}

Frequently in javascript applications, we have functions that were not written to be used as event handlers but ended up getting used this way. When this happens you sometimes have to wrap your function in a function whose sole purpose is to transform the function into an event handler. An alternative way of doing this would just be to write the function as a curried function that generates an event handler. This makes sense in some cases but not in others. It all depends on how your application is going to change. If you think that the event handler is going to end up doing things other than seting the pathAndPlaying, then you should write it as below, but if instead you think that the setPathAndPlay function will get used in multiple places not relating to event handlers then you could use the above code.

const generateHandleClick = (currentButton) => (e) => {
    let audioPath;
    switch (currentButton.innerHTML) {
        case "w": {
            audioPath = "./sounds/crash.mp3";
            break;
        }
    }
    const audio = new Audio(audioPath);
    audio.play();
}
for (let currentButton of drumArray) {
    currentButton.addEventListener("click", generateHandleClick(currentButton))
}

Answer 3

Waw, it brings me back to the old days :)

We use to do it this way

const setPathAndPlay = (e) => {
    // reference e.target instead of currentButton
}

for (let currentButton of drumArray) {
    currentButton.addEventListener("click", setPathAndPlay)
}