AppDividend
Latest Code Tutorials

JavaScript: Remove Object From Array

0

JavaScript arrays allow you to add and remove array items in different ways. Unfortunately, there is not a simple array.remove() function. So, how do you remove an element from the JavaScript array? Instead of the delete method, the JavaScript array has a various of ways you can delete and clear array values. Let’s see how to remove object from JavaScript array.

JavaScript remove object from array.

To remove an object from the array in Javascript, use one of the following methods.

  1. array.pop() – The pop() method removes from the end of an Array.
  2. array.splice() – The splice() method deletes from a specific Array index.
  3. array.shift() – The shift() method removes from the beginning of an Array.
  4. array.slice() – The slice() method deletes unnecessary items and returns required items.
  5. array.filter() – allows you to remove elements from an Array programmatically.

JavaScript array pop()

The array pop() method removes the last item of the array, returns that item, and updates the length of an array. Here, the item means the object.

Let’s understand this via an example.

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.pop();
console.log(objArr);
console.log(removedEl);

Output

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

You can see that we defined an array with five objects.

To remove the last object from the array, we have used an array.pop() method that always deletes the last item and returns that item. At last, we printed both array and removedEl.

JavaScript array splice()

Javascript array splice() is an inbuilt method that changes the items of an array by removing or replacing the existing elements and/or adding new items.

To remove the first object from the array or last object from the array, then use the splice() method. Let’s remove the first object from the array.

See the following code.

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.splice(0, 1);
console.log(objArr);
console.log(removedEl);

Output

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
[ { name: 'Eleven', show: 'Stranger Things' } ]

The splice() method returns an array containing the removed item, as you can see from the output.

JavaScript array shift()

Javascript array shift() is an inbuilt function that removes the first item from an array and returns that deleted item.

To remove the first object from the array, use array.shift() method.

See the following code.

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.shift();
console.log(objArr);
console.log(removedEl);

Output

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
{ name: 'Eleven', show: 'Stranger Things' }

The shift() method does not return an array. Instead, it returns the removed element from the array.

JavaScript array slice()

Javascript array slice() is an inbuilt function that returns the shallow copy of the portion of the array into a new array object selected from beginning to end.

To remove the last object from the array, use array.slice() method.

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.slice(0, objArr.length - 1);
console.log(remainingArr);

Output

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]

We know that we have to remove the last object from the array, so we have used array.slice() method to remove the element.

JavaScript array filter()

If you want to remove an object based on the property value, then you can use the array.filter() method.

Javascript array filter() is an inbuilt method that creates the new array with all elements that pass the test implemented by the provided function.

See the following code.

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.filter(data => data.name != 'Ragnar');
console.log(remainingArr);

In this example, we have to remove the object whose name property value is Ragnar. So, we will filter the array and return the array, which does not include the Ragnar valued object. 

Based on that condition, the array will be filtered. To remove the element using the filter() method, you have to write the condition based on that.

Remove the last element by reducing the array size.

There is another way to delete the last element of the array by reducing the array length to 1.

To find an array length, use arr.length property, and to remove the last object, we will subtract the array length by 1, and that means the last element will be removed.

See the following code.

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

objArr.length = objArr.length - 1;
console.log(objArr);

Output

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]

You can see that the last object is deleted by changing the array length. This method is not recommended since this modifies the length of the original array.

Conclusion

Remove objects from the array is not a difficult task, and we have gone through lots of ways to achieve that precisely. Removing JavaScript Array elements is essential for managing your data.

There is not native ‘remove‘ method available, but there are different methods and techniques you can use to exterminate unwanted array items.

See also

JavaScript: Remove the first element from the array

JavaScript clear array

JavaScript: Find Object in Array

JavaScript Map Object

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.