DEV Community

Cover image for JavaScript Array Hacks: Deleting Elements Like a Pro
Amrita-padhy
Amrita-padhy

Posted on

JavaScript Array Hacks: Deleting Elements Like a Pro

JavaScript array is a single variable that is used to store the elements or a group of values.

You can add or remove elements from the array in any position.

Here, we will discuss different ways to remove elements from the array.

Methods to Remove Elements from JavaScript Array:
There are many methods that are used to remove elements from JavaScript array which are discussed below

  • Using the pop() method
  • Using the shift() method
  • Using the splice() method
  • Using the filter() method
  • Using Delete Operator
  • Using a simple for() loop and a new array

1: using the pop() method:

This method is used to remove the last element of the array and returns the removed element. This function decreases the length of the array by 1.

const array = ["apple", "mango", "banana", "orange"];
  const popedArray = array.pop();
  console.log(popedArray);
  console.log(array);
  // output =  orange
  // output =  ['apple', 'mango', 'banana']
Enter fullscreen mode Exit fullscreen mode

2: using the shift() method:

This method is used to remove the first element of the array and reduce the size of the original array by 1.

 const array = ["apple", "mango", "banana", "orange"];
  const shiftedArray = array.shift();
  console.log(shiftedArray);
  console.log(array);
  // output =  apple
  // output =   ['mango', 'banana', 'orange']
Enter fullscreen mode Exit fullscreen mode

3: using the splice() method:

This method is used to modify the contents of an array by removing the existing elements and/or adding new elements. To remove elements by the splice() method you can specify the elements in different ways.

  const array = ["apple", "mango", "banana", "orange"];
  const splicedArray = array.splice(2, 1);
  console.log(splicedArray);   // output =  ['banana']
  console.log(array); // output =   ['apple', 'mango', 'orange']
Enter fullscreen mode Exit fullscreen mode

here in this example array.splice(2, 1) , 2 is index of deleting element and 1 is number of elements you want to delete .

4: using the filter() method:

This method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument function.

 function isPositive(value) {
    return value > 0;
  }
  const array = [1, 3, 45, 124, -1, 0, 125];
  const filtereddArray = array.filter(isPositive);
  console.log(filtereddArray); // output =  [1, 3, 45, 124, 125]
Enter fullscreen mode Exit fullscreen mode

5: using the Delete Operator:

Use the delete operator to remove elements from a JavaScript array.

const array = [1, 3, 45, 20];
  const deleted = delete array[2];
  console.log(deleted); // output =  true
  console.log(array); // output =  [1, 3, empty, 20]
Enter fullscreen mode Exit fullscreen mode

6: using the for loop:

Here a simple for() will be run over the array and the except for the removed element, the remaining elements will be pushed into the new array which will be declared inside the function or a method.

  let removeElement = (array, n) => {
    let newArray = [];

    for (let i = 0; i < array.length; i++) {
      if (array[i] !== n) {
        newArray.push(array[i]);
      }
    }
    return newArray;
  };

  let passed_in_array = [1, 2, 3, 4, 5];
  let element_to_be_removed = 2;
  let result = removeElement(passed_in_array, element_to_be_removed);
  console.log(result); // output  [1, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

While I find filter() and splice() convenient for deleting elements from a JavaScript array in certain scenarios due to their readability and simplicity, I also recognize the importance of understanding fundamental techniques the classic for loop remains a cornerstone in array manipulation.

Top comments (0)