JavaScript. Filtering an array with the Splice() method

I need to write a function

filterRangeInPlace(arr, a, b)

that takes an array and two numbers and deletes all elements from the array that are not within the range a to b. So the check looks like

a ≤ arr[i] ≤ b

I want to do it with the for loop and splice method. But can't figure out why the function keeps some elements outside of the range, in my case below it's number 3. This is not a home task or whatever, I'm just practicing array methods. Here's my code:

let myArr = [1, 3,  8, 3, 9, 5, 3, 4, 10, 7, 6, 1]

function filterRangeInPlace( arr, a, b ) {
    for ( i = 0; i < arr.length; i++ ) {
        if ( arr[i] < a || arr[i] > b ) {
            arr.splice(i, 1)
        }
    }
}

filterRangeInPlace(myArr, 4, 9)

console.log(myArr) // [3, 8, 9, 5, 4, 7, 6]

I understand I messed with the index somewhere, but can't figure out where and how, as the rest works fine. Thanks!

You should start iterating from the end of the array if you are using splice here and go upto the first element as:

for (i = arr.length - 1; i >= 0; i--) {

Let say, you are removing the first element i.e. 1 at position 0 then after removing the array will be

[3, 8, 3, 9, 5, 3, 4, 10, 7, 6, 1]

and at that time the i increments and becomes 1, so now it will point to 8 as 1 index.

So using splice will skip some of the steps

let myArr = [1, 3, 8, 3, 9, 5, 3, 4, 10, 7, 6, 1];

function filterRangeInPlace(arr, a, b) {
  for (i = arr.length - 1; i >= 0; i--) {
    if (arr[i] < a || arr[i] > b) {
      arr.splice(i, 1);
    }
  }
}

filterRangeInPlace(myArr, 4, 9);
console.log(myArr);