En Javascript existe un mecanismo de ordenación de arrays muy potente y totalmente personalizable. Usa un método llamado sort(), disponible en los arrays, que recibe una función que implementa la lógica de ordenación de los elementos.

Es un método muy potente, ya que mediante él podemos realizar todo tipo de órdenes, clásicos como el alfabético, mayor a menor, menor a mayor, pero también cualquier orden arbitrario sobre elementos de cualquier tipo.

En este artículo vamos a aprender a usar el método sort() para ordenar los arrays con varios ejemplos prácticos que te aclararán cualquier posible duda.

Método sort de los arrays

El método sort() está disponible en los arrays a partir de ECMAScript 5, es decir, está disponible en absolutamente todos los navegadores, incluso los viejunos Internet Explorer. Por lo tanto lo puedes usar con total confianza.

Básicamente es un método que recibe una función callback y ejecuta esa función con todos los elementos del array, un número indeterminado de veces, con combinaciones entre ellos, de modo que pueda ponderar el orden, hasta que queden ordenados completamente sus elementos.

Esa función callback que se ejecuta es invocada con dos parámetros, que toman los valores de los elementos que se están comparando en cada ocasión.

miarray.sort( function(a, b) {
 // Hacer lo que se necesite para comparar "a" y "b" y devolver el resultado de la comparación
});

Esos parámetros se tienen que comparar dentro de la función para saber si uno va delante del otro, o viceversa, o si simplemente son iguales. Esa comparación puede ser totalmente arbitraria, es decir, los puedes comparar por orden natural, pero también por cualquier criterio que necesites. Dependiendo del resultado de esa comparación se deben devolver valores numéricos, atendiendo a estas reglas:

• Si son iguales, devolveremos 0.
• Si "a" debe ir ordenado antes que "b", entonces devolvemos un número menor que 0.
• Si "a" debe ir ordenado después que "b", entonces devolvemos un número mayor que 0.

Es decir, nosotros somos dueños de escoger el criterio de comparación entre los elementos del array. Esos elementos aparecerán antes o después en el array ordenado dependiendo del valor que hemos devuelto al compararlos.

Ejemplo de ordenación ascendente de números

Para entender bien cómo funciona array.sort() lo mejor es verlo con un ejemplo. En este primer caso veremos un ejemplo con un array de elementos numéricos, que deben ordenarse en orden ascendente.

let numbers = [7, 6, 44, 101, 55, 60, 82, 1, 57, 6];
numbers.sort((a, b) => {
  if(a == b) {
    return 0; 
  }
  if(a < b) {
    return -1;
  }
  return 1;
});

Como ves, usamos sort() enviando la función de ordenación.

• Si a y b eran iguales, devolvemos 0.
• Si a es menor que b, devolvemos -1, que es un valor por debajo de cero.
• Al final devolvemos 1, porque querrá decir que no eran ni iguales ni a era menor que b.

Ten en cuenta que una vez se ejecuta el método sort() sobre el array, el propio array es el que cambia de orden. Es decir, después de llamar a esta función, "numbers" habrá cambiando y ahora sus elementos estarán ordenados.

Ordenación descendente de números

Si quisiéramos un orden descendente la lógica sería prácticamente la misma, simplemente cambiando la comparación del segundo if.

numbers.sort((a, b) => {
  if(a == b) {
    return 0; 
  }
  if(a > b) {
    return -1;
  }
  return 1;
});

Ahora hemos dicho que, si a es mayor que b, entonces devolvemos -1, por lo que pondrá a a después de b.

Ejemplo de orden alfabético de un array Javascript

Ahora vamos a ver cómo se ordenaría por orden alfabético. Prácticamente es el mismo ejemplo que el de ordenación de números, como puedes ver en el código.

let words = ["hola", "adiós", "gusta", "quiero", "ordenar", "arrays"];
words.sort((a, b) => {
  if (a == b) {
    return 0;
  }
  if (a < b) {
    return -1;
  }
  return 1;
});

Podríamos ejecutar luego un console.log() para ver el contenido del array words una vez ordenado.

console.log(words);

Orden sin tener en cuenta mayúsculas y minúsculas en los elementos del array

Ten en cuenta que al hacer comparaciones en cadenas no es lo mismo que estén en mayúsculas o minúsculas. El orden hace que primero se colocasen todas las palabras en mayúsculas y luego las que están en minúsculas, por lo que, si quieres que el orden no tenga en cuenta si están en mayúsculas o minúsculas, tendrás que hacer un paso extra.

El paso extra consiste en convertir la palabra a todo en minúsculas, o mayúsculas, para luego hacer las comparaciones. El código podría ser como este:

let wordsUppercased = ["hola", "Adiós", "gusta", "Quiero", "ordenar", "arrays"];
wordsUppercased.sort((a, b) => {
  a = a.toLowerCase();
  b = b.toLowerCase();
  if (a == b) {
    return 0;
  }
  if (a < b) {
    return -1;
  }
  return 1;
});
console.log(wordsUppercased);

Ordenes totalmente arbitrarios con sort()

Ten en cuenta que las comparaciones de orden pueden ser totalmente arbitrarias, es decir, eres dueño y señor de cómo se van a comparar. Por ello array.sort() es tremendamente potente, porque podrías conseguir casi cualquier tipo de orden.

En este ejemplo me da igual cómo queden ordenados los valores del array. Simplemente quiero que los números que sean igual o superiores a 1000 se pongan delante y los que sean menores que 1000, que aparezcan detrás.

let numbersGreaterThan1000 = [700, 6000, 44, 1031, 55, 60, 8200, 1001, 57, 6];
numbersGreaterThan1000.sort((a, b) => {
  if (a <= 1000) {
    return 1;
  } 
  return -1;
});
console.log(numbersGreaterThan1000);

Simplemente estoy viendo si el elemento "a" de la comparación es menor que 1000. Entonces ese elemento irá después, por lo que devuelvo 1. En caso devuelvo -1 para que se ponga delante.

Ordenar arrays de objetos por los valores de las propiedades de los objetos

Lo bueno de usar array.sort() es que somos capaces de ordenar elementos de arrays que sean de cualquier tipo, incluso de tipos complejos como podrían ser los objetos.

En este ejemplo vamos a realizar un orden de elementos del array que son objetos de tipo "persona". Cada una de estas personas tiene una edad y un nombre. Nuestro algoritmo quiere conseguir un orden de los elementos en el array que tome en cuenta la edad. Si dos personas tienen la misma edad, entonces los ordenará por orden alfabético de nombres.

let people = [
  {
    name: 'Julia',
    age: 10,
  },
  {
    name: 'Miguel',
    age: 45,
  },
  {
    name: 'Juan',
    age: 24,
  },
  {
    name: 'María',
    age: 60,
  },
  {
    name: 'Alfredo',
    age: 45,
  },
  {
    name: 'Alba',
    age: 10,
  },
];
people.sort( (a, b) => {
  if(a.age < b.age) {
    return -1;
  }
  if(a.age > b.age) {
    return 1;
  }
  if (a.name.toLowerCase() < b.name.toLowerCase()) {
    return -1;
  }
  if (a.name.toLowerCase() > b.name.toLowerCase()) {
    return 1;
  }
  return 0;
});
console.log(people);

Como puedes ver, vamos devolviendo 0, 1 o -1 dependiendo primero de la edad. Si la edad no es ni mayor ni menor (es igual) entonces lo que hacemos es comprar el nombre de las personas.

Con este ejemplo habrás podido comprobar que podemos ordenar cualquier cosa y el algoritmo puede tener en cuenta el criterio que se considere oportuno en cada situación.

Espero que hayas podido aprender bastante y hayan quedado claras todas las posibilidades de ordenación nativa de elementos de arrays en Javascript.

Videotutorial de ordenación de arrays Javascript

Acabamos este artículo con un videotutorial en el que vemos en vivo cómo se realizan estos ejemplos prácticos para ordenar arrays.