How to Remove a Specific Item From an Array in JavaScript

Arrays are one of the popular data structures that are used widely in JavaScript. Whether you are dealing with a list of users, shopping products, or tasks, you always use the Array to arrange things. In this blog, you will understand everything about what an array in JavaScript is and how to remove specific items from the array in JavaScript.

Table of Contents:

• What is an Array?
• Removing Elements from the Array
  • Removing The Last Element From Array
  • Removing The First Element From Array
  • Removing The Specific Elements From the Array
    • Method 1: Using splice() Method
    • Method 2: Using filter() Method
    • Method 3: Using reduce() Method
    • Method 4: Using indexOf() and slice() Methods
    • Method 5: Using forEach() and splice() method
• Comparison between Methods for Removing Specific Elements from an Array
• Conclusion

What is an Array?

An array is a collection of an element of the same datatype. It allows you to store multiple elements of similar types into a single variable.

Example:

const arr = [1, 2, 3, 4, 5]

console.log(arr);

Output: 

Removing Elements from the Array

If you want to remove elements from arrays, you can use the pop() method to remove the last item from the array and the shift() method to remove the first item from the array.

But if you want to remove an item from in between the array, then there are multiple methods for doing this:

Removing The Last Element From Array

For removing the last element from the array in the javascript, pop() method is there to help you.

Example:

const courses = ['HTML', 'CSS', 'JavaScript'];
courses.pop();
console.log(courses);

Output:

Explanation: In this example, you’re passing an array that contains the names of the courses, and whenever you’re calling a pop() method, it will remove the last element from the array, and your code produces the above output.

Removing The First Element From Array

The shift() method in JavaScript is used to remove the first element in the array.

Example:

const courses = ['HTML', 'CSS', 'JavaScript'];
courses.shift();
console.log(courses);

Output:

Explanation: In this, you have the same array that contains the names of the courses, and whenever you’re calling a shift() method, then it will remove the first element from the array.

Removing The Specific Elements From the Array

Here are some of the methods to remove the specific elements from the array:

Method 1: Using splice() Method 

splice() method allows you to remove an item from a specific index. This method can modify the original array, not create any new array.

Example:

let courses = ["HTML", "CSS", "Javascript", "Python"];
let deleted = courses.splice(2, 1)
console.log(courses);
console.log(deleted);

Output:

Explanation: splice(start-Index, delete-Count, item-List) method just takes three arguments. start-Index is the index value from which JavaScript starts deleting items. Second, delete-count is the number of items to be deleted, and the last item-List means you add a new list at start-index. This is the best way to remove multiple items from the array.

Method 2: Using filter() Method

filter() method in JavaScript is also used to remove specific elements from the array, but it returns the new array, and the changes are not made in the original array.

Example:

const courses = ["HTML", "CSS", "Javascript", "React"];
const updatedCourses = courses.filter(name => name !== 'Javascript');
console.log(updatedCourses);

Output:

Explanation: filter() method creates a new array, so when you apply the filter() method on courses, then a new updatedCourse array is created with updated entries.

Method 3: Using reduce() Method

reduce() method can pick the selective item from the original array and build a new array.

Example:

const course = ["HTML", "CSS", "Javascript", "React"];
const valueToRemove = "CSS";
const updatedCourse = course.reduce((acc, val) => {
    if (val !== valueToRemove) acc.push(val);
    return acc;
}, []);
console.log(updatedCourse);

Output:

Explanation: Here, in this code, the reduce() method is used to remove all the occurrences of a specific value from an array. reduce() method iterates through an array, and if the value is not equal to the value to remove, then it stores it in the new array and returns the updatedCourse array.

Method 4: Using indexOf() and slice() Methods

A combination of these methods could also help you remove the single occurrence of an item from the original array without modifying the original array.

Example:

const course = ["HTML", "CSS", "Javascript", "React"];
const idx = course.indexOf("CSS");
const updatedCourse = [...course.slice(0,idx), ...course.slice(idx+1)];
console.log(updatedCourse);

Output:

Explanation: This technique combines the indexOf() and the slice() methods together to remove a specified element from the given position.

1. course.indexOf(“CSS”) can give you 2, as CSS is in the 2nd position.
2. course.slice(0,idx) extracts the element before CSS.
3. course.slice(idx+1) extracts element after CSS.
4. Spread operator (…) helps to merge these slices into the new array

Method 5: Using forEach() and splice() method

In this technique, we are using the forEach() method to iterate over the array and then the splice() method to remove that specific element from the array.

Example:

const course = ["HTML", "CSS", "Javascript", "React"];
const valueToRemove = "Javascript";
course.forEach((num, index) => {
    if (num === valueToRemove) {
        course.splice(index, 1);
    }
});
console.log(course);

Output:

Explanation: In this example, the forEach() loop runs for each and every element of an array. When it finds an element matching with the valueToRemove, then the splice() method removes it. However, this method does not work correctly when multiple elements need to be removed. 

Comparison between Methods for Removing Specific Elements from an Array

Here is the comparison between every method that is used to remove elements from in between the array in javascript.

Conclusion

There are multiple ways to remove elements in Javascript. Depending on your needs, you can choose a method to remove elements from the array in JavaScript. To remove the first element, you have to choose shift(). Similarly, for removing the last element, the pop() method is there, and for removing middle elements, various methods are there, like splice(), filter(), and reduce(). Choose these by considering their advantages and disadvantages.

How to Remove a Specific Item From an Array in JavaScript – FAQs