Remove A Specific Element From An Array in JavaScript
Arrays are a fundamental data structure in JavaScript, used to store collections of values. However, as you work with arrays, there may be times you need to remove specific elements from them.
As a Developer, you need to understand different methods for different uses cases.
splice method to remove an item from an array
splice is a method in JavaScript that is used to add or remove elements from an array. The splice method modifies the original array, unlike some other methods such as filter or the spread operator, which return a new array without modifying the original.
The syntax for using the splice method is as follows:
array.splice(startIndex, deleteCount, elementsToAdd)startIndex: The zero-based index at which to start changing the array.
deleteCount: The number of elements to remove.
elementsToAdd: The elements to add to the array, starting from startIndex.
const arr = [1, 2, 3, 4, 5];
const targetElement = 3;
const index = arr.indexOf(targetElement);
// if element is not found indexOf return -1
if (index > -1) {
arr.splice(index, 1);
}
console.log(arr); // [1, 2, 4, 5]
Using filter to remove element
filter is a method in JavaScript that is used to create a new array with all elements that pass a certain test. It is commonly used to remove elements from an array that meet certain criteria. The filter method does not modify the original array, unlike the splice method.
The syntax for using the filter method is as follows:
const filteredArray = originalArray.filter(callback);originalArray: The original array from which you want to remove elements.
callback: A function that is called for each element in the array. The function should return true if the element should be included in the filtered array, and false if the element should be removed.
const arr = [1, 2, 3, 4, 5];
const targetElement = 3;
const filteredArray = arr.filter(element => element !== targetElement);
console.log(filteredArray); // [1, 2, 4, 5]Using reduce to remove item and modify certain element
reduce is a method in JavaScript that is used to reduce an array to a single value. The reduce method can also be used to remove or modify certain elements in an array by creating a new array with the modified elements.
The syntax for using the reduce method is as follows:
const reducedValue = originalArray.reduce(callback, initialValue);originalArray: The original array from which you want to modify elements.
callback: A function that is called for each element in the array. The function should return the reduced value for the current iteration, which will be passed as the accumulator to the next iteration.
initialValue: An optional argument that specifies the initial value for the accumulator.
Example to remove element:
const arr = [1, 2, 3, 4, 5];
const targetElement = 3;
const filteredArray = arr.reduce((acc, element) => {
if (element !== targetElement) {
acc.push(element);
}
return acc;
}, []);
console.log(filteredArray); // [1, 2, 4, 5]Example to remove and modify element:
const arr = [1, 2, 3, 4, 5];
const targetElement = 3;
const modifiedArray = arr.reduce((acc, element) => {
if (element !== targetElement) {
acc.push(element * 2);
}
return acc;
}, []);
console.log(modifiedArray); // [ 2, 4, 8, 10 ]
In conclusion, removing specific elements or modifying certain elements in an array is a common task in JavaScript. There are various methods available to achieve this, such as splice, filter, and reduce.
By using splice, you can remove or modify elements in place in the original array. By using filter, you can create a new array that contains only the elements that meet a certain condition, effectively removing elements that do not meet the condition. By using reduce, you can create a new array that contains elements modified in a specific way, or even create a single reduced value from the array.
I hope that this article has been helpful in showing you how to remove specific elements or modify certain elements in an array using different methods in JavaScript.
Thank you for reading.
By Mahady Manana, Fullstack Javascript Developer
09 February 2023 at 08 h 38
"Skills are honed through the interplay of learning and teaching - one must learn in order to teach, and teach in order to truly learn”. As a passionate Javascript developer, I enjoy sharing my knowledge and skills with others, and regularly publish tutorials on my website and other platforms about the latest Javascript, Typescript, Node.js, React.js, Next.js and more to help others learn and stay up to date with the latest developments trends.