Performance analysis: deleting single array elements

My partner and I came up on the need to delete array elements this last sprint. I thought I’d document a few ways to do so. We tried a couple different methods, and I’m doing a little research to see which is fastest.

To test this, first I establish an array of 10000 elements:

var arr = [];
for (var i = 0; i < 10000; i++) {
  arr.push(i);
}

Using splice to mutate array

You can splice by the index of the given. You should include ‘1’ as the second parameter value to indicate the removal of only one element.

arr.splice(arr.indexOf(5000), 1);

I ran the code using dev tools and got the following result

console.time();
arr.splice(arr.indexOf(5000),1);
console.timeEnd();
VM15047:3 default: 0.023193359375ms

So pretty good. 0.023ms to process.

Using filter to return a new array

Given the same array, you can filter a new array where values don’t match 5000.

newArr = arr.filter(function(element) {
  return element !== 5000;
});

Here is the code being ran:

console.time();
newArr = arr.filter(function(element) {
  return element !== 5000;
});
console.timeEnd();
VM15112:5 default: 0.5341796875ms

Much slower 0.534ms to process.

So the lesson here is that it doesn’t always pay to have fancy use of array functions :)

Written on April 13, 2019