Ordenar un arreglo de objetos por propiedad en JavaScript

Jordi Ayala - Dec 12 '22 - - Dev Community

Ordenar un arreglo de objetos a partir de una propiedad en JavaScript es una tarea muy común y relativamente sencilla. En este artículo veremos cómo hacerlo.

¿Por qué ordenar un arreglo de objetos?

En muchas ocasiones necesitamos ordenar un arreglo de objetos a partir de una propiedad. Por ejemplo, si tenemos un arreglo de usuarios y queremos ordenarlos por nombre, o si tenemos un arreglo de productos y queremos ordenarlos por precio.

Definición del arreglo de objetos

Durante este artículo vamos a trabajar con el siguiente arreglo de objetos:

let computadoras = [
  {id: 102, marca: "HP", modelo: "Pavilion", precio: 40000, stock: 5},
  {id: 105, marca: "Asus", modelo: "VivoBook", precio: 50000, stock: 7},
  {id: 101, marca: "Dell", modelo: "Inspiron", precio: 30000, stock: 10},
  {id: 103, marca: "Lenovo", modelo: "Ideapad", precio: 35000, stock: 8},
  {id: 106, marca: "Acer", modelo: "Aspire", precio: 45000, stock: 6},
  {id: 104, marca: "Apple", modelo: "Macbook", precio: 120000, stock: 3},
];
Enter fullscreen mode Exit fullscreen mode

Al hacer un console.table(computadoras); obtenemos un arreglo de objetos tal y como se define, y sin ordenar:

Image description

Ordenar un arreglo de objetos por propiedad

Para ordenar un arreglo de objetos por propiedad, podemos usar el método sort() de JavaScript. Este método recibe como parámetro una función que recibe dos parámetros, a y b, que representan cada uno de los elementos del arreglo.

Por ejemplo, si tenemos el arreglo [3, 1, 2] y utilizamos el método sort() con la función (a, b) => a - b, el resultado será [1, 2, 3]. Si utilizamos la función (a, b) => b - a, el resultado será [3, 2, 1].

Para ordenar nuestro arreglo de objetos por precio, podemos usar la función (a, b) => a.precio - b.precio, considerando un orden ascendente. Si queremos un orden descendente, podemos usar la función (a, b) => b.precio - a.precio.

computadoras.sort((a, b) => a.precio - b.precio);

computadoras.sort((a, b) => b.precio - a.precio);
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Para ordenar nuestro arreglo de objetos por marca, podemos usar la función (a, b) => a.marca.localeCompare(b.marca), considerando un orden ascendente. Si queremos un orden descendente, podemos usar la función (a, b) => b.marca.localeCompare(a.marca).

computadoras.sort((a, b) => a.marca.localeCompare(b.marca));

computadoras.sort((a, b) => b.marca.localeCompare(a.marca));
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

De esta manera ya hemos ordenado un arreglo de objetos por distintas propiedades, tanto numéricas como alfabéticas, y de forma ascendente y descendente.

En conclusión el método sort() de JavaScript nos permite ordenar un arreglo de objetos por propiedad de forma muy sencilla, incluso evitando el uso de bucles y condicionales.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .