El método sort(): Ordenando un array en JavaScript.

El método sort() en JavaScript es la herramienta ideal para ordenar un array de manera rápida y personalizada. ¿Sabes cómo usarlo y cuáles son sus beneficios? Desde ordenar números hasta personalizar el orden con funciones avanzadas, este método es imprescindible para optimizar tu código. Descubre en este artículo ejemplos prácticos que te ayudarán a dominarlo como un experto. ¡No te lo pierdas!

1. ¿Qué significa ordenar un array en JavaScript?

Ordenar un array en JavaScript significa reorganizar los elementos del array según un criterio específico.

Este criterio puede ser ascendente, descendente, alfabético, numérico, o cualquier otro orden definido por una función de comparación personalizada. La operación se realiza utilizando el método sort() del prototipo de los arrays.

¿Qué es un array? Un array o arreglo en JS es una estructura de datos que almacena una colección ordenada de valores, y en JavaScript es muy común trabajar con ellos para manejar datos dinámicos.

1.1. ¿Por qué ordenar un array?

Ordenar es una operación común para:

1. Clasificar datos:
   • Poner nombres, números o cualquier información en un orden lógico.
2. Preparar datos para búsqueda o análisis:
   • Un array ordenado puede ser más eficiente para ciertas operaciones, como búsqueda binaria.
3. Organizar información para presentación:
   • Mostrar datos de forma comprensible al usuario (por ejemplo, productos de menor a mayor precio).

1.2. ¿Cómo funciona la ordenación en JavaScript?

En JavaScript, se usa el método sort() (punto 2 ampliamos) para realizar la ordenación de los elementos de un array.

El proceso de ordenación implica:

1. Comparar los elementos del array entre sí.
2. Intercambiar sus posiciones según el resultado de la comparación.
3. Repetir el proceso hasta que todos los elementos estén en el orden correcto.

1.3. Ejemplos básicos de ordenación de arrays con sort() en JS:

A continuación dejamos unos ejemplos de ordenación básicos, mas adelante iremos ampliando sobre como se realiza cada uno de ellos:

A- Ordenación alfabética:

const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']Lenguaje del código: JavaScript (javascript)

1. sort() funciona bien aquí porque las cadenas de texto se ordenan en orden lexicográfico (orden alfabético) de manera predeterminada.
2. Resultado: Las palabras se ordenan alfabéticamente.

B- Ordenación de números (problema sin función de comparación):

const numbers = [10, 2, 5];
numbers.sort();
console.log(numbers); // [10, 2, 5]Lenguaje del código: JavaScript (javascript)

1. Sin una función de comparación, sort() convierte los números a cadenas de texto y los ordena lexicográficamente.
2. Esto genera un resultado incorrecto, ya que «10» viene antes que «2» en el orden alfabético de cadenas.
3. Problema: Los números no se ordenan numéricamente.

C- Ordenación de números con función de comparación:

const numbers = [10, 2, 5];
numbers.sort((a, b) => a - b); // Orden ascendente
console.log(numbers); // [2, 5, 10]Lenguaje del código: JavaScript (javascript)

1. Al usar la función de comparación (a, b) => a - b, se compara la diferencia entre dos elementos:
   • Si el resultado es negativo, a va antes que b.
   • Si es positivo, b va antes que a.
   • Si es 0, su posición no cambia.
2. Resultado: Los números se ordenan correctamente en orden ascendente.

Conclusión: Para ordenar números correctamente, siempre usa una función de comparación con sort().

1.4. Beneficios y desafíos de ordenar un array

1.4.1. Beneficios:

• Mejora la estructura y presentación de datos.
• Facilita la búsqueda y análisis en arrays grandes.
• Ordenar es el primer paso para ciertas operaciones avanzadas (como eliminación de duplicados).

1.4.2. Desafíos:

• Tipos de datos mixtos: La conversión a cadenas puede producir resultados inesperados.

const mixed = [3, 'apple', 2, 'banana'];
mixed.sort();
console.log(mixed); // [2, 3, 'apple', 'banana']Lenguaje del código: JavaScript (javascript)

Aquí, el método sort() convierte los elementos a cadenas de texto antes de ordenarlos. Por lo tanto, el array [3, 'apple', 2, 'banana'] se trata como ['3', 'apple', '2', 'banana'] para la ordenación. La conversión a cadenas puede producir resultados inesperados al ordenar un array porque el método sort() en JavaScript, de forma predeterminada, convierte los elementos del array a cadenas de texto y los ordena en orden lexicográfico (alfabético).

• Rendimiento:
  En arrays muy grandes, la operación de ordenación puede ser costosa en términos de tiempo y recursos.
• Definir el criterio de ordenación:
  Es necesario comprender cómo funciona la función de comparación en sort() para implementar ordenaciones más avanzadas.

2. ¿Qué es el método sort()?.

¿Quieres saber como ordenar un array en JS?. Aquí es donde entra en juego el método sort(), el cual es una herramienta integrada en los arrays que permite ordenar sus elementos según:

1. Un ordenamiento predeterminado.
2. Un criterio especificado.

2.1. El ordenamiento predeterminado

El ordenamiento predeterminado del método sort() en JavaScript es lexicográfico (orden alfabético) basado en la conversión de los elementos del array a cadenas de texto. Esto significa que todos los elementos, independientemente de su tipo de dato, se convierten primero a cadenas y luego se ordenan en base al orden de los caracteres Unicode.

2.1.1. Ejemplo de ordenamiento predeterminado:

Con cadenas:

const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']Lenguaje del código: JavaScript (javascript)

1. Las cadenas se ordenan alfabéticamente (según el código Unicode de sus caracteres).

Con números:

const numbers = [10, 2, 5];
numbers.sort();
console.log(numbers); // [10, 2, 5]Lenguaje del código: JavaScript (javascript)

• Aquí los números se tratan como cadenas ("10", "2", "5") y se ordenan según el orden Unicode de esos caracteres, lo que resulta en un orden incorrecto desde una perspectiva numérica.

Con datos mixtos:

const mixed = [3, 'apple', 2, 'banana'];
mixed.sort();
console.log(mixed); // [2, 3, 'apple', 'banana']Lenguaje del código: JavaScript (javascript)

• Los elementos se convierten a cadenas y se ordenan en consecuencia.

2.1.2. Limitaciones del ordenamiento predeterminado:

• No es adecuado para números: Ordena los números como si fueran texto.
• Resultados impredecibles con datos complejos: En arrays con elementos mixtos o no homogéneos, el orden puede no ser intuitivo.

2.2. Criterio específico (función de comparación).

Como dijimos, también podemos establecer una reglas especificas para ordenar un array según el criterio que deseemos, y para ello podemos usar una función de comparación con el método sort().

Por ello, a continuación dejamos una explicación de que es esta función y los diferentes criterios o métodos que podemos usar para ordenar un arreglo según la preferencia.

1. ¿Que es una función de comparación?
2. Orden numérico ascendente:
3. Orden numérico descendente:
4. Orden alfabético personalizado:
5. Ordenación compleja (Objetos):
6. Orden aleatorio:

2.2.1. ¿Que es una función de comparación?

Una función de comparación en JavaScript es una función que defines y pasas como argumento al método sort() para personalizar cómo se ordenan los elementos de un array. Esta función compara dos elementos del array en cada paso del proceso de ordenación y determina su orden relativo.

¿CÓMO FUNCIONA?

La función de comparación recibe dos argumentos (a y b, que representan dos elementos del array) y retorna un valor numérico que indica el orden relativo entre esos elementos:

• Valor negativo (< 0): El elemento a debe colocarse antes que el elemento b.
• Valor positivo (> 0): El elemento b debe colocarse antes que el elemento a.
• Valor cero (0): Los elementos a y b mantienen su posición relativa.

A medida que iremos viendo los diferentes criterios de ordenamiento se ira comprendiendo mejor:

2.2.2. Orden numérico ascendente:

Cuando utilizas el método sort() con una función de comparación que retorna a - b, estás indicando a JavaScript que ordene los elementos numéricamente en orden creciente, es decir, de menor a mayor.

Este enfoque funciona porque el método evalúa la diferencia entre los dos valores:

• Si a - b es cero, los elementos mantienen su posición relativa.
• Si a - b es negativo, significa que a es menor que b, por lo que a debe aparecer antes en el array.
• Si a - b es positivo, significa que a es mayor que b, por lo que b debe aparecer antes en el array.

EJEMPLO de orden numérico ascendente:

const numbers = [10, 2, 5];

// Función de comparación para orden ascendente
numbers.sort((a, b) => a - b);

console.log(numbers); // [2, 5, 10]Lenguaje del código: JavaScript (javascript)

Si prestamos atención, en el orden predeterminado, solo usamos el método sort() sin especificar nada dentro de sus paréntesis. En cambio, ahora usamos una función de comparación dentro de sus paréntesis para lograr el propósito deseado (orden numérico ascendente).

Vamos a explicar paso a paso como funciona esta función para ordenar el array:

• PASO 1: Configuración inicial
  • Array original: [10, 2, 5]
  • Función de comparación: (a, b) => a - b
• PASO 2: Comparaciones y reordenamientos: El motor de JavaScript toma pares de elementos del array y los compara usando la función (a, b) => a - b.
  • Primera comparación:a = 10, b = 2
    • 10 - 2 = 8 (positivo)
    • Resultado: 2 debe ir antes que 10.
    • El array ahora es: [2, 10, 5]
  • Segunda comparación:a = 10, b = 5
    • 10 - 5 = 5 (positivo)
    • Resultado: 5 debe ir antes que 10.
    • El array ahora es: [2, 5, 10]
  • Tercera comparación:a = 2, b = 5
    • 2 - 5 = -3 (negativo)
    • Resultado: 2 ya está en la posición correcta antes que 5.
    • El array permanece: [2, 5, 10]
• PASO 3: Fin del proceso: Una vez que no hay más pares por comparar o reordenar, el array está completamente ordenado:
  • Resultado final: [2, 5, 10]

2.2.3. Orden numérico descendente:

Cuando utilizas una función de comparación que retorna b - a dentro del método sort(), estás indicando a JavaScript que ordene los elementos numéricamente en orden decreciente, es decir, de mayor a menor.

¿Cómo funciona?

• b - a positivo: Si el resultado es positivo, significa que b es mayor que a, y b debe colocarse antes que a.
• b - a negativo: Si el resultado es negativo, significa que a es mayor que b, y a debe colocarse antes que b.
• b - a cero: Si el resultado es cero, significa que ambos elementos son iguales y mantienen su posición relativa.

EJEMPLO de orden numérico descendente:

const numbers = [10, 2, 5, 8, 1];

// Función de comparación para ordenar en orden descendente
numbers.sort((a, b) => b - a);

console.log(numbers); // [10, 8, 5, 2, 1]Lenguaje del código: JavaScript (javascript)

Explicación paso a paso del ejemplo:

Sigue la misma lógica que el punto anterior, solo que ahora de manera inversa

1. Array inicial: [10, 2, 5, 8, 1].
2. Proceso de comparación:
   • sort() toma dos elementos a la vez y evalúa la función de comparación.
   • Por ejemplo:
     • Compara 10 y 2:
       • (2 - 10) = -8 (negativo), lo que indica que 10 debe colocarse antes que 2.
     • Compara 5 y 8:
       • (8 - 5) = 3 (positivo), lo que indica que 8 debe colocarse antes que 5.
     • El proceso se repite con todos los pares de elementos.
3. Resultado final:
   • Una vez que sort() ha completado todas las comparaciones, el array queda ordenado en orden descendente: [10, 8, 5, 2, 1].

Este enfoque es útil cuando necesitas ordenar datos de forma decreciente, como calificaciones, ventas, o cualquier métrica donde el valor más alto tiene prioridad.

2.2.4. Orden alfabético personalizado:

El método localeCompare() (se utiliza para comparar dos cadenas de texto de acuerdo con las reglas de ordenamiento específicas de un idioma o configuración regional (locale)) es una herramienta poderosa en JavaScript para realizar comparaciones alfabéticas personalizadas, ya que tiene en cuenta reglas de ordenación específicas según el idioma y distingue correctamente entre mayúsculas y minúsculas (o no, si lo especificas).

¿Cómo funciona localeCompare()?

• Es un método integrado de las cadenas de texto que compara dos cadenas (str1.localeCompare(str2)) y retorna:
  • Negativo: si str1 (a en la función de comparación) debería ir antes que str2 (b).
  • Positivo: si str1 debería ir después que str2.
  • Cero: si ambas cadenas son iguales.

EJEMPLO: Ordenar un array de cadenas respetando mayúsculas y minúsculas

const words = ['Banana', 'apple', 'Cherry', 'banana', 'Apple'];

// Función de comparación con localeCompare para ordenar alfabéticamente
words.sort((a, b) => a.localeCompare(b));

console.log(words);
// Salida: ['Apple', 'Banana', 'Cherry', 'apple', 'banana']Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

1. Array inicial: ['Banana', 'apple', 'Cherry', 'banana', 'Apple'].
2. Uso de localeCompare:
   • Se llama a localeCompare en cada par de elementos del array:
     • Compara 'Banana' con 'apple':
       • Devuelve negativo porque 'B' (mayúscula) tiene menor valor en el orden lexicográfico que 'a' (minúscula).
     • Compara 'Cherry' con 'banana':
       • Devuelve negativo porque 'C' (mayúscula) tiene menor valor que 'b' (minúscula).
     • Compara 'Apple' con 'Banana':
       • Devuelve negativo porque 'A' (mayúscula) tiene menor valor que 'B' (mayúscula).
   • El proceso continúa hasta que todos los elementos están ordenados.
3. Resultado final:
   • ['Apple', 'Banana', 'Cherry', 'apple', 'banana'].
4. Por qué funciona:
   • El método localeCompare() garantiza un ordenamiento sensible a mayúsculas y minúsculas.
   • Las palabras con mayúscula aparecen antes que las minúsculas porque, en el conjunto Unicode, las letras mayúsculas tienen valores menores.

Personalización adicional:

Puedes ajustar localeCompare() para que ignore diferencias entre mayúsculas y minúsculas o aplique reglas específicas de un idioma usando opciones adicionales. Por ejemplo:

words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));Lenguaje del código: JavaScript (javascript)

En este caso:

• sensitivity: 'base': Ignora diferencias entre mayúsculas y minúsculas.
• El resultado sería: ['apple', 'Apple', 'Banana', 'banana', 'Cherry'].

RESUMEN: El uso de localeCompare() permite un control preciso y flexible al ordenar cadenas de texto, considerando diferencias en mayúsculas/minúsculas, acentos y reglas de idioma. Es especialmente útil para internacionalización o aplicaciones con textos en múltiples lenguajes.

2.2.5. Ordenación compleja (Objetos):

Cuando trabajamos con arrays de objetos en JavaScript, el método sort() se puede usar para ordenar los objetos basándonos en valores específicos de sus propiedades. Esto se logra mediante una función de comparación que extrae y compara los valores de las propiedades relevantes de los objetos.

EJEMPLO: Ordenar objetos por una propiedad numérica

const people = [
  { name: 'John', age: 28 },
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 35 },
];

// Ordenar por edad en orden ascendente
people.sort((a, b) => a.age - b.age);

console.log(people);
/*
Salida:
[
  { name: 'Alice', age: 22 },
  { name: 'John', age: 28 },
  { name: 'Bob', age: 35 }
]
*/Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

1. Estructura inicial:
   • Tienes un array de objetos, cada uno con propiedades como name y age.
2. Función de comparación personalizada:
   • Para comparar los objetos por su propiedad age, defines la función (a, b) => a.age - b.age.
     • Si a.age es menor que b.age, devuelve un número negativo (posición correcta).
     • Si a.age es mayor que b.age, devuelve un número positivo (intercambia posiciones).
     • Si son iguales, devuelve 0.
3. Proceso interno de sort:
   • Compara cada par de objetos y reordena el array según el resultado de la comparación.
4. Resultado final:
   • El array está ordenado en función de la propiedad age de menor a mayor.

EJEMPLO: Ordenar objetos por una propiedad de cadena de texto (alfabéticamente)

const people = [
  { name: 'John', age: 28 },
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 35 },
];

// Ordenar por nombre alfabéticamente
people.sort((a, b) => a.name.localeCompare(b.name));

console.log(people);
/*
Salida:
[
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 35 },
  { name: 'John', age: 28 }
]
*/Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

1. Función de comparación personalizada:
   • Se usa localeCompare() para comparar las propiedades name de los objetos.
     • a.name.localeCompare(b.name) devuelve:
       • Un número negativo si a.name debe ir antes que b.name.
       • Un número positivo si a.name debe ir después.
       • Cero si son iguales.
2. Proceso interno:
   • Ordena los objetos en el array de acuerdo con sus valores name, respetando el orden alfabético.
3. Resultado final:
   • El array está ordenado alfabéticamente según el nombre.

RESUMEN:

• Para propiedades numéricas, utiliza (a.property - b.property) para ordenar en orden ascendente, o (b.property - a.property) para descendente.
• Para propiedades de cadena, usa localeCompare() para respetar el orden alfabético, incluyendo reglas de mayúsculas/minúsculas o internacionalización.
• Este enfoque te da control total sobre cómo ordenar objetos basándote en sus propiedades específicas.

2.2.6. Orden aleatorio:

En JavaScript, el método sort() se puede usar para mezclar los elementos de un array de manera aleatoria. Para ello, se pasa una función de comparación que devuelve valores generados al azar.

EJEMPLO: Ordenar un array aleatoriamente:

const items = [1, 2, 3, 4, 5];

// Ordenar aleatoriamente
items.sort(() => Math.random() - 0.5);

console.log(items);Lenguaje del código: JavaScript (javascript)

1. Array original:
   • items es un array con los números [1, 2, 3, 4, 5].
2. Función de comparación: () => Math.random() - 0.5
   • Math.random() es un método integrado en JavaScript que genera un número pseudoaleatorio entre 0 (incluido) y 1 (excluido).
   • A ese número aleatorio le se le resta 0.5 y hace que el resultado sea un valor en el rango [-0.5, 0.5].
     • Si el resultado es negativo: indica que un elemento debe ir antes que el otro.
     • Si el resultado es positivo: indica que un elemento debe ir después del otro.
     • Si el resultado es cero: los elementos mantienen su posición relativa (aunque esto es poco probable, ya que Math.random() casi nunca será exactamente 0.5).
3. El método sort():
   • sort() utiliza esta función para decidir el orden relativo de los elementos del array.
   • Como el criterio de comparación es aleatorio, el método no sigue una lógica predecible, resultando en una mezcla aleatoria de los elementos del array.
4. Salida:
   El array original items se reorganiza in-place (es decir, se modifica directamente), y su nuevo orden será aleatorio.

Ejemplo de ejecución:

Imagina que Math.random() devuelve los siguientes valores durante las comparaciones:

Comparación	Math.random()	Resultado (Math.random() - 0.5)	Orden relativo
1 vs 2	0.3	-0.2	1 antes que 2
3 vs 4	0.8	0.3	4 antes que 3
5 vs 2	0.1	-0.4	5 antes que 2

El resultado podría ser algo como: [3, 5, 1, 4, 2]. Cada vez que ejecutas el código, el orden puede cambiar.

IMPORTANTE….El uso de Math.random() en sort() no garantiza una mezcla completamente uniforme debido a cómo los algoritmos de ordenación implementan las comparaciones. Para un «shuffle» más uniforme, puedes usar el algoritmo de Fisher-Yates.

Ejemplo de Fisher-Yates

const items = [1, 2, 3, 4, 5];

// Mezclar aleatoriamente
for (let i = items.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [items[i], items[j]] = [items[j], items[i]];
}

console.log(items);Lenguaje del código: JavaScript (javascript)

Este algoritmo es más preciso y garantiza una distribución aleatoria uniforme.

RESUMEN:

El código items.sort(() => Math.random() - 0.5):

• Ordena los elementos del array de manera pseudoaleatoria.
• Es simple, pero no garantiza un verdadero «shuffle» estadísticamente uniforme.
• Para mezclar elementos de manera más confiable, se recomienda el algoritmo de Fisher-Yates.

3. Buenas prácticas en la ordenación de arrays en JavaScript.

3.1. Manejo de mutaciones:

El método sort() modifica el array original en lugar de crear una copia. Esto puede causar problemas si necesitas mantener el array original intacto.

• Consejo: Usa arrays inmutables cuando el orden original sea importante. Puedes hacerlo utilizando métodos como slice() para crear una copia antes de ordenar:

const originalArray = [4, 2, 8, 6];
const sortedArray = [...originalArray].sort((a, b) => a - b); // Orden ascendente
console.log(originalArray); // [4, 2, 8, 6] (sin cambios)
console.log(sortedArray);   // [2, 4, 6, 8]Lenguaje del código: JavaScript (javascript)

• Razón: Esto asegura que otras partes de tu código que dependen del array original no se vean afectadas.

3.2. Pruebas

La ordenación de arrays puede tener reglas complejas, especialmente si estás ordenando datos personalizados (como objetos o cadenas en idiomas específicos). Las pruebas unitarias garantizan que el resultado sea consistente y correcto.

• Qué incluir en las pruebas:
  1. Verifica que los resultados estén ordenados correctamente según el criterio.
  2. Comprueba que no se pierdan o dupliquen elementos.
  3. Asegúrate de que el array original permanece intacto si es necesario.
• Herramientas recomendadas: Frameworks como Jest, Mocha, o QUnit son útiles para escribir pruebas unitarias en JavaScript.

3.3. Limpieza y legibilidad:

Una función de comparación clara y bien documentada mejora la comprensión y el mantenimiento de tu código.

• Recomendaciones:
  1. Nombres descriptivos: Asigna nombres significativos a tus variables y funciones.
  2. Comentarios claros: Explica en los comentarios por qué el criterio de ordenación es relevante, especialmente si es complejo o personalizado.
  3. Funciones auxiliares: Divide criterios de ordenación complejos en funciones más pequeñas.

3.4. Resumen buenas prácticas:

1. Manejo de mutaciones: Usa copias del array si necesitas preservar el original.
2. Pruebas: Verifica que la ordenación funcione correctamente y sin efectos secundarios.
3. Limpieza y legibilidad: Escribe funciones claras, comenta adecuadamente, y utiliza nombres descriptivos para mejorar el mantenimiento del código.

4. Preguntas frecuentes y resumen sobre el método sort() en JS.