¿Qué es y Cómo hacer un Array de objetos en Javascript?

¿Qué es un array de objetos?

En JavaScript, un array es una estructura de datos que se utiliza para almacenar una colección de elementos del mismo tipo. Los elementos dentro de un array se organizan en una secuencia ordenada y se acceden mediante un índice numérico. Los arrays en Javascript pueden contener cualquier tipo de dato, incluso otros arrays.

En Javascript un array de objetos es una estructura de datos muy útil que permite almacenar varios objetos en una sola variable, cada uno de estos objetos con sus propios valores y métodos. Esto convierte a esta estructura de datos en una herramienta muy útil y ampliamente utilizada en la programación.

Por ejemplo. Si deseas crear una aplicación de chat que te permite enviar y recibir mensajes, puedes hacer uso de esta estructura de datos para almacenar los diferentes mensajes y los usuarios que están conversando.

1let usersConversation = [
2  {
3    id: 1,
4    user_name: "Paul",
5    send: "02/03/2023",
6    send_by: "alex@email.com",
7    received: "03/03/2023",
8    viewed: true,
9    message: "Hola Paul, ¿Cómo estás?",
10  },
11  {
12    id: 2,
13    user_name: "Alex",
14    send: "03/03/2023",
15    send_by: "paul@email.com",
16    received: "04/03/2023",
17    viewed: false,
18    message: "Hola Alex, muy bien gracias y tú",
19  },
20];

En el ejemplo anterior vemos cómo podemos crear un array de objetos para representar una conversación. En el array se muestra la conversación entre dos personas Paul y Alex, cada uno de los objetos contiene información sobre el mensaje, la propiedad Id te permite identificar cada uno de los mensajes individualmente, la propiedad user_name te permite saber quién es el usuario que recibe el mensaje, la propiedad send indica la fecha en que se envió el mensaje, la propiedad send_by indica el usuario que envió el mensaje, la propiedad received indica la fecha en que se recibió el mensaje, la propiedad viewed indica si ya se leyó el mensaje, y por último la propiedad message que indica el mensaje enviado.

Como vemos en el ejemplo un array de objetos puede ser un estructura de almacenaje muy útil a la hora de guardar información y trabajar con una amplia cantidad de datos. En este caso en particular una conversación entre dos personas puede llegar a tener cientos o hasta miles de mensajes y al almacenarlos en un array de objetos nos permite trabajar con ellos y modificarlos de una forma más sencilla.

Crear un array de objetos

Para crear un array de objetos en Javascript primero necesitas saber como crear un array y un objeto. A continuación veremos una corta explicación sobre cómo se pueden crear estas estructuras en Javascript.

Crear un array

Para crear un array existen dos formas de hacerlo.

Ejemplo:

1let arrayOne = [1, 2, 3, 4, 5];
2let arrayTwo = new Array(1, 2, 3, 4, 5);
3
4
5console.log(arrayOne); // --> [1, 2, 3, 4, 5]
6console.log(arrayTwo); // --> [1, 2, 3, 4, 5]

En este ejemplo vemos como para crear un array en Javascript existen dos formas, la primera es crear una variable y asignarle como valor un par de corchetes []esto creará un array por defecto, la segunda forma es crear una variable y asignarle como valor la palabra reservada de Javascript new Array() esto también creará un array.

Es importante resaltar que ya no se suele utilizar la palabra reservada new Array(), para crear un array es más común hacerlo usando los corchetes [] ya que es más sencillo, fácil de entender y funcionan de la misma manera.

Crear un objéto

Para crear un objeto también existen dos formas de hacer.

Ejemplo:

1const objectOne = { name: "Paul", age: 23 };
2const objectTwo = new Object();
3objectTwo.name = "Alex";
4objectTwo.age = 40;
5
6console.log(objectOne); // --> { name: "Paul", age: 23: }
7console.log(objectTwo); // --> { name: "Alex": age: 40 }

En este ejemplo vemos las dos formas en las que puedes crear un objeto en javascript, la primera es crear una variable y asignarle como valor un par de llaves {} esto creará un objeto por defecto, la segunda forma es crear una variable y asignarle como valor la palabra reservada de Javascript new Object() esto también creará un objeto.

Es importante señalar que la palabra reservada new Object() ya no se suele utilizar para crear un objeto ya que como vimos en el ejemplo anterior es más sencillo, y fácil de entender hacerlo utilizando la sintaxis de llaves.

Crear array de objétos

Ahora veamos cómo crear un array de objetos.

1const newChat = [
2  {
3        id: 105,
4    user_name: "Paul",
5         send: "07/03/2023",
6    send_by: "alex@email.com",
7    received: "07/03/2023",
8    viewed: true,
9    message: "Hola Paul, ¿puedes decirme a que hora es la reunion de hoy?",
10    group_name: "work",
11    group_users: [
12      { id: 1, email: "alex@email.com" },
13      { id: 2, email: "paul@email.com" },
14    ],
15  },
16  {
17    id: 175,
18    user_name: "Alex",
19    send: "07/03/2023",
20    send_by: "paul@email.com",
21    received: "07/03/2023",
22    viewed: true,
23    message: "Hola Alex, claro! la reunion es a la 7:00am.",
24    group_name: "work",
25    group_users: [
26      { id: 1, email: "alex@email.com" },
27      { id: 2, email: "paul@email.com" },
28    ],
29  },
30  {
31    id: 133,
32    user_name: "Paul",
33    send: "07/03/2023",
34    send_by: "alex@email.com",
35    received: "07/03/2023",
36    viewed: true,
37    message: "Okey perfeco, gracias.",
38    group_name: "work",
39    group_users: [
40      { id: 1, email: "alex@email.com" },
41      { id: 2, email: "paul@email.com" },
42    ],
43  },
44];

En este ejemplo podemos ver cómo se creá un array de objetos que representa una conversación entre dos personas donde cada uno de los objetos representa cada mensaje con sus propiedades y valores. Las propiedades en un objeto son el equivalente a variables a las cuales se les puede asignar un valor. Este valor puede ser de cualquier tipo desde un valor numérico, una cadena de texto, un valor booleano o incluso un nuevo array de objetos

Recorrer Array de objetos Javascript

Para recorrer un array de objetos en javascript tenemos varias formas de hacerlo.

Método forEach

El método forEach() es una de las formas usualmente más utilizadas a la hora de recorrer un array en Javascript.

1const array = [
2  { id: 1, name: "exp one" },
3  { id: 2, name: "exp two" },
4  { id: 3, name: "exp three" },
5  { id: 4, name: "exp four" },
6];
7
8array.forEach((item, index) => {
9  // Aquí va tu código
10});

En el ejemplo anterior vemos como el método forEach() te permite recorrer un array. Este método recibe una función como parámetro, esta función recibe dos parámetros generalmente llamados ítem e index. Es importante resaltar que estos parámetros puede llamarse de cualquier forma no tienen que tener estos nombres. El parámetro ítem representa el objeto dentro del array y el parámetro index representa una variable que aumenta de valor en cada iteración lo cual puede ser muy útil en algunos casos.

For loop

Otra forma de recorrer un array es haciendo uso de un for loop.

1const array = [
2  { id: 2, name: "exp one" },
3  { id: 1, name: "exp two" },
4  { id: 4, name: "exp three" },
5  { id: 3, name: "exp three" },
6];
7
8for (let i = 0; i < array.length; i++) {
9  // Aquí va tu código
10}

El for loop necesita varios parámetros, el primero es la variable de control usualmente llamada i, luego necesita una condición de salida, en este caso que la variable i sea menor que la longitud del array, y por último recibe el parámetro que aumenta de valor a la variable de control i, luego dentro de la llaves {} puedes escribir el código que deseas realizar en cada iteración como se muestra en el ejemplo anterior.

El for loop es una estructura de código muy útil y ampliamente utilizada que te permite recorrer arrays de una forma muy eficiente.

Ordenar array de objetos

Existen diferentes formas para ordenar un array de objetos en Javascript.

Método sort

1const arrayExample = [
2  { id: 2, name: "example one" },
3  { id: 1, name: "example two" },
4  { id: 4, name: "example three" },
5  { id: 3, name: "example three" },
6];
7
8const arrayOrdered = arrayExample.sort((a, b) => a.id - b.id);

En este ejemplo vemos una de las formas más utilizadas para ordenar un array de objetos que es haciendo uso del método sort() de javascript. Para ordenar un array de objetos este método recibe un función de comparación como parámetro. Esta función recibe dos parámetros usualmente llamados a y b estos parámetros representan los elementos que serán comparados. La función de comparación debe retornar un valor negativo en el caso de que a tenga que aparecer antes que b, en el caso de que b tenga que aparecer antes que a esta función debe retornar un valor positivo, y si los dos elementos son iguales entonces debe retornar cero.

En el ejemplo vemos como para ordenar el array accedemos al objeto en la propiedad Id para ordenarlo de forma numérica ascendente.

Algoritmo Bubble sort

Otra forma de ordenar un array de objetos es haciendo uso del algoritmo de ordenamiento conocido como Bubble Sort.

Ejemplo:

1const arrayExample = [
2  { id: 2, name: "example two" },
3  { id: 1, name: "example one" },
4  { id: 4, name: "example four" },
5  { id: 3, name: "example three" },
6];
7
8
9function sortArray(arr) {
10  for (let i = 0; i < arr.length; i++) {
11    for (let j = 0; j < arr.length - i - 1; j++) {
12      console.log("i", i);
13      console.log("j", j);
14      if (arr[j].id > arr[j + 1].id) {
15        const aux = arr[j];
16        arr[j] = arr[j + 1];
17        arr[j + 1] = aux;
18      }
19    }
20  }
21  return arr;
22}
23
24const arrayOrdered = sortArray(arrayExample);
25console.log(arrayOrdered);

En este ejemplo creamos una función y le pasamos el array que queremos ordenar, en la función iteramos el array dos veces haciendo uso de un for loop, en cada iteración pregunta si el valor actual es mayor que el siguiente, de ser así realiza el intercambio. Esta una de las sintaxis más comunes para crear un Bubble sort pero hay varias formas de hacerlo, esta función retorna el array ordenado que se guarda en la constante arrayOrdered.

El algoritmo Bubble sort compara cada par de elementos, en el caso de que los elementos estén en el orden incorrecto hace el intercambio de lo contrario el algoritmo los deja como estaban. Este proceso se repite varias veces hasta que se recorre el array por completo y todos los elementos están bien ordenados.

Algoritmo Quick Sort

Otro algoritmo que puedes usar para ordenar un array de objetos en javascript es el algoritmo Quick Sort

Ejemplo:

1const arrayExample = [
2  { id: 2, name: "example two" },
3  { id: 1, name: "example one" },
4  { id: 4, name: "example four" },
5  { id: 3, name: "example three" },
6];
7
8
9const quickSort = (array) => {
10  if (array.length <= 1) return array;
11
12  const left = [];
13  const right = [];
14
15  const firstValue = array.shift();
16
17  array.forEach((element) => {
18    if (element.id < firstValue.id) {
19      left.push(element);
20    } else if (element.id >= firstValue.id) {
21      right.push(element);
22    }
23  });
24
25  return [...quickSort(left), firstValue, ...quickSort(right)];
26};
27
28const arrayOrded = quickSort(arrayExample);

Este algoritmo ordena los array de una forma muy interesante, Para ordenar un array lo que hace el Quick sort es hacer uso de la técnica divide y conquista. Primero selecciona un valor del array, luego divide el array en dos sub-arrays: uno con los elementos mayores que el valor seleccionado y otro con los elementos menores que este. Luego, aplica recursivamente el mismo proceso a cada sub-array hasta que todos los elementos estén ordenados.

El algoritmo the Quick sort es un algoritmo que te permite ordenar un array de una forma más eficiente que el Bubble sort en la mayoría de los casos. ya que el algoritmo Bubble sort tiene un complejidad de tiempo de O(n^2) lo que significa que el tiempo de ejecución aumenta proporcionalmente al cuadrado del tamaño del array. Por otro lado, el algoritmo Quick sort tiene una complejidad de tiempo de O(n log n), lo que significa que el tiempo de ejecución aumenta proporcionalmente al del tamaño del array. Sin embargo hay casos en los que el Bubble sort puede ser más eficiente, especialmente en arrays pequeños.

En resumen un array de objetos es una estructura de datos muy útil que te permite almacenar y manipular una amplia cantidad de datos complejos en tu código. Con un array de objetos puedes acceder a cada elemento individualmente, iterar el array, filtrar cada uno los datos y muchas otras cosas más. Es importante resaltar que existen más formas de manipular un array de objetos que las mencionadas en este artículo. Puedes encontrar más información sobre este tema en la página oficial de javascript . Puedes leer sobre este tema y mucho mas en el blog de 4Geeks.