Remove Object Duplicates from Array | JavaScript Tutorial

hello everyone and welcome to this tutorial so today what I'm going to be showing you is how you can remove duplicate objects from an array of objects and I'll be showing you two ways of doing that a json.stringify method and doing it by an identifier so both of these methods have strengths and weaknesses and you'll want to weigh these up when deciding which one to use in a given situation so let's start with the stringify method to begin you apply the filter method to the array so what you do with Filter is pass a function into it and this function is going to run as many times as there are items in the array and each time the function runs you have available to you your current value so each object and also the current index value of the current item so the way the Filter Works is that it produces a new array so I'll save a reference here to the new array it produces and that new array is going to contain items for which the return value of this function is true so what we're going to want to do inside here is set a rule which is true when the current item is unique and false when the current item is a duplicate so to do that I'm going to make the return value of this function the result of a logical comparison between the current index value that filter is iterating through so it's going to be initially 0 1 2 and then three and on the right hand side the index value of the first appearance of an object in the array so for example for this first object in the array when filter is iterating over it the current index value is going to be 0 and on the right hand side the first appearance of this object in the array is is also going to be zero so this is going to return true and this first object is going to be kept and it's going to be placed in the new array by filter but when filter reaches the duplicate of that object at index position 2 in the array then the value of index is going to be 2 but the index position of the first appearance of that object it's still going to be zero so this is going to end up returning false and the duplicate will not be included in the new array and this is the way that we're going to be filtering out duplicate objects from the array because if it's not the first appearance of an object index is always going to be greater than the right hand side which is the index value of its first appearance now how to return the index value of an object's first appearance so for this you can use a method called find index and this accepts a function and it's going to iterate through the array so the original array and the first time that this function returns true it's going to stop iterating through the array and return the current index value so we want to set rule inside this function that is going to return true when find index comes across the first instance of an object in the array so I'm going to make the return value of this function the outcome of a logical comparison and it's going to be between the item that filter is currently iterating over and the first time that find index finds that particular item because item it could be the first second third instance of an object but find index is going to return true the first time it finds it so in that way we can find the first appearance of an object in the array now you can't make a logical comparison between objects directly be but what you can do is stringify those objects in order that you can compare them as string values so that's what I'm going to do here so firstly I want to stringify item which is the item that filter is currently iterating over and compare that to a stringified version of the current object that find index is iterating over so the current object is available to you as a parameter automatically in the function that you've nested inside find index so this should now hopefully be working and filter will return an array with only two objects into the res reference so let's take a look about that result now in the console so we're getting back an array of two items the first and the second object in the array so this works because we're comparing stringified versions of the objects but there is a major weakness to that and that is because we're using json.stringify which silently removes functions from objects when you use it the functions here are being silently removed In the comparison and not compared properly so if I was to change this function in the duplicate here in some way so it's no longer a duplicate it would still be filtered out of the array because json.stringify won't take functions into account it will silently remove them and just compare the data values so if we take a look at the output you see that we still only have two objects in the array even though we should have three you might find it odd here that the function is still included on the object at index position one but that is because json.stringify is only removing these functions in the comparison what's being stored by filter in the new array is a subset of the existing items in the array so you still get the function in it but it's not actually comparing the functions so this is a downside to using Json stringify having said that if you don't have any functions in your object then it's a good solution it's actually comparing all of the keys and values together without you having to specify each one individually the next method I'm about to show you comparing by identifier does require you to explicitly specify the keys you want to compare on the upside is you can also use it for comparing functions now the logic of the comparison is actually very similar to the Json stringify method so I'm going to copy it and edit it and I'll comment out the json.stringify original code we were just working with so the change we make to the Json stringify method here is instead of comparing stringified versions of each object we're going to be comparing individual keys on the objects so the one that you will compare most often as an identifier on an object is usually an ID property so with this code we're comparing the ID values only here so it's ignoring the other parts of the object but if the ID identifier is representative of the rest of the content on the object then this is a good solution now before moving on to multiple properties and functions I'm going to speed test this identifier approach against the Json stringify method because in most use cases comparing a stringified version of the object or by an ID value is going to be sufficient so you may be wondering which one to use and something that might help you in deciding between them is which one is more performant or in other words which one is faster so I'm going to copy these into JS bench so this allows you to set up rival test cases with some setup JS beforehand so this is code that is common to both of the solutions so that's the array and if you want you can set up more test cases to compare here by adding another test case but here I'm just going to go ahead and test these two solutions against each other now my suspicion is because the stringify method involves stringifying the object that it's going to be slightly slower so if that is the case it's about 40 slower than filtering by identifier now actually this isn't a huge difference if you're just doing this once for a small array it's not going to make much difference if you're iterating over a large number of objects in an array then this might start mattering to you in which case you're better off with the filter by identifier solution now let's return to the code and I'll show you how you can compare across multiple identifiers and also take the value of functions into account now if you want to compare objects on another data property such as name in addition to ID then all you need to do is to extend the logical comparison so you're now checking for the first appearance of ID as well as name so all you need to do is to check on that name property as well and that's now checking on both of those properties so if I was to change he said object name in this array to someone to then the first object is unique the second one is also unique the third one now it's someone to the name is also unique the fourth one is also unique but we're not taking functions into account yet so even though they're all unique the fourth object in this array is only unique on the functions so because we're not comparing for that we're still only going to get back three objects in the array so to compare functions as well we again want to extend this logical comparison I'll go on to a new line here so to make this a single statement with a return value I'm going to be using the ternary operator here so the condition that will be true or false is whether the function property exists on an object it only exists on two of the objects so it would throw an error if it doesn't exist and we try to compare on that property so the first thing I want to do is to check if the function exists on the objects being compared if that is true then I want to go ahead and compare the values of those functions right so you can't compare functions directly but you can compare them by springifying them you can't use Json and stringify of course because that silently removes functions but there is another method you can use for this and that is the tostring method so you want to compare the stringified version of each of these functions foreign so for this statement now it's going to return true if these functions exist and they both have the same value that now with the ternary operator we have to specify what this will return if this initial statement is false so if the functions don't exist and we actually want to return true here the reason that we want to return true here is if the property containing the function does not exist on both of the objects then they are identical in that sense so when the find index function is iterating through the array trying to find the first instance of an object if it doesn't have a function on it then it's going to turn true here and if it returns true also on name and also on ID then that is going to be counted as the first instance of the object if it does have a function then it's going to return true only if those two functions are equivalent so let's take a look at the result in the console now all objects in the array are now unique so we get an array back with four objects just to check that function check is working I'll change it back now so it's the same as the first object with the function you see now it's not included in the array so that is how you can filter duplicate objects from an array of objects in JavaScript and that is it for this tutorial so I hope you found it useful if you did please consider hitting the like button down below this video it helps us with the algorithm and others to find this video and if you'd like to see more content like this from us in the future don't forget you can subscribe to the channel

Channel: OpenJavaScript

Views: 5,280

Keywords:

Id: -hecS6tFftM

Length: 13min 38sec (818 seconds)

Published: Mon Dec 05 2022