Falsy Bouncer - Why is only the first falsy value being removed?

I know this can be solved very easily using .filter but am trying to practise .splice

I thought the below would do the trick but for some reason this will only remove the first falsy value in the array?

Your code so far


function bouncer(arr) {
  
  for (let i = 0 ; i<arr.length ; i++) {

    if(!arr[i]) {
      arr.splice( arr.indexOf(arr[i]) , 1)
    
    }
   
  }

  return arr;
}

bouncer([7, "ate",false, "", 9]);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer

splice changes the array, so you are changing the position of the elements that come after

when i is 2
the array changes from [7, "ate",false, "", 9] to [7, "ate", "", 9]
then i becomes 3 and arr[3] is checked, which is 9, truthy value, and so it is kept

notice the magic trick? the elements change place, so the "" is never checked

You don’t want to modify an array you are iterating over. It will cause you all sorts of problems.