It’s often the case that our data structures aren’t always simple structures. Even having an array of objects can add a sprinkle of complexity to, seemingly, straightforward operations.
One of which is removing an object from an array, given a key/value query, ie. remove the object from this array where the
id field is set to
The easiest way to grab the object from the array, is to loop through the array. However, the issue appears when we’ve found our object, removed it and want to stop looping (to avoid unnecessary cycles). We could use a
while loop and the
break statement (which will terminate the current loop). However, it would be nicer to explore the ES5 methods and utilise one of those…
The one we’re going to use is
Array.prototype.some, which you can use on an array. The some method will test items in the array to see if some of them pass the test provided by your function. What does this look like in practice?
result is set to
true because the user “walt” has his age set to greater than 30. So “some” of the array elements pass the test.
The key thing about
some for our use, is that it will stop looping as soon as it encounters a
true returned from the test function.
When designing desired function implementations, I sometimes like to start with the usage and work backwards.
So we’d like our function to take an array to work on, and an object containing a
key property and a
value property. This object will form our query to find our object to remove.
The skeleton of our
removeByKey function will look like this:
So all we need to do now is inside our anonymous function we pass to
some, work out if the query object we pass in matches the current item being looped in the array:
Next up, we need to use the
splice method to remove the current item from the array:
This will remove the item from the array, but we now need to sort our
return statements out:
There we have it.
I’ve embedded a JSBin link in the post, so you can have a play and see it in action. I’ve also refactored our function slightly so we’re now using a ternary operator, and also casting the result of the
splice to a boolean, which makes the
return true completely redundant.