Image for post
Image for post

How to remove an object that matches a filter from a JavaScript array using array.splice(index, howMany) method.

Functions used in this tutorial:

  • array.some — check if at least one item exists in array.
  • array.findIndex — find index of an object in array of objects.
  • array.splice(index, howManyToDelete) — split array at index and remove n-number of items past that point, return an item or list of items that were removed.

Sometimes you need to remove an object from an array that contains properties that match a value (or values.)

This tutorial explores one practical use case for this.

What is a practical use case for removing objects from JavaScript array?

One of those use cases is storing association between user and event. For example, when user “likes” a tweet, we store relationship between user id and tweet id. This entry is stored in Mongo (or any other) database. When user “unlikes” the tweet, we need to remove that entry from Array object in event relationship map.

In my case I had to remove entry from array when developing Semicolon (www.semicolon.dev). Here’s the example of removing object from JavaScript array and what it was used for:

Image for post
Image for post

There are many ways of removing an object from a JavaScript array. This tutorial shows how to remove an object with two properties. The removal of the object will occur only if it matches two values provided in a filter object.

let relationships = [
{ userid: 1, tweetid: 2 }, // user 1 likes tweet 2
{ userid: 2, tweetid: 2 }, // user 2 likes tweet 2
{ userid: 3, tweetid: 4 }, // user 3 likes tweet 4
]

Let’s say we want to remove 2nd item:

let filter = { userid: 2, tweetid: 2 }

Basically filter is an object that works as a filter for the item we want to delete. It is not stored as a reference to that object. It’s a separate, stand-alone variable.

I wrote this helper equals function because I need to match two properties in an object. If in your case you need to test only one property, you can remove the second test after && operator or provide alternative matching criteria you’re looking for.

// Utility function for comparing a relationship
// between user id and tweet id

const equals = (list, filter) => list.some(
v => v.userid === filter.userid &&
v.tweetid === filter.tweetid
);

I used the built-in .some method, because it will break out of the loop, soon as at least one item is found — exactly what we need — without spending any more time parsing entire array, like some of the other methods do (like filter or map, for example.) Doing this might help with performance on large lists.

The equals function takes the array containing all relationship associations in its first argument. The second argument is the filter object. It’s an object containing properties we want to match and then delete an entry that matches it from the list.

Now we just need to splice the array

The [].splice(index, howmany) method deletes an item or a number of items from the array starting from index (also deleting item at index.)

If you don’t provide second argument splice will remove all items after index specified in first argument. This is why we will use splice(array, 1), because we only need to remove one item.

In order to splice an array we need to know the index position of the item in the array we want to start splicing it. (Or deleting one or more items starting at that location.)

First, let’s find that index using the build-in Array method findIndex:

    // filter object containing properties that match
// property values of the array item we want to remove

let filter = { userid: 2, tweetid: 2 }
// first we need to find index of the object
// we're looking to remove:
let index = relationships.findIndex(
i => i.userid === remove.userid &&
i.tweetid === remove.tweetid);
// finally, remove matched item
relationships.splice(index, 1)

One traditional way of removing an item from JavaScript array is by using the built-in splice method. And that’s what we did here.

Last argument is set to 1 to make sure we only delete 1 item.

You can specify any number but in this case we only need to delete 1.

Leaving second argument empty will remove all items after the index.

This tutorial came about when I needed to add and remove the relationship between a user id and the tweet object, indicating that it was “liked” by a particular user.

Clicking the “like” button multiple times would toggle the object, inserting it or removing it from live relationship object.

By sharing it with others I hope it helps someone out there facing a similar issue. Inevitably, you’ll come across something like this in your own code.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store