Piano Keys .forEach function - Using function without argument

Hey, so for this project I have to assign event handler functions to html section elements which represent the different keys of a virtual piano. When a key representation is ‘mousedowned’ the color will change (‘red’) and when the key is ‘mouseupped’ the color reverts back to the original. So I have an array of all the section elements called ‘notes’. I have also created a named function called ‘eventAssignment’ that takes in one parameter called ‘note’ which will assign the two events (mousedown and mouseup) to each note.
Now I want to iterate through my array of section elements(‘notes’) to give them the functionality of eventAssignment. I am using the forEach method on the array and I want to execute the ‘eventAssignment’ on each array element.
The eventAssignment function appears as:

const eventAssignment = (note) => {
note.onmousedown = function() {
keyPlay(event);
}
note.onmouseup = function() {
keyReturn(event);
}
};

And the .forEach method appears as:

notes.forEach(eventAssignment);

Currently the program works as expected and the keys light up when pressed and are extinguished when let go of. However, I do not quite understand how the ‘eventAssignment’ is passed into the .forEach method without its argument ‘note’. How does the program know what to do with the function when just the function name is passed in?
If there are any articles that explain nuances like this that anyone could point me towards or if anyone has an answer it would be greatly appreciated and I would look forward to understanding:face_with_monocle:. Thanks!

The JavaScript MDN does have a thorough explanation.

1 Like

Thanks for the input but I am still perplexed. In the syntax of the documentation

Syntax

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

Parameters:

callback - Function to execute on each element. It accepts between one and three arguments:

currentValue - The current element being processed in the array.

index (Optional) The index currentValue in the array.

array (Optional) - The array forEach() was called upon.

thisArg (Optional) - Value to use as this when executing callback.

The ‘currentValue’ is not optional but in the code I submitted earlier it must be run without it seemingly.

I’m not an expert in JS so if I’m wrong hopefully someone will correct me. I believe it has to do with the difference in anonymous functions versus named functions calls in forEach. This webpage has some examples of both.

1 Like

What is happening is that the .forEach() method executes the callback function - in your case eventAssignment - once for every item in the array.

As it does this, .forEach() automatically passes the current element of the array to the callback function as a parameter. (This is why even though the MDN documentation suggests that currentValue is not an optional parameter, you don’t need to specify it directly.)

So, .forEach() is automatically passing the current note from the array to your eventAssignment function as it iterates through the notes array. Subsequently, all the notes get their event functions.

Does that clear it up? :slight_smile:

1 Like

I see! Thanks so much for your help :grinning:

1 Like

No problem, glad I could clear it up.

If you get stuck with anything else, come back and ask us. :+1:

1 Like