Javascript Building a music player step 64

JavaScript
1

I had a lot of issues getting through this step. However, I did end up getting this step answered. But I am still confused at how the answer worked. Questions listed below:

  1. Why in the expression that gets executed when the conditional evaluates to truthy I did NOT have to explicitly call out what currentTitle should be set to and all I have to do is list currentTitle? Same goes for when you want currentTitle equal to a empty string when the conditional evaluates to falsey all I did was list “”? Code shown below, remove if not allowed. Why did this work?
  playingSong.textContent = currentTitle ? currentTitle : "";
  1. Why in the function is there no return statement? Don’t we need to return what we want the currentTitle and currentArtist to be set to? Or does the above statement that I am confused on somehow setting the innerHTML of the two different html elements (coming from who knows where this is my next question) causing it to render on the player as long as the function as a whole is called?
  2. Also the function has you grab the HTML elements with the ID of player-song-title and player-song-artist. Where are those defined? I didn’t see them in the HTML document so I am assuming its getting dynamically created somewhere in the js file but I cant seem to find it. So confused where these come from?
2

Let’s break down what currentTitle is.

currentTitle is a const variable that holds this value userData?.currentSong?.title
This can be found on line 136

const currentTitle = userData?.currentSong?.title;

To see what this value currently holds, you should add a console statement like this outside of one of the functions.

console.log(userData?.currentSong?.title)

you can add that console statement on line 141 and open the console.

The console shows undefined

That makes sense because when you first load the page, there shouldn’t be a current song.

undefined is known as a falsey value in javascript

basically what this line of code is saying is if we actually have a currentTitle then go ahead and show it, otherwise, show nothing. Because we don’t want to show undefined because that wouldn’t be a pleasant experience.

  playingSong.textContent = currentTitle ? currentTitle : "";

the same logic applies to the currentArtist

Another way to write that would be to use an if/else statement instead

if (currentTitle) {
    playingSong.textContent = currentTitle;
} else {
    playingSong.textContent = "";
}

The only purpose for this function is to update the text content for playingSong and songArtist. We don’t need to explicity return anything there.

If we had a function, for example that did some sort of mathematical calculations and needed that result, then it would be a good case to return something.

For example, I can have this function that calculates the area, call that function and assign that result to a const variable called area and then use that area variable throughout my program.

const calculateRectangleArea = (length, width) => {
    return length * width;
};


const area = calculateRectangleArea(5, 3);

But in this case with the music player project function, you are just updating things in the DOM. So we don’t need to explicity return anything.

Functions that don’t have a explicit return like this will return undefined.

You can see that if you log out to the console the function call

console.log(setPlayerDisplay())

we created those variables at the beginning of the function here

  const playingSong = document.getElementById("player-song-title");
  const songArtist = document.getElementById("player-song-artist");

and this is the corresponding HTML on line 42

  <div class="player-display-song-artist">
             <p id="player-song-title"></p>
             <p id="player-song-artist"></p>
           </div>

In this case, we are setting the textContent which is a little different from innerHTML

here is another example of working with textContent

But whenever you play a song, then the playSong function will fire, which goes through that set of code. That set of code includes calling the setPlayerDisplay function

hope all of that makes sense

1 Like
3

I think that makes sense @jwilkins.oboe greatly appreciate the detailed response!! Going to take me a few reads to fully digest.

4

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