Here are four ways to remove an element from an array in JavaScript:
- Using array.pop()
- Using array.shift()
- Using delete operator and splice()
- Using filter() and indexOf() along with the splice()
Method 1: Using array.pop()
The array.pop() method can help you remove the last element of the array in JavaScript.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing an element from an array", main_array)
const removed_element = main_array.pop();
console.log("After removing an element from an array")
console.log("main_array values: ", main_array);
console.log("The removed value is: ", removed_element);
Output
Before removing an element from an array [ 11, 21, 18, 19, 29 ]
After removing an element from an array
main_array values: [ 11, 21, 18, 19 ]
The removed value is: 29
Removing an object from an array in JavaScript
const array_of_object = [
{ name: 'Eleven', show: 'Stranger Things' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' },
{ name: 'Scully', show: 'The X Files' },
];
removed_element = array_of_object.pop();
console.log(array_of_object);
console.log(removed_element);
Output
[
{ name: 'Eleven', show: 'Stranger Things' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }
Method 2: Using array.shift()
The array shift() method is used to remove the first element from an array and returns that removed element.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing the first element from an array", main_array)
const removed_element = main_array.shift();
console.log("After removing the first element from an array", main_array);
console.log("The removed value is: ", removed_element);
Output
Before removing the first element from an array [ 11, 21, 18, 19, 29 ]
After removing the first element from an array [ 21, 18, 19, 29 ]
The removed value is: 11
Method 3: Using delete operator and splice()
If you can identify an element to be removed by its index, you can use the “delete” operator.
Using delete operator
The delete operator removes specific elements from an array using an index.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing the element at first index", main_array)
delete main_array[1];
console.log("After removing the element at first index", main_array);
Output
Before removing the element at first index [ 11, 21, 18, 19, 29 ]
After removing the element at first index [ 11, <1 empty item>, 18, 19, 29 ]
Using splice() method
The array splice() is used to modify the elements of an array by removing or replacing the existing elements and adding new elements.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing the first two elements from an array", main_array)
removed_element = main_array.splice(0, 2);
console.log("After removing the first two elements from an array", main_array);
console.log("Removed two elements", removed_element)
Output
Before removing the first two elements from an array [ 11, 21, 18, 19, 29 ]
After removing the first two elements from an array [ 18, 19, 29 ]
Removed two elements [ 11, 21 ]
Method 4: Using filter() and combining indexOf() and splice()
Using the filter() method
The array filter() method is used to create a new array with all elements that pass the test implemented by the provided function. We can filter out the unnecessary elements from an array.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing the element by value in an array", main_array)
new_array = main_array.filter(data => data != 19)
console.log("The new array", new_array);
Output
Before removing the element by value in an array [ 11, 21, 18, 19, 29 ]
The new array [ 11, 21, 18, 29 ]
We created a new array by filtering out the value 19 from main_array using the filter() method.
Combining indexOf() and splice() Methods
The indexOf() method is used to return the index of the first occurrence of a value in an array.
The splice() method is used to remove elements from an array.
To combine these methods to remove an element from an array, you would first use indexOf() to find the index of the element you want to remove. Then, you would use splice() to remove the element at that index.
const main_array = [11, 21, 18, 19, 29];
console.log("Before removing the element by value in an array", main_array)
const index = main_array.indexOf(19);
main_array.splice(index, 1);
console.log("After removing an element by value in an array", main_array)
Output
Before removing the element by value in an array [ 11, 21, 18, 19, 29 ]
After removing an element by value in an array [ 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.
Drema Stanczyk
There’s definately a lot to learn about this subject. I like all of the points you have made.