How do the if-else statements in this function from a tutorial make any sense?

Question

I'm going through this tutorial for a simple playlist with Vue.

I'm confused by the author's play() function, particularly the series of if-else statements. It appears to check whether index is a number, and if it is (and I can't imagine how it wouldn't be), it seems to skip the rest of the code that checks for whether the selected track is the same as the current track, among other things (link to the repo and function in question here) :

play (index) {
  let selectedTrackIndex = this.playlist.findIndex(track => track === this.selectedTrack)

  if (typeof index === 'number') {
    index = index

  } else if (this.selectedTrack) {
    if (this.selectedTrack != this.currentTrack) {
      this.stop()
    }
    index = selectedTrackIndex
  } else {
    index = this.index
  }

  let track = this.playlist[index].howl

  if (track.playing()) {
    return
  } else {
    track.play()
  }

  this.selectedTrack = this.playlist[index]
  this.playing = true
  this.index = index
}

The author's summary of the above code:

The method takes an index as the parameter, which specifies the track to be played. First, we get the index of the selected track. Then, we make some checks to determine the value of the index. If an index is provided as an argument and it's a number, then we use it. If a track is selected, we use the index of the selected track. If the selected track is different from the current one, we use the stop() method to stop the current one. Finally, if neither an index argument is passed nor a track is selected, we use the value of the index data property.

I checked MDN and a few other sources and didn't see anything special about an if() followed by an else if() in JavaScript. So I figure I have to be missing something here. Why is a validation check on index tied to checking whether the selected track is the same as the current track? The other checks inside the else if() and else blocks seem like stuff you wouldn't want to leave out, and yet his live demo of the app works. I asked the author to elaborate in the comments of the article but the article is almost a year old, so I'm not sure if he'll get back to me. Thanks to everyone in advance.

Answer 1

It's not really a validation test, it's just detecting whether an argument was supplied or not. If the argument isn't supplied, or it's not a number, the function performs default behaviors.

If the caller uses track.play(2) , they're specifically telling it to play track 2. The test if (typeof index == 'number') will succeed, and we'll use that given index.

If the caller uses track.play() , index will be undefined , which isn't a number, so that test will fail, and then we'll continue with the else if test. If there's a selected track, we use that (first stopping the current track if it's different).

If there's no selected track, we fall through to the final else clause, which uses the index property of the current object.