The most efficient and robust way to remove an element from an array in JavaScript is to use the array.pop() method. It removes the last element of the array and returns the element.

The pop() method directly modifies the array and does not return a new array. The time complexity is O(1) because the array size does not matter here.

The above figure illustrates how the last element is being removed from an array.

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing :", main_array)

// Output: Before removing : [11, 21, 18, 19, 29]

const removed_element = main_array.pop();

console.log("Removed element:", removed_element)

// Output: Removed element: 29

console.log("After removing: ", main_array);

// Output: After removing:  [11, 21, 18, 19]

The element “29” is removed from the array, and after removing it, we printed the array to verify that.

When it comes to removing an element, there are multiple scenarios, such as from where you want to delete.

For example, you may want to remove a specific element, such as the first, middle, or last element, or remove an object based on a property or value.

Depending on your scenario, there are different suitable approaches.

Removing an object from an array

To remove an object from an array, you can either use the array.filter() method to target the key and remove it based on the key, or use the array.splice() method based on the object’s index.

Using filter() (Remove by a property)

The array.filter() method creates a new array with elements that pass a test. We can use it to remove values that match a specific condition. This is useful when the index of an object is unknown, but a property of the object can be used for identification.

const arrayOfObjects = [{ id: 1, name: 'Harry' },
                        { id: 2, name: 'Ron' },
                        { id: 3, name: 'Hermione' }];

console.log(arrayOfObjects); 

// Output: [{id: 1, name: 'Harry'}, 
//          {id: 2, name: 'Ron'}, 
//          {id: 3, name: 'Hermione'}]            

const objectToRemoveId = 2; // ID of the object name Ron to remove

const filteredArray = arrayOfObjects.filter(obj => obj.id !== objectToRemoveId);

console.log(filteredArray);

// Output: [{id: 1, name: 'Harry'},
//          {id: 3, name: 'Hermione'}]

In this code, we removed the second object, which has an id of 2 and a name property with the value “Ron”.

The new filteredArray does not contain the object with id 2.

If it matches multiple values, it removes all matching values.

Using the splice() method (Remove by index)

Using the array.splice() method, we can target the object’s index, remove elements from that index, and insert new elements. Ideal when you know the index.

const arrayOfObjects = [{ id: 1, name: 'Harry' },
                        { id: 2, name: 'Ron' },
                        { id: 3, name: 'Hermione' }];

console.log(arrayOfObjects); 

// Output: [{id: 1, name: 'Harry'}, 
//          {id: 2, name: 'Ron'}, 
//          {id: 3, name: 'Hermione'}]            

const indexToRemove = 1;

arrayOfObjects.splice(indexToRemove, 1); 

console.log(arrayOfObjects);

// Output: [{id: 1, name: 'Harry'},
//          {id: 3, name: 'Hermione'}]

As you can see from the above code, the splice() method accepts the index of an element, which suggests where to start, and the second argument is the number of elements to delete.

In our case, we need to start from index 1, and the count is also 1, targeting the second object of the element. Since it directly modifies the array, the final array contains only two objects.

Removing the first element of an array

You can remove the first element of the array using the array.shift() method. It directly modifies the original array and returns the removed element.

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing the first element:", main_array)

// Output: Before removing the first element: [11, 21, 18, 19, 29]

const removed_element = main_array.shift();

console.log("After removing the first element:", main_array);

// Output: After removing the first element: [21, 18, 19, 29]

console.log("The removed element: ", removed_element);

// Output: The removed element: 11

Removing an element by value (Using splice() and indexOf())

The indexOf() method returns the index of the first occurrence of a value in an array, and the splice() method removes that element from an array.

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing the element by value 19:", main_array)

// Output: Before removing the element by value 19: [11, 21, 18, 19, 29]

const index = main_array.indexOf(19);

main_array.splice(index, 1);

console.log("After removing the element by value 19:", main_array)

// Output: After removing the element by value 19: [11, 21, 18, 29]

We first find the index of element 19 in main_array using indexOf().

In the next step, we remove this element from the array using splice(index, 1), which deletes one item starting from the found index.

Remove multiple elements from an array

To remove multiple elements, you can use an array.splice() method with a count greater than 1.

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing two elements:", main_array)

// Output: Before removing two elements: [11, 21, 18, 19, 29]

removed_elements = main_array.splice(0, 2);

console.log("After removing two elements:", main_array);

// Output: After removing two elements: [18, 19, 29]

console.log("Removed two elements", removed_elements)

// Output: Removed two elements [11, 21]

Removing based on a condition (New Array)

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing the element based on the condition:", main_array)

// Output: Before removing the element based on the condition: [11, 21, 18, 19, 29]

filtered_array = main_array.filter(data => data != 21)

console.log("After removing the element based on the condition:", filtered_array)

// Output: After removing the element based on the condition: [ 11, 18, 19, 29 ]

const main_array = [11, 21, 18, 19, 29];

console.log("Before removing the element at first index", main_array)

// Output: Before removing the element at first index [11, 21, 18, 19, 29]

delete main_array[1];

console.log("After removing the element at first index", main_array);

// Output: After removing the element at first index [11, <1 empty item>, 18, 19, 29]

console.log("Length of the array after deletion:", main_array.length);

// Output: Length of the array after deletion: 5

Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.