DEV Community 👩‍💻👨‍💻

Cover image for Ordenamiento de arreglos unidimensionales de strings con JavaScript
Cristian Fernando
Cristian Fernando

Posted on • Updated on

Ordenamiento de arreglos unidimensionales de strings con JavaScript

Existen métodos nativos muy útiles en las diferentes especificaciones de JavaScript, uno de ellos es el método sort() perteneciente a ES1.

sort() es un método que se aplica a vectores. Nos permite ordenar un array unidimensional de strings (por orden alfabético), aunque con alguna lógica extra se puede usar para ordenar arrays numéricos.

Sintaxis básica

array.sort(funciónDeComparación);
Enter fullscreen mode Exit fullscreen mode

Donde:

  • array es el nombre del arreglo el cual se desea ordenar.
  • sort() es el método como tal.
  • funciónDeComparación es una función parámetro opcional que se usa para ordenamientos un tanto más complejos.

Características importantes

Se debe tener en cuenta los siguientes puntos:

  • sort() por defecto ordena arrays de strings en orden alfabético de manera ascendente.
  • sort() modifica el array original , por lo que para mantener la inmutabilidad del array será necesario hacer una copia del mismo antes de aplicar el método.
  • Resultados inesperados con letras acentuadas.
  • Resultados inesperados con mayúsculas y minúsculas (por ejemplo: Ana != ana)

Ordenar un array ascendientemente (de la A a la Z)

Supongamos que tenemos un array de nombres como el siguiente:

let nombres = ["Carlos", "Juan", "Ana", "Gabriela", "Pedro"];
Enter fullscreen mode Exit fullscreen mode

Para ordenarlo de manera ascendiente bastaría con hacer lo siguiente:

let orderArrayStringsAsc = array => array.sort();
console.log(orderArrayStringsAsc(nombres));
//salida: ["Ana", "Carlos", "Gabriela", "Juan", "Pedro"]
Enter fullscreen mode Exit fullscreen mode

Ordenar un array descendientemente (de la Z a la A)

Para ordenar el array de nombres anterior bastará con encadenar reverse() a sort() de la siguiente manera:

let orderArrayStringsDesc = array => array.sort().reverse();
console.log(orderArrayStringsDesc(nombres));
//salida: ["Pedro", "Juan", "Gabriela", "Carlos", "Ana"]
Enter fullscreen mode Exit fullscreen mode

Resultados Inesperados ⚠️

sort() y Case Sensitive

Imaginemos que ahora tenemos un array de países como el siguiente:

let paises = ["bolivia", "Argentina", "Portugal", "España", "Francia"];
Enter fullscreen mode Exit fullscreen mode

Aplicando el método sort() de manera ascendente esperaríamos una salida como la siguiente:

["Argentina", "bolivia", "España", "Francia", "Portugal"];
Enter fullscreen mode Exit fullscreen mode

¡Pero vaya sorpresa! La consola nos retorna la siguiente salida:

["Argentina", "España", "Francia", "Portugal", "bolivia"];
Enter fullscreen mode Exit fullscreen mode

wft

¿Qué paso acá? Esto puede ser algo desconcertante al principio pero en realidad es muy sencillo de explicar.
sort() ordena sus elementos en base al código ASCII de la primera letra de sus items, por ejemplo, el primer elemento de nuestro array de países es 'Argentina', entonces se toma su primera letra y se convierte a ASCII, por tanto, tendríamos A = 65, bajo esta lógica tenemos la siguiente tabla:

Items Primera letra de cada item Código ASCII
bolivia b 98
Argentina A 65
Portugal P 80
España E 69
Francia F 70

Puedes consultar una tabla completa de código ASCII acá.

Por ende, el equivalente en código ASCII de nuestro array de países se vería de la siguiente manera:

let paises = ["bolivia", "Argentina", "Portugal", "España", "Francia"];
let paisesASCII = [98,65,80,69,70];
Enter fullscreen mode Exit fullscreen mode

Aplicando sort() al array paisesASCII comprendemos por qué sucede este extraño comportamiento, las letras minúsculas en ASCII tienen valores numéricos más altos, por ello, al intentar ordenar el array países bolivia se sitúa hasta el final.

¿Cómo solucionamos este pequeño inconveniente? La clave está en el parámetro opcional de sort() 😎

sort() recibe una función que, a su vez, recibe 2 parámetros (a y b)
El método se encargará de comparar ambos valores y debe:

  • Devolver un valor positivo (1) si el primer valor es superior al segundo
  • Devolver un valor negativo (-1) si el primer valor es inferior al segundo
  • Devolver un valor cero (0) si los dos valores son iguales o equivalentes para la ordenación.

El ejemplo se corregido se vería de la siguiente manera:

let paises = ["bolivia", "Argentina", "Portugal", "España", "Francia"];

let orderArrayStringsAsc = array => array.sort((a, b) =>
  a.toLowerCase() > b.toLowerCase() ? 1 :
  a.toLowerCase() < b.toLowerCase() ? -1:
  0);
console.log(orderArrayStringsAsc(paises));
//salida: ["Argentina", "bolivia", "España", "Francia", "Portugal"]
Enter fullscreen mode Exit fullscreen mode

sort() vs tildes

Resultados inesperados se obtendrán al intentar ordenar arrays cuyos elementos empiecen por tildes, una solución extremadamente simple y funcional es usar el método localeCompare() perteneciente a la especificación ES1 de javascript.
A grandes rasgos, localeCompare() funciona de manera muy similar a la función parámetro opcional de sort() tomando en cuenta cualquier símbolo especial (como acentos ´ o diéresis ¨)
En el siguiente ejemplo se puede observar mejor el funcionamiento de sort() combinado con localeCompare():

let prefesiones = ["Ingeniero", "Cantante", "Doctor", "árbitro", "Policia"];

let orderArrayStringsAsc = array => array.sort((a, b) => a.localeCompare(b))
console.log(orderArrayStringsAsc(prefesiones));
//salida: ["árbitro", "Cantante", "Doctor", "Ingeniero", "Policia"]
Enter fullscreen mode Exit fullscreen mode

Referencias 🔗


Conclusiones ✔️

Después de comprender un poco mejor el funcionamiento de sort() en javascript se pueden llegar a las siguientes conclusiones:

  • sort() se aplica a arrays unidimensionales o vectores.
  • Recibe una función parámetro opcional muy útil para ordenamientos más precisos.
  • Por defecto ordena arrays de strings en orden alfabético de manera ascendente.
  • Modifica el array original por lo que carece de inmutabilidad de datos.
  • Es case sensitive con los items de los arreglos.

Para finalizar, me parece menester recalcar la importancia de comprender el funcionamiento interno de este método como de cualquier otro, considero obligación del desarrollador preguntarse siempre el funcionamiento de las cosas evitando usarlas sin antes tratar de entenderlas.

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post