Different ways to delete Array elements in JavaScript

Global object Array itself does not have any remove or delete method. But there are many other ways to remove array elements in JavaScript.

Below are the different ways to remove array elements in JavaScript.

1. From the start of an array using shift() method.
2. From the end of an array by setting array length set or pop() method.
3. Removing a range of elements from anywhere using splice() method.
4. Removing elements by value using splice() and filter() method.
5. By using Lodash library. (This requires loadash library to be included in your script: https://lodash.com)
6. Using delete operator.

Let’s see those different ways one by one:

1. Removing elements from the start:
   • Using shift() method: [Removes only one element]
     It removes the first element of an array and updates array length and element indexes.
     It also returns the removed element on execution.

     var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
     var shiftedElement = testArray.shift();
     
     // Removes the first element from the array.
     console.log(testArray); // ["B", "C", "D", "E", "F", "G", "H", "I", "J"]
     
     // Sets new length for the Array.
     console.log(testArray.length); // 9
     
     // Returns the removed element.
     console.log(shiftedElement); // A
     
     // Confirms that elements has new indexes in the Array.
     console.log(testArray[3]); // E

2. Removing elements from the end:
   • Setting array length: [Removes single or multiple elements]
     Set array length property to the desired length (less than actual array length) and rest of the elements will be removed from the end of an array.
     This way, it will remove elements with an index greater than equal to the desired length.

     var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
     testArray.length = 6;
     
     // Removes rest of the elements except first 6 elements.
     console.log(testArray); // ["A", "B", "C", "D", "E", "F"]
     
     // Sets new length for the Array.
     console.log(testArray.length); // 6
     
     // Confirms that elements has new indexes in the Array.
     console.log(testArray[4]); // E

   • Using pop() method: [Removes only one element]
     It removes the last element of an array and updates array length and element indexes.
     It also returns the removed element on execution.

     var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
     var popedElement = testArray.pop();
     
     // Removes the last element "J" from the array.
     console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
     
     // Sets new length for the Array.
     console.log(testArray.length); // 9
     
     // Returns the removed element.
     console.log(popedElement); // J
     
     // Confirms that elements has new indexes in the Array.
     console.log(testArray[2]); // C

3. Removing a range of elements from anywhere:
   • Using splice() method: [Removes any number of elements from anywhere in an array]
     • It removes any number of elements from anywhere in an array and updates array length and element indexes.
     • It also returns all removed elements as a new array.
     • It requires arguments to be passed (zero-based index).
       Only the 1st argument is mandatory which specifies the position from where to add/remove elements.
       The 2nd argument specifies the number of elements to be removed.
       The 3rd  argument and rest of the arguments after that specifies new elements to be added to the array.

       // Remove elements from the middle.
       var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
       var removedElement = testArray.splice(2, 1);
       
       // Removes 1 element from 2nd index in the array.
       console.log(testArray); // ["A", "B", "D", "E", "F", "G", "H", "I", "J"]
       
       // Sets new length for the Array.
       console.log(testArray.length); // 9
       
       // Returns the removed element.
       console.log(removedElement); // ["C"]
       
       // Confirms that elements has new indexes in the Array.
       console.log(testArray[4]); // F

       // Remove elements from the start.
       var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
       var removedElement = testArray.splice(0, 2);
       
       // Removes the first element from the array.
       console.log(testArray); // ["C", "D", "E", "F", "G", "H", "I", "J"]
       
       // Sets new length for the Array.
       console.log(testArray.length); // 8
       
       // Returns the removed element.
       console.log(removedElement); // ["A", "B"]
       
       // Confirms that elements has new indexes in the Array.
       console.log(testArray[4]); // G

       // Remove elements from the end.
       var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
       var removedElement = testArray.splice(-3);
       
       // Removes 1 element from 2nd index in the array.
       console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G"]
       
       // Sets new length for the Array.
       console.log(testArray.length); // 7
       
       // Returns the removed elements.
       console.log(removedElement); // ["H", "I", "J"]
       
       // Confirms that elements has new indexes in the Array.
       console.log(testArray[4]); // E

4. Removing elements by value:
   • Using splice() method:
     In this approach, you can loop through the array to check if the element you want to remove matches with the element currently being looped and then remove it.

     var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
     var splicedElement;
     
     for( var i = 0; i < testArray.length-1; i++) { 
        if ( testArray[i] === "D") {
          splicedElement = testArray.splice(i, 1);
        }
     }
     
     // Removes element "D" from the array.
     console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G"]
     
     // Sets new length for the Array.
     console.log(testArray.length); // 9
     
     // Returns the removed element.
     console.log(splicedElement); // ["D"]
     
     // Confirms that elements has new indexes in the Array.
     console.log(testArray[4]); // F

   • Using filter() method:
     This does not affect the original array and will return a completely new array with removed elements.
     so basically, it will filter elements which are matched from the original array.

     var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
     
     var filteredElements = testArray.filter(function(value, index, testArray) {
         return value === "C";
     
     });
     
     // Original array remains same as before.
     console.log(testArray); // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
     
     // Original array length remains the same.
     console.log(testArray.length); // 10
     
     // Returns element "C" in a new array.
     console.log(filteredElements); // ["C"]
     
     // Confrims that element indexes are same in original array.
     console.log(testArray[4]); // E

     var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     
     var filteredElements = testArray.filter(function(value, index, testArray) {
         return value < 7;
     
     });
     
     // Original array remains same as before.
     console.log(testArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     
     // Original array length remains the same.
     console.log(testArray.length); // 10
     
     // Returns all elements less than 7 in a new array.
     console.log(filteredElements); // [1, 2, 3, 4, 5, 6]
     
     // Confirms that element indexes are same in original array.
     console.log(testArray[4]); // 5

5. Using Lodash library: (This requires loadash library to be included in your script: https://lodash.com)
   Libraries are a sometimes better way to solve complex problems.
   Lodash provides such rich set of array manipulation.
   It works somewhat similar to the array filter() method but it also updates the original array by removing elements and returning those elements as a new array.

   var testArray = ["A", 1, "B", 2, "C", 3, "D", 4, "E", 5];
   
   var numberedArray = _.remove(testArray, function (element) {
       // Remove all numbers.
       return typeof element === 'number';
   });
   
   // Remove numbers from the original array.
   console.log(testArray); // ["A", "B", "C", "D", "E"];
   
   // Original array length remains the same.
   console.log(testArray.length); // 5
   
   // Returns numbered elements in a new array.
   console.log(numberedArray); // [1, 2, 3, 4, 5]
   
   // Confirms that element indexes are same in original array.
   console.log(testArray[3]); // D

6. Using delete operator:
   So far we have seen many ways which delete the elements, update array length and indexes of the elements.
   But delete operator just removes the reference to the element so that it becomes undefined.
   Memory is freed when there are no more references to a value so delete operator frees the memory instead of deleting the element.

   var testArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
   
   delete testArray[3];
   
   // Element at 3rd index is set to undefined in original array. It shows as empty here because there is no value for 3rd index.
   console.log(testArray); // ["A", "B", "C", empty, "E", "F", "G", "H", "I", "J"]
   
   // Original array length remains the same.
   console.log(testArray.length); // 10
   
   // Confirms that element at 3rd index is set to undefined.
   console.log(testArray[3]); // undefined

So these are all different ways to remove array elements in JavaScript.
I hope it will help you write better array manipulation codes as and when required based on the problems to be solved.

Here’s a useful resource that tests your JavaScript coding skills entitled: How to Hire a Great JavaScript Developer. It has good examples and questions which are asked in coding interviews.

Happy coding!!!