Cómo funciona el método sort en arrays de JavaScript

Estaba ayudando a un amigo a construir una tabla para ordenar datos en TypeScript y se encontró con un comportamiento bastante extraño en el camino. En este artículo vamos a ver qué ocurre en JavaScript cuando usamos el método sort con strings y números.

Ordenar strings

El método sort nos ayuda a ordenar datos. Por ejemplo, supongamos que tenemos una lista de palabras para ordenar alfabéticamente:

const words = [ 'a', 'd','c', 'b']
words.sort()
console.log(words) // ["a", "b", "c", "d"]

¡Excelente, funciona! Ahora agreguemos una "W":

const words = [ 'a', 'd','c', 'b', 'W']
words.sort()
["W", "a", "b", "c", "d"]

Hay algo raro aquí: la "W" mayúscula quedó al inicio. Esto pasa porque el ordenamiento de strings por defecto distingue entre mayúsculas y minúsculas (case-sensitive).

Para resolverlo, debemos pasar una función de comparación al método sort. Dentro de ella, usamos toLowerCase() y localeCompare():

words.sort((a,b) => a.toLowerCase().localeCompare(b.toLowerCase()));
//["a", "b", "c", "d", "W"]

MDN: El orden por defecto es ascendente, basado en convertir los elementos a strings y luego comparar sus secuencias de valores de unidades de código UTF-16.

Puedes leer más sobre el método sort en la documentación de MDN.

¡Perfecto, funciona! Ahora pasemos a los números.

Ordenar números

Tenemos una lista de números que queremos ordenar de forma ascendente usando el método sort:

const loteryNumbers = [ 15, 44, 4, 33, 8]
loteryNumbers.sort()
console.log(loteryNumbers)
// [15, 33, 4, 44, 8]

El método sort no funciona como esperaríamos aquí, porque convierte automáticamente los valores a strings antes de compararlos. Funciona de manera similar a un diccionario, donde "abandon" vendría antes de "abandoned" y "abbey":

abandon			
abandoned		
abbey
abbreviate

Lo resolvemos pasando nuevamente una función de comparación con dos parámetros al método sort, evaluando los valores con la siguiente lógica:

• Si el primer valor es menor que el segundo, retorna un número negativo (-1).
• Si son iguales, retorna 0.
• Si el primer valor es mayor que el segundo, retorna un número positivo (1).

Algo como esto:

 if(a > b) {
    return 1
 }
 if(a === b){
   return 0
 }
 if(a < b) {
   return -1
 }

Podemos usar la versión simplificada con la resta a - b para cubrir todos los casos:

loteryNumbers.sort((a,b) => a - b) // ascendente: [4, 8, 15, 33, 44]
loteryNumbers.sort((a,b) => b - a) // descendente: [44, 33, 15, 8, 4]

¡Listo! Ya tenemos los números ordenados tanto de forma ascendente como descendente.

Resumen

En este artículo vimos cómo funciona el método sort en JavaScript para strings y números. Revisamos cómo ordenar strings alfabéticamente sin que las mayúsculas interfieran, y cómo ordenar números de forma ascendente y descendente utilizando funciones de comparación.