Music Player Project

JavaScript
1

const shuffle = () => {
userData?.songs.sort(() => Math.random() - 0.5);
userData.currentSong = null;
userData.songCurrentTime = 0;

renderSongs(userData?.songs);
pauseSong();
setPlayerDisplay();
setPlayButtonAccessibleText();
}

renderSongs(sortSongs());

i dont know exactly how to ask , but may i ask like why at the project’s line 281 , the renderSongs(sortSongs()) is called?

isnt that will somehow negate those action that we actually doing for shuffe() function?

2

hello and welcome to fcc forum :slight_smile:

  • if you dont call “shuffle()” then that “block of code” will not run, which i presume is triggered through some button click

  • also share step / exercise url for more context

happy coding :slight_smile:

1 Like
3

After the call to shuffle is completed, the execution returns to the call site (the place where the function was called).

If the call site was right before the top-level call to renderSongs(sortSongs()) then yes, that second call would “undo” the call to renderSongs(sortSongs()) called from inside shuffle.

shuffle();
renderSongs(sortSongs());

But that isn’t what happens.

renderSongs(sortSongs()) is called one time on the initial code execution (to render the song list) and after that all subsequent calls to it happens inside event handlers to re-render the list after it has been update (song deleted, list shuffled).

If you look at the final code you can better see it, the code might look broken on different steps before the app is completed, if the execution order isn’t in its final stage.

4

Ah, I see now! I’m really sorry for the confusion. As a beginner, I knew that the computer reads the code from top to bottom, so I always thought that whenever something happens, the computer reads it again from top to bottom. That’s why I thought the renderSongs() function was called every time a change was made. Thank you for explaining. Now I understand that the reading occurs only once.

It’s like the computer reads and remembers everything initially, and then when the user interacts, it picks up the functions and variables it remembered from the first reading, stores them into the variables we set, and repeats this process. Please correct me if I’m wrong.

thank you very much

5

I think you got it right, more or less.

I didn’t watch the videos, but Brad usually does a good job of explaining things.

Edit: found this channel, which seems to have a few nice videos on related topics.

1 Like
6

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