Cómo ordenar un Array de Objetos alfabéticamente en JavaScript

En el desarrollo de aplicaciones web, a menudo se requiere ordenar objetos almacenados en un arreglo alfabéticamente. En el caso de objetos que contienen datos de texto, se utiliza la propiedad “nombre” o “título” para poder clasificarlos. En este artículo te mostraremos cómo hacerlo utilizando JavaScript.

📋 Aquí podrás encontrar✍

Preparación del ambiente
Ordenando un Array de Objetos
Conclusión
Preguntas frecuentes
Ejemplos de código

Preparación del ambiente

Antes de comenzar, asegurate de tener instalado un entorno de desarrollo JavaScript, como por ejemplo Node.js. También necesitarás un editor de código, como Visual Studio Code para poder trabajar con los archivos y el código.

Ordenando un Array de Objetos

Para ordenar un array de objetos alfabéticamente, lo que debemos hacer es utilizar el método .sort() que nos ofrece JavaScript. Este método recibe una función de comparación, la cual determina cómo se ordenarán los objetos.

Para poder comparar los objetos y ordenarlos según una propiedad específica, es necesario pasar esa propiedad a la función como argumento. En nuestro ejemplo, utilizaremos un array de objetos que contiene nombres y apellidos de personas.


const personas = [
  { nombre: "Andrea", apellido: "González" },
  { nombre: "Santiago", apellido: "Díaz" },
  { nombre: "Laura", apellido: "González" },
  { nombre: "Juan", apellido: "Pérez" }
];

Para ordenar este arreglo alfabéticamente por el nombre de las personas, podemos utilizar el siguiente código:


function comparar(a, b) {
  const nombreA = a.nombre.toUpperCase();
  const nombreB = b.nombre.toUpperCase();

  let comparacion = 0;
  if (nombreA > nombreB) {
    comparacion = 1;
  } else if (nombreA < nombreB) {
    comparacion = -1;
  }
  return comparacion;
}

personas.sort(comparar);

En el código anterior, la función comparar toma dos parámetros, que representan dos elementos a comparar. La función compara el valor de la propiedad nombre de cada objeto y devuelve un número positivo, negativo o cero.
Luego, utilizamos el método sort en el array de personas para ordenarlos según los valores de la propiedad “nombre”.

Conclusión

Ordenar un array de objetos alfabéticamente en JavaScript es una tarea frecuente en el desarrollo de aplicaciones web. Utilizando el método sort() y una función de comparación podemos ordenar nuestros objetos según la propiedad deseada. Recorda que debes siempre verificar si las propiedades en las que deseas hacer la comparación son sensibles a mayúsculas o minúsculas.

Preguntas frecuentes

¿Cómo puedo ordenar el array de objetos en orden descendente?

Para ordenar un array de objetos en orden descendente, simplemente cambia la posición de los parámetros dentro de la función comparar.


function comparar(a, b) {
  const nombreA = a.nombre.toUpperCase();
  const nombreB = b.nombre.toUpperCase();

  let comparacion = 0;
  if (nombreA < nombreB) {
    comparacion = 1;
  } else if (nombreA > nombreB) {
    comparacion = -1;
  }
  return comparacion;
}

¿Se pueden ordenar otros tipos de datos además de objetos que contienen texto?

Sí, es posible ordenar otros tipos de datos como números, fechas, etc. En el caso de los números, simplemente se debe modificar la función de comparación para que compare los valores numéricos. En el caso de las fechas, se debe convertir la fecha a un objeto Date de JavaScript antes de poder compararla.

¿Qué pasa si una propiedad del objeto está vacía?

En ese caso, la función de comparación comparará una cadena vacía con otra cadena y devolverá un resultado incorrecto. Para evitar este problema, podés verificar antes si la propiedad tiene un valor asignado y en caso contrario, asignarle un valor predeterminado para evitar errores en la comparación.

¿Dónde puedo ver más ejemplos de código de JavaScript?

Existen numerosos recursos en línea para aprender y practicar el lenguaje JavaScript. Algunos ejemplos son MDN Web Docs, W3Schools y Codecademy. En estos sitios podrás encontrar ejemplos de código, tutoriales y cuestionarios para mejorar tus habilidades en JavaScript.

Ejemplos de código

Utilizando la misma lista de personas que utilizamos anteriormente, podemos mostrar ahora cómo imprimir la lista ordenada en una lista HTML.


const listaOrdenada = document.createElement("ol");
document.body.appendChild(listaOrdenada);

personas.forEach(persona => {
  const li = document.createElement("li");
  li.textContent = persona.nombre + " " + persona.apellido;
  listaOrdenada.appendChild(li);
});

En este ejemplo, creamos una lista ordenada HTML y usamos la función map() para recorrer el array personas y crear un elemento li para cada persona en la lista. Luego, agregamos el elemento li a la lista ordenada usando el método appendChild().