JavaScript Problem: Checking if Two Arrays are Equal

in this tutorial we are going to deal with another javascript problem so the problem is to create a function that will compare two arrays and see if they have the same elements see if they're equal to one another this problem presents some interesting issues that we will look at welcome to another tutorial from all things javascript as always make sure to click that bell button and subscribe and remember to check out the discount links to all of my courses in the description section i really appreciate the support if you'd like there are other ways to support the channel which are linked to in the description as well and if you're collecting script look for the link in the description to learn and collect also i've done about 200 tutorials so you can search additional tutorials by going to my website or the youtube channel home page the website is linked in the description now at first glance creating a function that checks two arrays to see if they're equal seems fairly straightforward however when you remember the nature of objects in javascript and array being an object and how they are stored the problem becomes much more difficult let's first look at the issue and we'll look at a few solutions i will also want to try something new with this tutorial and that is to give you a challenge at the end all right so here's a basic function that initially we may think can compare two arrays and see if they're equal we're passing in two arrays and then it simply checks to see if they're equal to one another and we return the value simple as that down here we're logging the results to the console here we call that function we pass in two arrays they have the exact same elements in the exact same order so now when we take a look at the console we see that that equals false we're not able to check arrays this way and that's the the tricky part that we run into we think it's first going to be pretty simple but it's not because it's tricky and that's because of how objects are stored in variables in javascript basically what the variable is storing is a reference to a memory location where that object that array is held and so this will have a different reference than this and so they're not equal to one another the two arrays look the same but they're two different arrays and so the references are different and hence not equal i know i harp on that a lot but i think it's an important concept so how do we go about doing this then how can we determine if they're equal or not well in some respects this depends on what we how we define equal does equal mean that they have the exact same elements in the exact same order if that's the case then it's not too difficult to do we can do something like this there's a couple approaches actually so let me show those couple approaches one is we can simply convert each of the arrays to a string this is a really simple approach which i like and then check to see if those strings are equal to one another something like this save that and let's see what that tells us that tells us true that they are equal what if we make a change here do three and two what do we get now we get false and so that's a pretty simple solution and there are similar ones as well we could do something like this return array1.join we could simply join them with some character say a comma in this case would be exactly the same as doing two string and then check to see if that is equal to the other one joined the same way so that would work as well okay so those are a couple approaches that are quite simple now there's also an approach using the every method of arrays basically what the every method does is it goes through each element in an array and it allows you to pass in a callback function and then it it passes in that element each element in turn to that callback function and that function checks something and returns either true or false we call that a predicate function a function that returns either true or false and what every does what this method does is that if each element returns a true based upon that callback function we passed in if each element returns a true every element returns a true then it returns a true if only one of them returns a false it will return a false now i have another tutorial on every and some which is a companion method and i'll link to that for those who want more information but i wanted to show you that solution as well because we're going to build on that a little bit so now we want to return the results so i want to start with a return statement and let's go ahead and choose the first array dot every and then inside of parentheses is where we pass in that function this is going to be called for every single element now i'm going to use an arrow function i'll link to a tutorial on that if you need more information but basically our arrow function here this is the parameter we're going to use and this will contain the element as it goes through the array so in the case of the first array first time through will be this second time through will be this third time through and so on so here's the arrow for the arrow function and now what we want to do is check to see if array.2 includes that value so we'll go through each value in the first array and we'll check to see if it's included in the second array like that now that should work for us as well but something else that this method will do that the others would not do notice that i've now changed the arrays so that they have the same elements but they're out of order is this going to return a true or not this in this case it will return a true if we did the two string or join method it would not let's go ahead and refresh and there we get a true now there's still one problem with this look what happens if we do this kind of thing we still get a true and so something else i would want to do if i were using this method and i needed to make sure and i wanted them to be equal to as long as they had the same elements as each other i would also check the length and i would do an if statement like this if array1 dot length is not equal to array two dot length if that's the case then i immediately return false i don't deal with it anymore otherwise we'll do this every check now with this because those arrays are of different lengths we get the faults correctly so this implementation is a more detailed way of checking those arrays that's one way we can talk about it however this still has a problem what if we did something like this now the lengths are equal but notice that each one of these is going to be found here as well but the arrays are not equal so now we get a true and we don't want to get a true so i'm basically end this with a challenge i'll come back to it in another tutorial but i want to see what you guys come up with what solutions you guys come up with for this particular scenario now in most cases these solutions up here are going to work great for you so you don't need to worry about the others but if you needed to know if they just have the same elements how would you expand on this or how would you modify this function so that we would get the correct results with something like this being passed in go ahead and post your responses in the comments it'd be neat to see what some of you come up with and like i said we'll revisit this in a later tutorial alright if you found that helpful please hit the like button and subscribe and remember the discount links to all my courses in the description section finally click that bell button to be notified about new releases i try to release a new tutorial each week and thanks for watching

Channel: All Things JavaScript, LLC

Views: 6,002

Rating: 5 out of 5

Keywords: JavaScript, Learning, Tutorial, All Things JavaScript, Getting Started, instruction, training, JavaScript Tutorial, Understanding JavaScript, every, Checking if Two Arrays are Equal, JavaScript Problem

Id: 83l9bSQXoq0

Length: 10min 1sec (601 seconds)

Published: Thu Jul 23 2020