JavaScript Arrays: Properties, Methods, and Manipulation (Part 4 of 7)

Key Takeaways

now by default the sort method doesn't work exactly like we'd expect it to if i uncomment out this code here you can see i have an array of numbers here that are all jumbled up and if i just run the sort method on this ray13 dot sort and then i output this to the screen and you can see that this sorted array isn't exactly what we were expecting and instead of 1 2 3 4 10 20 30 40 we're getting 110 220 330. the reason it does this is because by default the sort method uses the unicode values to sort by and this is how these values are sorted in unicode if we want to sort these values in any other way then we need to manually tell javascript how they should be sorted and the way that we do that is with a compare function so what a compare function is let me go ahead and write one of these out and that would be the best way to explain it so function and i'm just going to call this sort nums and a compare function takes in two values i'm just gonna have this take in a and b two parameters um so you can see i have commented down here if we return a value that is greater than zero then we're telling javascript to that the way this array should be sorted is that the b should come before the a uh if it returns a zero we're saying that these values are equal and that it doesn't matter about the sort order so it'll be unchanged if we return a value that is less than 0 then we're saying that a should come before b so say that we are passing in numbers to this sort to this compare function um so let's just uh pick two random numbers here let's say a is 10 and let's say b is 20. and so we want this function if it runs into these two parameters to return a number that is less than 0 because we want a to come before b because 10 is less than 20. so how could we do that well if we did 10 minus 20 that equals negative 10 that is a number that is less than zero so we're telling javascript that a should come before b so in this case if we wanted to sort in ascending order that would be correct because a is less than b if a was 30 then this would be 30 minus 20 and then that would return 10 and that's also what we want because now a is greater than b this returns a number that is greater than zero so we're saying that b needs to come before a so we're saying 20 needs to come before 30. and if a was 30 and b was 30 that would be 30 minus 30 equals 0 and that returns 0 and it's just saying that these values are equal and that the sword order doesn't matter so to sort this in ascending order we could just do a return a minus b and then if i pass this compare function into the sort method then now you can see down here that our array is sorted the way that we uh think it should be one two three four ten twenty thirty forty and now the great thing about these compare functions is that you can customize them any way you want if you want this to be sorted by descending order then we can just do b minus a and now it's sorted by descending order 40 30 20 10 4 3 2 1. so that's a brief look at sorting numbers now let's take a look at sorting some strings here so let me take away that compare function so we are just using the default sort method to sort these strings so i have jack jill cory pete and ann and you can see that the using sort by default kind of looks like it works here but then if we take a look at the end it didn't actually do exactly what we wanted because and is lower case and like i said before this sorts by the unicode values and in unicode these uppercase characters are larger than the lowercase characters so if we wanted this to be case insensitive then we have to write our own compare function for that um so let's go ahead and write a quick compare function and see how we would do this so i'm gonna i'm going to call this one sort alpha and i'm also going to pass in a b usually for compare functions those will be the parameters something like that a b so what we can do here is now we want to uh sort these by the lowercase version of these strings we want it to be case insensitive so what we can do is we can make a variable inside our function and just call it a lower equals a dot to lower case and then we can either make another variable called b lower equals b dot to lower case and then we can just compare these strings so we can say if a lower is less than b lower then we can return negative one because remember if we want uh a to be before b then it needs to be a number that is less than zero so we're going to return negative one for that um so let me go ahead and copy this and paste it in if a lower is greater than b lower then we want to turn positive one and if it's neither of those which in this case it would mean that it's equal then we would just return 0 okay and now let's go ahead and pass this compare function into our sort method and whenever we save that and look at the sorted values now now then you can see that this sorts the way that we want it to be sorted it's case insensitive so we have ann cory jack jill and pete okay so that was a quick look at sorting some strings now let's take a look at sorting some objects so i have a sample object here so let me uncomment this and let me go ahead and uncomment out the code that will display this to the html um okay so what this object is is it's an object of names and each object has a first property and a last property for first name and last name um so now let's uh say that we want to sort this first by first name and then by last name so if we look at the comments here you can see my original array of the way that it's displaying now is joe smith and smith tom doe and ando and then in this comment here we have the desired sorting would be ando and smith joe smith and tomdo so we're sorting on the first name first and if the first names are the same then we want to sort on the last name so ando would come before ann smith so we know we're going to need a custom compare function to do this so let's write one called sort names and we're just going to use the same a and b parameters and then let's go ahead and try to reuse some of the code that we used before so let's take this sort alpha function that we wrote earlier and let's paste that into our sort names so then let's take this function and let's go ahead and try to sort this and see what happens so whenever i save that it's not displaying anything so there's most likely an error in here now what's going on is that we need to realize that now we're trying to sort objects now we're trying to sort objects instead of just the strings themselves so whenever we say a dot lower case here it doesn't know uh what it is that we're trying to access so these are the same objects that it is that we're trying to sort so they have the same properties so a lower instead of a dot lower case really needs to be that a object and then the first property and then to lower case and then b dot first dot two or lower case and if i save that then you can see here um that it is now sorted on the first name so now we have ann smith ando joe smith and tomdo but you can see here it's sorted on the first name and the last names are still out of order so we have ann smith and we have ando so how can we do this to where it sorts on the first name first and if those are equal then it'll sort on the last name so all we have to do here is we're going to be sorting on multiple parameters so let's put in an if statement here and just say if now these are the first names here i should probably rename these but i'm just going to leave them the way that they are so if these first names are equal then now we want to sort on the last name so now we can take the same logic that we use for the first names copy that and we can paste it up here into this if statement and now we want to sort on the last name so let's go ahead and to lower case those also so let's paste those in and instead of a lower i'm going to call this a last and instead of b lower i'm going to call this b last and now instead of the first names we want to grab the last property and let's copy that so now remember a lower and b lower are the first names when those are equal then we want to come in here and sort both of these based on the last name so if the last name if the a last name is less than the b last name return negative one and if it is greater than the b last name return one and if it's the same just return zero so let's go ahead and save that and then you can look down here and see that our array of names is sorted exactly how we want it to be sorted so it's sorted by first name and then it's sorted by last name okay so that is a quick look at sorts and a few different examples of that now let's go ahead and take a look at the filter method