sort Array Method | JavaScript Tutorial

the array sort method sorts the elements of an array by manipulating the array the default sort order is ascending it will convert the elements from the array to streams and then it will compare their sequences of utf-16 code unit values now I know this might sound a bit complicated but it's important for us to know especially when we want to sort an array of numbers but for now let's see how the sort method works on strings we have here an array of names and we want to sort them let's say names that sort which will as I said modify the names array and let's console that log the names and here we can see that first we have foreign then even J and Liam okay that's perfect but what happens if you want to sort an array of numbers let's see an example let's change this to numbers let me remove this a bit and here we're going to paste in some random numbers for example 74 1810 584 24 and 105 right now if you're looking at this array of numbers by sorting the array we're expecting that I will be the first element right let's see how it works numbers that sort if you're counseling now the numbers array we get 10 105 18 24 5 whoa what's happening well as I said in the beginning the sword will convert the elements to strings and even though in a numeric sort 5 will come before all of these because it will convert them to strings we get something like 10 and then 105 and 5 like that in strings so it will check for the utf-16 code unit values that's kind of bad right we want to sort them in ascending order the good thing is that we can provide a compare function and we can decide what's the algorithm we want to sort with so let's do that let me remove this like that and I'm going to create a compare function let's call it compare function which takes in two parameters a and B meaning the elements which will be compared the outcome of this function the return of this function will decide which element comes first we have three scenarios let me put it here if the return of this function is less than zero then a will come first this will be the first scenario then the second scenario if the return is zero then nothing will be changed scenario if we have a number bigger than zero then a will come first a comes first and let's do this here becomes first here and then a comes first here now considering this we can simply create a compare function to work properly with numbers by saying return a minus B let's say we compare ten with five then being a and B being five now this will return a positive right so 10 minus 5 is 5 so it's positive meaning that B will come first so these will swap places ok we can get this function and paste it in as a callback for the sorted method let's save it and now we can see that we have the number sorted as we want it which is perfect also the sort method can work even with an array of objects let me paste in an array of objects and we can see how that can work all right I pasted in an array of products which has three objects containing the name of the product and the price what we want to do is to sort this array dependent on the price for example in ascending order let's see what happens if we use the sort method as is product that's sort and let's consider log products you can see on the right that the array remains unchanged but as we did previously we can provide a compare function let's do it in an array function this time we get a and B and we want to do some sort of calculation we can compare the prices of the objects because now for the a and B we have access to the price and we can return simply a that price minus B that price now if we're going to save this you can see that the array changed and now the phone which is the lowest price comes first if you want to do them in descending order you can just say be price minus a dot price save this and now the most expensive one is the first one pretty fun right we can even go ahead and remove the return here because we have an arrow function save this and now the result is the same alright that's it for this tutorial I hope you liked it and I see you in the next one bye [Music]

Channel: Florin Pop

Views: 24,764

Rating: 4.9129381 out of 5

Keywords: javascript, javascript tutorial, javascript tutorial for beginners, array method, javascript arrays, higher order function, learn javascript, javascript array methods, learn map, sort array method, learn sort, sort HOF, sort compare function, sort, sort array

Id: RsFBsBep-hA

Length: 6min 11sec (371 seconds)

Published: Thu Apr 02 2020