por Methods for manipulating elements of a array They are one of the most useful tools for sorting, filtering, transforming and painting multiple elements on the screen at the same time. In this post, we will teach you what it is and how the method works sort in JavaScript, since it is essential if we want to order the elements of a array.
What is the sort method in JavaScript?
The method sort in JavaScript it is one of the global functions of this programming language that allow us to manipulate the elements of a array. More specifically, This method is used to order the elements of a array according to a criterion. This criterion can be defined with the optional use of a callback.
To understand this concept, we invite you to read our posts on what are callbacks in JavaScript and how to use them.
If we decide to use the method sort in JavaScript without the definition of a callback, This will order the elements of the array ascending by default.
const a = [1, 3, 2, 4].sort ( );
// expected result [1, 2, 3, 4]
If we want to use a callback To define the ordering criterion, we must take into account that it will be based on Comparing two values for the JavaScript sort method. These two values will be the elements of the array. That is, the method sort in JavaScript loops through the array comparing one element with the other and, in this way, ordering them. Therefore, the callback You must have two values for the sort in JavaScript.
Next, we show you how to write a callback to create a descending order:
const b = [1, 3, 2, 4].sort((a, b) => ba);
//expected result [4, 3, 2, 1]
Now, if we wanted the elements to be sorted in ascending order through the callbackwould be written as follows:
const c = [1, 3, 2, 4].sort ((a,b) => ab);
// expected result [1, 2, 3, 4]
How does the callback work in the sort method in JavaScript?
He callback is a comparison function that we can optionally insert inside this JavaScript sort method. This function checks if the value to is greater or less than b. Based on this result, it establishes a number that in turn will define the position of the element. Next, we show you what the logic of this function is like.:
function compare (a, b) {
if (a is less than b according to sort order) {
return -1;
}
if (a is greater than b according to sort order) {
return 1;
}
// a must be equal to b
return 0;
}
So this function for the JavaScript sort method could be implemented using arithmetic operators greater than and less thanlike the conditionals if else else.
const array1 = [5, 12, 8, 130, 44];
const sorted = array1.sort (a, b) => {
if (a < b) {
return -1
} else if (a > b) {
return 1
} else {
return 0
}
What this sort function in JavaScript means is that, if we were to draw the values returned for each situation in a straight line, we would draw them in the order: -1, 0, 1. So, This mnemonic helps us understand how the elements of the array. That is, when we want an ascending order:
Yeah to is less than b, It will be placed at the beginning, to the left. Yeah to is greater than b, will be placed to the right. Yeah to and b They are of the same value, so the order does not matter and there is no need to move them.
Now that we have implemented the optional function callback, we can paint on the screen array ordered, which we have kept under the constant sorted of sort in JavaScript:
console.log (sorted)
// result: [5, 8, 12, 44, 130]
If we wanted to create a descending order, it would be enough to exchange the operators greater than and less than in the comparison function. In this way, when to be greater than bwill pass to the left.
Whats Next?
Now that you know how the method works sort in JavaScript, we invite you to continue learning with us about the elements of this and many other programming languages in our Full Stack Web Development Bootcamp, an intensive training in which you will learn everything you need to become an expert in web development in just a few months. Do not miss it!