How to Remove Object from Array in JavaScript?
📋 Table Of Content
In this article we will learn about different ways on how to remove object from an array in JavaScript.
In this post we will be using JavaScript methods like, splice(), slice() and filter().
Method 1: Using splice() to remove object from Array.
The splice() method allow us to change the content of an array by removing, replacing or adding new item in an array.
splice() method modifies the original array.
Syntax:
Array.splice(startPos, deleteCount, item1, item2, itemN)
startPos : It indicate the position from where to add or remove item. If the value is negative, it define the position from the end of the array.
deleteCount: It indicates the number of items to be remove from the startPos.
item1, item2, itemN : This are optional. These are the items that can be added in the array beginning from startPos.
Example:
const student = [{id: 1, name:'Max'}, {id: 2, name:'John'}, {id: 3, name:'George'}];
student.splice(0,1);
console.log(student)
Output:
[ { id: 2, name: 'John' }, { id: 3, name: 'George' } ]
The splice(0, 1) means we want to remove 1 object from position 0 of the array.
Method 2 : Using slice() to remove Object from Array in JavaScript
The slice() returns a new array by extracting the elements we need from an array. It does not modifies the original array.
Syntax:
array.slice(startIndex, endIndex)
startIndex : It start position to extract elements from an array. By default it's 0 (zero). If it is undefined, slice starts from 0 (index).
endIndex : the position upto which you want to extract the elements from an array. The endIndex element is not included.
Example:
const student = [{id: 1, name:'Max'}, {id: 2, name:'John'}, {id: 3, name:'George'}];
const newStudent = student.slice(0,2);
console.log(newStudent)
Output:
[ { id: 1, name: 'Max' }, { id: 2, name: 'John' } ]
The slice(0, 2) method in the above code will extract the objects from 0 i.e first index upto 2 i.e third index from the array. It do not include the object in position 2 i.e endIndex.
Method 3 : Using filter() to remove Object from array by Id in JavaScript
The filter() method returns a new array with all the element that passes through a given test provided by a function. It do not modifies the original array.
Syntax:
Array.filter((element) => { /* ... */ } )
element : The item that is processed in the array.
Example:
const student = [{id: 1, name:'Max'}, {id: 2, name:'John'}, {id: 3, name:'George'}];
const newStudent = student.filter((element) => {
return element.id !== 1
});
console.log(newStudent)
Output:
[ { id: 2, name: 'John' }, { id: 3, name: 'George' } ]
In the above example, we have removed the object from the given array by it's id. We have filtered through the array and returned only those object whose id is not equal to 1 i.e element.id !== 1 .
It creates a new array with the objects that passed through the given condition
Other Methods to Remove Items in an Array
If you just want to remove the first or the last items from an array , you can just use the pop() and shift() method.
pop() removes the last item from the array.
Example:
const student = [{id: 1, name:'Max'}, {id: 2, name:'John'}, {id: 3, name:'George'}];
student.pop()
console.log(student)
Output:
[ { id: 1, name: 'Max' }, { id: 2, name: 'John' } ]
shift() method removes the first item from an array. Here in the example we will remove the first object from the array.
Example:
const student = [{id: 1, name:'Max'}, {id: 2, name:'John'}, {id: 3, name:'George'}];
student.shift()
console.log(student)
Output:
[ { id: 2, name: 'John' }, { id: 3, name: 'George' } ]
Related Topics:
How To Convert An Array Of Objects To An Object In JavaScript ?
Convert Javascript Array To Object Of Same Keys/Values
How To Convert An Array To Object In Javascript?
How To Copy Or Clone An Array In JavaScript
How To Convert An Array To String In Javascript
How To Insert An Item Into An Array At A Specific Index In JavaScript?
