Learn Basic String and Array Methods by Building a Music Player

JavaScript
1

Hey guys! I’ve just finished my Palindrome Checker project, but I still have a hard time understanding the music player project, which is so much more difficult than the rest of the lessons so far…

playButton.addEventListener("click", () => {
    if (userData?.currentSong === null) {
    playSong(userData?.songs[0].id);
  } else {
    playSong(userData?.currentSong.id);
  }

One of the things that confused me with the code above was after the “click”… what does “() => {}” exactly ? I learned from the project how to create functions with () => {}, but I don’t think this is it… Can someone help explaining what () => {} does in an addEventListener ? because it keeps coming up in later projects…

Also, in the case above, why not just call for the playSong function like

“playButton.addEventListener(“click”, playSong)”

and input the “if” and “else” when we created the playSong function ?

Thanks for any input!

2

This is a callback function and probably an ES6 addition. the new standard changed it from Function Variable() {} const Variable = () =>{} that said I cant say for sure what an ES5 call back looked like or if it ever changed at all. I used the word variable instead of function name when you call a fuction that is still the same. To do this you simply type the FunctionName() by itself.

3

you are correct, it is a function, the second argument of an addEventListener is a function, specifically it’s the function that is executed when the event (in this case the click on playButton) happens. So you click the button, the event listener figures out you have clicked the button and executes the function in answer

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.