Shortcut para ordenar un array en JavaScript

Autor: | Última modificación: 1 de marzo de 2023 | Tiempo de Lectura: 4 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

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 la función 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 JS es una de las funciones que tenemos disponibles para manipular los elementos de un array y ordenar un array JavaScript. 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. Para conocer más sobre esta función, te invitamos a leer nuestro post sobre el método sort en JavaScript o ir a la página oficial de la MDN.

Para ejemplificar lo que hace este método, imagina que tenemos el siguiente array, que enlista dos objetos con tres propiedades: name, modules y slack.

const arr = [

{

name: ‘Jordi’,

modules: [‘Intro JS’, fronted 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.

Además de definir el criterio que queremos utilizar para nuestra técnica para ordenar un array JavaScript, debemos determinar en qué orden queremos ordenarlos: de manera ascendente o descendente. Para ello, utilizamos los operadores aritméticos mayor que y menor que junto a los valores de retorno -1, 0 y 1.

En nuestro caso, queremos que el orden sea según la longitud de nombre de manera ascendente. Entonces, definimos que si a es menor que b, pasamos su posición un paso a la izquierda para ordenar array. Lo opuesto sucede cuando a es mayor que b, y si el resultado es exactamente el mismo, la posición se mantiene. A continuación, te mostramos cómo se escriben estas líneas de código:

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)

Ahora, supongamos que queremos ordenar un array JavaScript y los objetos de nuestro arreglo ‘arr’ según el número de elementos en su propiedad modules de manera descendente. Entonces, podemos acceder a la propiedad length del array ‘modules’. Sin embargo, para hacer que este criterio se ordene de manera descendente, debemos intercambiar los operadores aritméticos mayor que y menor que en la función. Esto hará que su efecto sea diferente para ordenar un objeto JavaScript.

const sortedArr2 = arr.sort (a, b) => {

if (a.modules.length > b.modules.length) {

return – 1

} else if { a.name.length < b.name.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 y ordenar array, podemos jugar con un shortcut para simplificar las líneas de código que nos permiten ejecutarlo. El shortcut para ordenar un array en JavaScript se basa en ejecutar directamente una operación sobre los parámetros de ordenación que hemos definido. Esto se puede hacer solo si los parámetros hacen referencia a un valor numérico.

Ahora, piensa en la función que nos ha permitido crear un orden descendente según el criterio de longitud de modules para ordenar un objeto JavaScript.. Para crear este mismo resultado con el shortcut para ordenar un array en JavaScript, debemos hacer la siguiente operación de resta:

const sortedArr2 = arr.sort ((a, b) => b.modules.length – a.modules.length)

En la línea de código anterior, cuando b.modules.length es mayor que a.modules.lenght, el resultado de la resta es positivo. Entonces, cuando el resultado de esta resta es mayor que 1, el método sort moverá el elemento evaluado (a) hacia la derecha. Esto supondrá que, siempre que el elemento a sea menor a b, estará ubicado después en el array y creará un orden descendente.

Lo contrario sucedería si a fuera mayor a b. En este caso, el resultado de la resta sería negativo, por lo que el elemento evaluado se movería a la izquierda. Aunque la acción ejecutada cambia, el orden se mantiene descendente.

Aunque este shortcut para ordenar un array en JavaScript no es tan fácil de entender a la vista como la función de comparación, su regla es la misma. Ambas opciones determinan si la posición del elemento cambia o no y hacia donde, en función de un número -1, 0 o 1. La diferencia es que el shortcut para ordenar un array en JavaScript nos ahorra muchas líneas de código.

¿Cuál es el siguiente paso?

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!

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado