DEV Community

Cover image for Ordenar un arreglo de objetos por propiedad en JavaScript
Jordi Ayala
Jordi Ayala

Posted on • Edited on • Originally published at asjordi.dev

6 2

Ordenar un arreglo de objetos por propiedad en JavaScript

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.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay