JavaScript Array Sort Method Practice in 5 Minutes

so you want to get better at javascript well arrays are an essential part of javascript so in this video let's take a look at the array sort method in about five minutes so first off if you're new to the channel welcome i do weekly videos on web development topics so if you're interested in more of that content make sure to subscribe so you can see it when it comes out all of that said let's dive into arrays all right so this is a series on javascript arrays and i've got a github repository here that inside of this github repository has a readme on what we'll work on and then a worksheet that you will check out to be able to use below so inside of that worksheet you'll have some sample star wars character data that we're going to work with and we're going to walk through in these different videos mapreduce filter sort every sum and then maybe we'll add some no pun intended extra videos to this on the end if you're interested so let's go ahead and dive in all right so i've got the worksheet repository checked out and inside of the worksheet we have our sample characters array with star wars characters that each have a property of name height mass eye color and gender so if we scroll down to our sort section which is where we are now we want to start by sorting by mass and so what we want to do is sort will let us iterate through each item in the array and then what we need to do our responsibility is to tell javascript how to actually sort that item so let's do sorted let's just call this by mass and let's do a characters array and call dot sort on it and what we're going to pass in here is a callback function that has a reference to two items a and b and then our responsibility is to determine or tell javascript hey which one a or b should come first so this is known as the compare function and i've got open w3schools because this is something that i often forget but if the result of that callback function that compare function is negative then a is sorted before b if the result is positive then b is sorted before a so we want either a positive or a negative number so what we can do is we can return a dot mass minus b dot mass and then it will kind of take care of the rest and then i want to take this and log out the by mass array so let's say this and i've got nodemod running which is a live reloading of my javascript code here so i've got that and just save it and it should be ready to go and you see this is an increasing order so mass is 49 then 77 84 and then lastly 136 now the cool thing with a sword is if we wanted to flip this we could uh take the b mass and subtract the a mass so then this would result in a descending order so we would start with 136 84 77 and then lastly for leia 49. so that's pretty cool and that works well all right so now we want to do a very similar thing but we want to do this by height so we'll call this by height we'll take our character's array we'll call sort we'll pass it the comparator function which takes two parameters a and b and then what we want to return is the same general idea except for instead of mass we want to take our height so a dot height minus b dot height and let's do a log of this so let's log out by height and let's see if we look at this so height is 150 then 172 then 188 and then 202 so that seems to be working and again we could flip this if we did b height minus a height now one thing i forgot to mention is with these arrow functions as callback functions we can since these are one line returns we can actually ignore the return keyword and get rid of the brackets and the semicolon so it'll look like this and have this be all in one line so this will actually work the exact same but be a little bit shorthand of a syntax so this works the exact same but lets us do it all on one line which is pretty neat all right so now we'll do one that's a little bit different where we want to sort sort by name which is a string property this will be a little bit interesting so we'll do our by name variable here and then we'll take characters call sort pass it our comparator function or compare function and in this case i'm going to do a full non-abbreviated function in here and what we want to do is be able to compare a and b but we can't do subtraction because it doesn't quite work with our strings so what we want to do is check if a dot name is less than b dot name because there's some math that can go on behind the scenes we'll return a negative one and then otherwise we can return a one and kind of flip that order so let's log this log by name and let's see what we get if that's in the right order so we get anakin and then darth vader and then leia and then luke and that seems to be in the right order alphabetically a d l and then even l e is ahead of l u so that seems to be working okay so again strings are a little bit different since they're not numbers we have to kind of define the return 1 and negative 1 values by looking at in this case what is subtraction and we can do other things to ignore case and things like that but this one will work and if we wanted to flip this we could simply return 1 here and then negative 1 here if we wanted to so if we look at this this should be in descending alphabetical order so l u l e d and then a so that works all right and then i'll do similar thing here by gender and we'll say characters.sort a and b and then really what we can do is we can say if a dot gender is female for example then we can list those first so let's do a negative one otherwise we'll just return one so this should put them in order of all females first and then males last let's take a look and see if this works let's log this by gender all right and scroll down so we can see the resulting array so let's look at this so this puts leia first as the female and then there are three males and if we flip this to a one and a negative one now we should see that this will flip and i've got lots of logs in here so i apologize but we should see now male male male and then the female at the end by just flipping what we return based on those strings so it's pretty cool and kind of interesting that when we work with strings in this case we don't even really need a reference to b we just care about what each individual item is in terms of the gender property that string and then we can return our one or negative one so that seems to work out pretty well all right i hope you enjoyed that video and you feel like you're getting better at javascript arrays if you're interested in learning more about arrays make sure to check out one of the other videos in the playlist and if you have any additional questions or topics in javascript you'd like to see covered feel free to leave a comment below or check out the link to join the learn build teach discord server and you can ask and share there as well thanks again for watching the video and i'll catch you in the next one

Channel: James Q Quick

Views: 9,973

Keywords: javascript array sort, array sort, javascript arrays, javascript array functions, javascript array methods, web development, vanilla js, js, learn javascript, learn javascript arrays, become a web developer, js arrays in 5 minutes, arrays explained, javascript tutorial for beginners, web development tutorial for beginners, javascript tutorial, web development 2021, array map explained, javascript array practice, web developer, javascript programming

Id: nq0DC5M3Kc8

Length: 7min 12sec (432 seconds)

Published: Thu Jan 07 2021