Método sort en JavaScript

Autor: | Última modificación: 10 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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.

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. 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.

A continuación, te mostramos cómo se escribe un callback para crear un orden descendiente:

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:

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. 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 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 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:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!