Ordenar un array en Javascript con el método sort

¿Sabes cómo Ordenar un array en Javascript con el método sort?

Un array, también conocido como arreglo en español, es un objeto que nos permite crear un listado de elementos. Este objeto tiene propiedades y métodos a los que podemos acceder para manipular los elementos contenidos dentro. Uno de estos métodos es sort, con la que podemos ordenar los elementos según un criterio específico. En este post, te enseñaremos cómo usar el método sort y un shortcut para ordenar un array en JavaScript.

¿Qué es el método sort?

El método sort en JavaScript es una de las funciones que tenemos disponibles para manipular los elementos de un array y ordenarlos. Al igual que otros métodos, como map y filter, este método nos devuelve un nuevo array, esta vez con los elementos ordenados del modo que queremos. Para definir este orden, el método utiliza una función de comparación.

Ejemplo básico del método sort

Imagina que tenemos el siguiente array, que enlista dos objetos con tres propiedades: name, modules y slack.

//Ordenar un array en Javascript con el método sort
const arr = [
  {
    name: 'Jordi',
    modules: ['Intro JS', 'Frontend PRO', 'Testing JS'],
    slack: '@eljordi'
  },
  {
    name: 'Tony',
    modules: ['Intro HTML/CSS', 'Webcomponents'],
    slack: '@eltony'
  }
];

El método sort de JavaScript nos permitirá ordenar estos dos objetos según las características de sus propiedades. Pensemos primero que queremos ordenarlos según la longitud de su propiedad name. Para ello, deberemos determinar una función de comparación que acceda a la propiedad length de esta variable.

Ordenar por longitud de nombre

//Ordenar un array en Javascript con el método sort
const sortedArr1 = arr.sort((a, b) => {
  if (a.name.length < b.name.length) {
    return -1;
  } else if (a.name.length > b.name.length) {
    return 1;
  } else {
    return 0;
  }
});
console.log(sortedArr1);

Ordenar por número de módulos de manera descendente

Supongamos que queremos ordenar los objetos de nuestro arreglo arr según el número de elementos en su propiedad modules de manera descendente. Para esto, intercambiamos los operadores aritméticos mayor que y menor que en la función de comparación.

//Ordenar un array en Javascript con el método sort
const sortedArr2 = arr.sort((a, b) => {
  if (a.modules.length > b.modules.length) {
    return -1;
  } else if (a.modules.length < b.modules.length) {
    return 1;
  } else {
    return 0;
  }
});
console.log(sortedArr2);

Shortcut para ordenar un array en JavaScript

Ahora que sabes cómo funciona el método sort en JavaScript, podemos jugar con un shortcut para simplificar las líneas de código que nos permiten ejecutarlo. El shortcut se basa en ejecutar directamente una operación sobre los parámetros de ordenación que hemos definido.

Para crear un orden descendente según la longitud de modules, utilizamos la siguiente operación de resta:

//Ordenar un array en Javascript con el método sort
const sortedArr2 = arr.sort((a, b) => b.modules.length - a.modules.length);
console.log(sortedArr2);

Otros tipos de ordenamiento

Ordenar numéricamente

Si tienes un array de números y deseas ordenarlo, puedes hacer lo siguiente:

//Ordenar un array en Javascript con el método sort
const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5]

Ordenar alfabéticamente

Para ordenar cadenas alfabéticamente, puedes usar localeCompare para asegurar que se respeta el orden según el idioma:

//Ordenar un array en Javascript con el método sort
const words = ['banana', 'apple', 'cherry'];
words.sort((a, b) => a.localeCompare(b));
console.log(words); // ['apple', 'banana', 'cherry']

Complejidad y rendimiento

El método sort utiliza una variante del algoritmo QuickSort, lo que le da una complejidad promedio de O(n log n). Sin embargo, en el peor de los casos, puede ser O(n²). Es eficiente para la mayoría de los casos prácticos, pero es importante tener en cuenta el tamaño del array y la complejidad de la función de comparación.

Casos especiales

Es fundamental considerar cómo manejar valores undefined o null en el array, ya que pueden causar comportamientos inesperados:

//Ordenar un array en Javascript con el método sort
const mixed = [3, undefined, 1, null, 4];
mixed.sort((a, b) => (a === null || a === undefined) ? 1 : (b === null || b === undefined) ? -1 : a - b);
console.log(mixed); // [1, 3, 4, null, undefined]

Estabilidad del método sort

JavaScript garantiza la estabilidad del método sort en la mayoría de los navegadores modernos. Esto significa que si dos elementos son iguales según la función de comparación, mantendrán su orden relativo original en el array.

Ordenar un array en JavaScript con el método sort es una habilidad fundamental para cualquier desarrollador. Con el método sort, puedes ordenar elementos de manera eficiente y con gran flexibilidad. Esperamos que esta guía te haya sido útil para entender cómo usar sort y cómo aplicar un shortcut para simplificar tu código.

Ahora que sabes cómo crear un shortcut para ordenar un array en JavaScript, estás cada vez más cerca de dominar este lenguaje de programación. El siguiente paso en tu camino para ser un experto del desarrollo web es aprender más sobre este y otros lenguajes. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar, entre muchas cosas, JavaScript, CSS y HTML. ¡No te lo pierdas y apúntate ya!