Remove an item from an array in JavaScript
There are multiple ways to remove an item from an array in javascript
- Use filter() method to remove an item by value
- Use indexOf() and splice() methods together to remove an item by value
- Use pop() method to remove an item from the end of the array
- Use shift() method to remove an item from the start of the array
- Use lodash methods
Use filter() method to remove an item by value
The filter() method creates a new array will all elements that pass the test defined by the given callback function.
let letters = ['a', 'b', 'c', 'd', 'e', 'f'];
let result = letters.filter(letter => letter != 'b');
console.log('old array', letters);
// output: old array [ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log('new array', result);
// output: new array [ 'a', 'c', 'd', 'e', 'f' ]
In the above sample code, we are removing item ‘b’ from the letters
array. The callback functions check letter != ‘b’ and it returns false for the item ‘b’ and true for all other items. So the result array doesn't contain the letter b.
The filter method can also be used to filter out the array of items with multiple condition checks.
Use indexOf() and splice() methods together to remove an item by value
We can remove a specific item from an array using indexOf() and splice() methods together. The indexOf() method returns the index where the value matches the value passed into it. If no items in the array match the given value, then it returns -1. The splice() method is used to remove items from an array with a given index. The second parameter is the number of items that should be removed from the given index. In our case, we are only removing one item. So we were given ‘1’ as the second parameter in the below example.
let letters = ['a', 'b', 'c', 'd', 'e', 'f'];
let index = letters.indexOf('b');
let removedItem = letters.splice(index, 1);
console.log(letters);
// output:[ 'a', 'c', 'd', 'e', 'f' ]
console.log(removedItem);
// output: [ 'b' ]
Use pop() method to remove an item from the end of the array
The last item of the array can be removed using pop() method. The pop method modifies the array on which it was invoked.
let letters = ['a', 'b', 'c', 'd', 'e', 'f'];
let popped = letters.pop()
console.log(letters);
// output: [ 'a', 'b', 'c', 'd', 'e' ]
console.log(popped);
// output: a
In the above example, we removed item ‘f’ from the end of the array letters. The pop() method returns the removed item ‘a’.
Use shift() method to remove an item from the start of the array
The shift() method can be used to remove an item from the start of an array. The shift() method changes the original array and it returns the removed item.
let letters = ['a', 'b', 'c', 'd', 'e', 'f'];
let shifted = letters.shift();
console.log(letters);
// output: [ 'b', 'c', 'd', 'e', 'f' ]
console.log(shifted);
// output: a
In the above example, we removed the first item ‘a’ from the array.
Use lodash methods
Lodash is a javascript library that provides useful functions for manipulating arrays, numbers, objects, strings, etc.
The _.remove() removes all elements from the array that satisfies the condition returns true and returns an array of the removed elements. It is very similar to the filter() method, but the only difference is remove() method mutates the original array, and the filter() method does not mutate.
const _ = require('lodash');
let letters = ['a', 'b', 'c', 'd', 'e', 'f'];
let result = _.remove(letters, function(letter) {
return letter == 'b';
});
console.log('old array', letters);
// output: old array [ 'a', 'c', 'd', 'e', 'f' ]
console.log('new array', result);
// output: new array [ 'b' ]
Conclusion
To remove an item from an array in javascript, use filter() method or indexOf() and splice() methods together to remove an item by value. Use pop() method to remove an item from the end of the array and use shift() method to remove an item from the start of the array. Another option is to use lodash javascript library which provides useful functions for manipulating arrays, numbers, objects, strings.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Cannot read property of undefined in JavaScript
How to fix npm ERR! Missing script: "start"
Find greatest common divisor (GCD) in JavaScript
What are Parameters, Arguments and Arguments Object in JavaScript
node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
How to Fix error:0308010C:digital envelope routines::unsupported
ERESOLVE unable to resolve dependency tree error when installing npm packages
Too many re-renders. React limits the number of renders to prevent an infinite loop
Explore All Blogs