How to Loop Through Array and Remove Items Without Breaking the For Loop

In this tutorial, you will find an elegant way of looping through an Array and removing items without breaking the for loop.

The splice() method is used to remove an element; however, the array is being re-indexed when you run splice(), which means that you will skip over an index when one is removed.

But first, let's get a good grasp of how the splice method works.

The splice() Method

The splice() method modifies the contents of an Array by removing or replacing the existing elements or adding new elements in place. While it changes the original array in place, it still returns the list of removed items. If there is no removed Array, it returns an empty one.

const anyFish= ["angel", "drum", "mandarin", "sturgeon"];
/*Remove 1 element at index 2*/
const removed = anyFish.splice(2, 1);

/*  anyFish is ["angel", "drum", "sturgeon"] */
/* removed is ["mandarin"] */

So now let's start our example and see that problem. If we run the snippet and look at the result, we will see that 3 is still in the array and that's exactly the problem we mentioned above:

Javascript splice method array remove items without breaking the for loop
let elements = [1, 3, 3, 5, 3, 1, 4]; for (let i = 0; i < elements.length; i++) { if (elements[i] == 3) { // whenever we run splice, the array gets reindexed // so we will skip over an index elements.splice(i, 1); } } console.log(elements);

Now, let's fix this problem together. We can either decrement i after a splice() or iterate in reverse.

Javascript splice method array remove items without breaking the for loop
let elements = [1, 3, 3, 5, 3, 1, 4]; let removeEl = 3; let index = elements.indexOf(removeEl); // we continue this till we find the element in the array // indexOf will return the first index of the element in the array; -1 if not found while (index !== -1) { elements.splice(index, 1); // we get the new index after splice() index = elements.indexOf(removeEl); } console.log(elements);

This will prevent the re-index from affecting the next item in the iteration because indexing has an effect only on the items from the current point to the end of an Array. In the iteration, the next item is lower than the current point.

Or we can start looping in reverse:

Javascript splice method array remove items without breaking the for loop
let elements = [1, 3, 8, 5, 16, 1, 4]; // here, we start iterating from the last element to the first one (reverse) for (i = elements.length - 1; i >= 0; --i) { if (elements[i] % 2 === 0) { elements.splice(i, 1); // Remove even numbers } } console.log(elements);

Let's get it done more elegantly!

We can also use the JavaScript filter method, which takes a callback function as a parameter, and we can declare our condition and gets our desired array back.

This way, it's much cleaner!

How to Loop Through Array and Remove Items Without Breaking the For Loop
let elements = [1, 3, 3, 5, 3, 1, 4]; // element in the filter method will represent each array element on each iteration // here, if the element is not equal to 3, it will remain in the result array const result = elements.filter((element) => element != 3) console.log(result)