How to Remove Object From an Array in JavaScript

1. Use the splice() Method to Remove an Object From an Array in JavaScript
2. Using the slice() Method to Remove an Object From an Array in JavaScript
3. Use the filter() Method to Remove an Object From an Array

We have introduced how to empty an array in JavaScript in another article. In this article, we will learn how to remove an object from a JavaScript array. The article will introduce and implement methods like splice(), slice(), and filter().

Use the splice() Method to Remove an Object From an Array in JavaScript

The method splice() might be the best method out there that we can use to remove the object from an array. It changes the content of an array by removing or replacing existing elements or adding new elements in place. The syntax for the splice() method is shown below.

Array.splice(index, count, items1, ..., itemX)

The index option refers to an integer that specifies at what position to add/remove items. We can also use negative values to specify the position from the end of the array. The count option is optional and indicates the number of items to be removed. The items1, ..., itemX option is also optional and can be used to add new items to the array.

At first, we declare an array variable named myArray, which contains three objects in the array. Then, in the second line, we use the splice() method to the array. We also indicate 0 and 1 as the arguments. Then we log the array in the console.

Initially, the array contains three objects. The value 0 in the splice() method indicates the first index of the array, that is, the first object. It means that we will start removing from the first index. The next value, 1 in the method, specifies that the method will remove one item from the starting point. Thus, the example below will remove the first object in the array.

We should note that the splice() method modifies the array; thus, we can use the slice() method to remove the desired object from the array without changing the original array.

Code Example:

var myArray =
    [{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)

Output:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Using the slice() Method to Remove an Object From an Array in JavaScript

The slice() method returns the modified copy of the portion of the array selected from start to the end, but the end index passed onto the method will not be included. The syntax for the slice() method is below.

Array.slice(startIndex, endIndex)

Here, startIndex is the zero-based index from which we start the extraction. A negative index can be used, which indicates an offset from the end of the sequence. For example, slice(-3) extracts the last three elements in the sequence. If startIndex is undefined, the slice() function starts from index 0, whereas if startIndex is greater than the index range of the array, an empty array is returned.

The endIndex option is also a zero-based index before which to end the extraction. The slice() method extracts up to the endIndex but does include the endIndex itself. If the option endIndex is excluded, the slice() function extracts through the end of the sequence, that is, to the array.length. If endIndex is greater than the length of the sequence, the slice() function also extracts through to the end of the sequence.

The slice(1,3) method in the example below will extract the elements from the second index to the fourth index. Since there is no fourth index in the array, it will extract the elements until the sequence’s end.

Code Example:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

Output:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Use the filter() Method to Remove an Object From an Array

The filter() method creates a new array with the elements that pass the test provided by the function. It means it will return a new array of objects. If no elements pass the test, the function will return an empty array. We will use the arrow function to demonstrate the filter() method.

The method filter() uses a terminology called callback function, which goes like

var newArray = myArray.filter(
    (element, index, array) => {
        ...Items passing this condition will be added to the new array...})

The method accepts three arguments. The element option is the current element being processed in the array. The index is optional and indicates the current element’s index being processed in the array. Finally, the array option is the array filter called upon and optional.

First, create an array with objects as done in the methods above. Then call the filter() function with the array variable. Specify item as the argument of the arrow function and return the elements of the array with the expression item.id ! == 1. Store the new array in the newArray variable and log it in the console.

The example below only returns the element of the array whose id does not equal the value 1. Thus, it returns the second and the third element of the array.

Example Code:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

Output:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]