Why are these two If-statements not the same?

Question

I just started learning Javascript. Currently I'm taking an online course and I just ran into my first problem I do not understand.

I want to check how many guesses I still have in a Hangman game:

const Hangman = function(word, remainingGuesses) {
  this.word = word.toLowerCase().split('')
  this.remainingGuesses = remainingGuesses
  this.guessedLetters = []
}

Hangman.prototype.getPuzzle = function() {
  let puzzle = ''

  this.word.forEach((letter) => {
    if (this.guessedLetters.includes(letter) || letter === ' ') {
      puzzle += letter
    } else {
      puzzle += '*'
    }
  })

  return puzzle
}

the correct if statement in the video is this:

Hangman.prototype.makeGuess = function(guess) {

  const isUnique = !this.guessedLetters.includes(guess)
  const isBadGuess = !this.word.includes(guess)

  if (isUnique) {
    this.guessedLetters.push(guess)
  }

  if (isUnique && isBadGuess) {
    this.remainingGuesses--
  }
}

But this is below here how I wrote the if statement:

Hangman.prototype.makeGuess = function(guess) {


  if (!this.guessedLetters.includes(guess)) {
    this.guessedLetters.push(guess)
  }

  if (!this.guessedLetters.includes(guess) && !this.word.includes(guess)) {
    this.remainingGuesses--
  }
}

The remaining guesses are not calculating correctly, if I do the if statements the second way. Can you please tell me what is the difference?

Answer 1

In your last example you change the guessedLetters array by using push() method. This may lead to a different result of the includes() method of that same array.

Try to undestate it yourself if you translate it in 'normal' English:

1. If guess is not in guesses list, add it to guesses list.
2. If guess is not in guesses list and not in word list, decrease remaining guesses

This says. If guess is not in guess, you will add it and the second condition will automatically be false, because you just added guess to the guesses list and so it is not NOT on the guesses list.

You can do it like this instead

if (!this.guessedLetters.includes(guess)) {
    this.guessedLetters.push(guess)

    if (!this.word.includes(guess)) {
       this.remainingGuesses--
    }
}

Answer 2

The problem is here:

if (!this.guessedLetters.includes(guess)) {
    this.guessedLetters.push(guess)
}

If this.guessedLetter didn't include guess , it's added to the list (with push ).

if (!this.guessedLetters.includes(guess)

You just modified this.guessedLetters . So now, when you check again, guess is always there, so this condition is never true.

Answer 3

In your example, try to analyze the flow of a case where the guessedLetters doesn't contain the guess :

// if the guessedLetters doesn't contain guess ...
if (!this.guessedLetters.includes(guess)) {
    // ... then you add it
    this.guessedLetters.push(guess)
}

// and it already contains guess so the first clause of the if
// is always false
if (!this.guessedLetters.includes(guess) && !this.word.includes(guess)) {
    this.remainingGuesses--
}

In the original, they first compute both flags isUnique and isBadGuess and only then they modify guessedLetters and remainingGuesses . The if clause checks the unmodified guessedLetters collection then.