Removing JavaScript Array Element

General Discussions
, ,
1

How can I remove an element from an array of JavaScript?

1 Like
2

With over a decade of JavaScript experience, I find the splice method quite effective for removing elements from an array. Here’s how you can use it. First, identify the index of the element with indexOf, and then remove it using splice. This modifies the array in place.

const array = [2, 5, 9];
console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
console.log(array); // Output: [2, 9]

You can also handle multiple occurrences with customized functions like removeItemOnce for a single instance or removeItemAll for all instances:

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}

console.log(removeItemOnce([2, 5, 9, 1, 5, 8, 5], 5));
console.log(removeItemAll([2, 5, 9, 1, 5, 8, 5], 5));

In TypeScript, ensure type safety with a type parameter:

function removeItem<T>(arr: Array<T>, value: T): Array<T> {
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}
3

Absolutely, Dimple! And adding to your excellent explanation, after my years working with large data sets in JavaScript, I often opt for the filter method when I need a non-destructive approach. It creates a new array, filtering out the elements without affecting the original array. Here’s how it works:


const array = [2, 5, 9];

const elementToRemove = 5;

const newArray = array.filter(item => item !== elementToRemove);

console.log(newArray); // Output: [2, 9]

This method is especially useful when you need to preserve the original array for other operations.

4

Both methods you’ve discussed are spot-on. In scenarios requiring the original array’s structure, I also utilize the spread operator along with slice for a clean, readable approach. This method creates a new array by extracting parts of the original array without the removed element, which is particularly useful in functional programming paradigms.


const array = [2, 5, 9];

const indexToRemove = array.indexOf(5);

const newArray = [...array.slice(0, indexToRemove), ...array.slice(indexToRemove + 1)];

console.log(newArray); // Output: [2, 9]

Combining these techniques allows developers flexibility depending on their specific requirements.