6.11 Sorting an Array

Back to our number table, in this video, I'm going to change the order of these numbers so that they're not sorted, and then I'll tell you how to sort them. So let's change them to 2, 3, 1 and delete this 1 here, Now, how do we sort this array? You have this method called sort and what it does is it converts each element here to a string and then sorts the elements of the array. So let's take a look, so console. Log de numbers, this is our sorted array of numbers. There is another method, often associated with the sorting method, and that is the reverse method. And with this, we can reverse the order or the elements of an array. So, numbers. reverse let's record it on the console one more time, we have 3, 2, 1. So this sorting method is quite useful. It's very easy to use when you have numbers and strings in an array. But when you have objects like course objects, it doesn't work by default, you have to do some extra work. So, I'm going to delete this code here and define another array. called Courses, here I'm going to add two course objects with ID of 1 and name, say Node. js. And another course object with id2, and for name JavaScript. Now let's assume that you want to sort this array by course name. So JavaScript should come before the Node. js. So look if I call course. out, then we lodge on the console, nothing is going to happen. You can see that Node always comes first. So how can we solve this problem? This sort method eventually takes an argument and it's a function that is used for comparison. When we call the sort method, this method gets two objects in this array, like a and b, and compares them. Now, if they are in the right order, it will move on to the next items, otherwise it will rearrange itself. So here we need to pass a function, as a comparison, this function should take two parameters, we can call them a and b, or first and second, it doesn't really matter, because a and b are pretty self-explanatory here. Now, in this function, if a is less than b, we should return minus 1, if a is greater than b, we should return 1, and if they are equal, we return 0. So, to implement this, you can write like this. If a.name, that's our first class is less than b.name, we return minus 1, Now, the second condition. If a.name is greater than b.name, we return 1, otherwise we return 0. Note that here I don't use an else if, Because if the first condition is true, With this return statement, we will exit this function. So the control will never move to that point. So there's really no need to use the else keyword. So now let's run this code one more time, save the changes, inspect this array, we can see that JavaScript is first. However, if I change this uppercase j to lowercase j and save the changes, let's see what happens. This time Node comes first, so what happens here? Well, every character in a computer is represented internally using a number. Let me show you this in detail. So open Google and search for table ascii. It's asc with two i's. we're going to open this link, so on this table, you can see the numerical representation of each character. So let's look at the lowercase j, its numerical representation is at 106, and n which is used for our course is at 78. We can see that 78 is less than 106, that's why our Node course starting with the capital N came first. Now to solve. this problem, we need to exclude case sensitivity when comparing these names. So we can do something like this, you can declare two constants, say nameA, and set it to A. Name. toUpperCase. So whatever the name of the first course is, we're going to convert it to uppercase, and we're going to do the same with the second course. I'll call the second constant, name,B and set it to b. Name. toUpperCase. Now we have two strings toUpperCase We can compare them. Also consider that we could call here tolowercase instead of touppercase. That's perfectly valid, but what's important is that both of these names have to be in lower case or upper case. Finally, we need to replace the instances of a. name, with name a. So I'm going to select a. name, and I'm going to press Control d. We have this second cursor here, as you can see, now we can delete it and replace it with nameA. Once again, I'm going to replace b.name with name b, save the changes now, our sorting algorithm should work fine. So JavaScript came first. That's it for this video on how to sort an array in JavaScript, we'll see you in a very next video.