5 ways to delete an element from an array in JavaScript

Situation:
Whenever we need to delete an element from an array based on index or certain condition, we can use following 5 ways.

• [1] Array pop() method:-

This removes the last element from original array.

let numbers = [1,2,3,4,5]let result = numbers.pop()result: 5numbers: [1,2,3,4]

pop() method returns the deleted value and remove that value from the original array.

• [2] Array shift() method:-This removes the first element from original array.

let numbers = [1,2,3,4,5]let result = numbers.shift()result: 1numbers: [2,3,4,5]

shift() methods returns the deleted value and remove that value from the original array.

• [3] Array splice() method:-This removes specific element based on given index.[Example]

[3.1] With indexOf() method

let fruits = ['orange', 'mango', 'banana'];//first find the index of element to be removed.let index = fruits.indexOf('mango') // 1//now use splice() methodlet result = fruits.splice(index, 1); // ['mango']fruits: ['orange', 'banana'] //element removed from original array

[3.2] With findIndex() method

let fruits = ['orange', 'mango', 'banana'];//first find the index of element to be removed based on any conditionconst index = fruits.findIndex(element => element === 'mango'); // 1//now use splice() methodconst result = fruits.splice(index, 1); // ['mango']fruits: ['orange', 'banana'] //element removed from original array

splice() takes two optional parameters first being index of element to be deleted and second is number of elements to be deleted. In our case we just wanted to remove one element so we passed 1 as second parameter.

findIndex() provide callback function which will be executed on each element of array unless it returns true based on your condition and returns the index of element truthy condition.

• [4] Array filter() method:-This method returns the new array with elements that passes a particular condition passed in callback function i.e. filtering elements.[Example]

let numbers = [1,2,3,4,5];let result = numbers.filter(el => el === 3);result: [3] // returns the new array that elements that passed the condition in callback functionnumbers: [1,2,3,4,5] // doesn't change the original array

• [5] JavaScript delete operator-delete operator remove the element from the array but it creates a empty space or kind of hold in the array.[Example]

let numbers = [1,2,3,4,5];delete numbers[2];numbers: [1,2,empty,4,5] //chrome dev tools prints empty for the deleted valuenumbers[2] // undefined but numbers[2] is not an undefined value

delete operator doesn't change the length of the array or the index position of elements and also creates an empty slot.

If you still want to use this approach, then assign undefined to the element instead using delete operator. [Example]

let numbers = [1,2,3,4,5];numbers[2] = undefined;numbers: [1,2,undefined,4,5] // this doesn't create an empty slot.

Conclusion:

I mostly use splice() with findIndex() to delete an element because during development because we generally have an condition based on which we have to delete an element from an array.

Thanks for reading!
Any feedback is welcome. Twitter