Los métodos para manipular elementos de un array son una de las herramientas más útiles para ordenar, filtrar, transformar y pintar en pantalla múltiples elementos a la vez. En este post, te enseñaremos qué es y cómo funciona el método sort en JavaScript, ya que es fundamental si queremos ordenar los elementos de un array.
¿Qué es el método sort en JavaScript?
El método sort en JavaScript es una de las funciones globales de este lenguaje de programación que nos permiten manipular los elementos de un array. De manera más específica, este método sirve para ordenar los elementos de un array según un criterio. Este criterio se puede definir con el uso opcional de un callback.
Para entender este concepto, te invitamos a leer nuestros posts sobre qué son los callbacks en JavaScript y cómo utilizarlos.
Si decidimos utilizar el método sort en JavaScript sin la definición de un callback, este ordenará los elementos del array de manera ascendente por defecto.
//javacript sort
const a = [1, 3, 2, 4].sort ( );
// resultado esperado [1, 2, 3, 4]Si queremos utilizar un callback para definir el criterio de ordenamiento, debemos tener en cuenta que este se basará en la comparación de dos valores para el método sort JavaScript. Estos dos valores serán los elementos del array. Es decir, el método sort en JavaScript recorre el array comparando un elemento con el otro y, de esta forma, los ordena. Por ello, el callback debe tener dos valores para el sort en JavaScript.
A continuación, te mostramos cómo se escribe un callback para crear un orden descendiente:
//javscript sort
const b = [1, 3, 2, 4].sort((a, b) => b-a);
//resultado esperado [4, 3, 2, 1]Ahora, si quisiéramos que los elementos se ordenen de manera ascendiente a través del callback, se escribiría de la siguiente manera:
//js sorts
const c = [1, 3, 2, 4].sort ((a,b) => a-b);
// resultado esperado [1, 2, 3, 4]¿Cómo funciona el callback en el método sort en JavaScript?
El callback es una función de comparación que podemos insertar de manera opcional dentro de este método sort JavaScript. Esta función revisa si el valor a es mayor o menor que b. En función de este resultado, establece un número que a su vez definirá la posición del elemento. A continuación, te mostramos cómo es la lógica de esta función:
function compare (a, b) {
if (a es menor que b según criterio de ordenamiento) {
return -1;
}
if (a es mayor que b según criterio de ordenamiento) {
return 1;
}
// a debe ser igual b
return 0;
}Entonces, esta función para el método sort JavaScript se podría implementar usando los operadores aritméticos mayor a y menor a, al igual que los condicionales 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
}Lo que quiere decir esta función de sort en JavaScript es que, si tuviéramos que dibujar los valores devueltos por cada situación en una línea recta, los pintaríamos en el orden: -1, 0, 1. Entonces, esta regla nemotécnica nos ayuda a entender cómo quedarían los elementos del array. Es decir, cuando queremos un orden ascendente:
- Si a es menor que b, se colocará al principio, hacia la izquierda.
- Si a es mayor que b, se colocará hacia la derecha.
- Si a y b son del mismo valor, entonces no importa el orden y no hace falta moverlos.
Ahora que hemos implementado la función opcional callback, podemos pintar en pantalla el array ordenado, que hemos guardado bajo la constante sorted de sort en JavaScript:
console.log (sorted)
// resultado: [5, 8, 12, 44, 130]Si quisiéramos crear un orden descendiente, bastaría con intercambiar los operadores mayor a y menor a en la función de comparación. De este modo, cuando a sea mayor a b, pasará a la izquierda.
¿Qué sigue?
Ahora que sabes cómo funciona el método sort en JavaScript, te invitamos a seguir aprendiendo con nosotros sobre los elementos de este y muchos otros lenguajes de programación en nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva en la que aprenderás todo lo necesario para convertirte en un experto del desarrollo web en muy pocos meses. ¡No te lo pierdas!
