Cómo acceder a las propiedades de un arreglo de objetos en JavaScript

Al trabajar con aplicaciones de JavaScript, es común hacerlo con arreglos, arreglos anidados, y con arreglos de objetos. Sin embargo, muchos principiantes no saben cómo acceder a las propiedades de estas estructuras de datos.

En este artículo, vamos a hablar sobre cómo acceder a las propiedades de una variedad de arreglos y ver algunos ejemplos de código.

¿Qué es un arreglo en JavaScript?

Un arreglo es un tipo de estructura de datos de JavaScript que se usa para almacenar una colección de elementos de distintas clases.

Es posible tener un arreglo de cadenas de texto, como este:

const fruits = ["apple", "banana", "mango", "orange"];

O un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

y hasta un arreglo anidado de arreglos como este:

const nestedArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

También es posible tener un arreglo de distintas clases de datos:

const mixedArray = ["apple", 1, "banana", 2, "mango", 3];

Cómo acceder a los elementos de un arreglo en JavaScript:

Para acceder a un elemento de un arreglo, hay que referenciar el nombre del arreglo, seguido del número de índice del elemento que queremos acceder, entre corchetes.

Este es un ejemplo de cómo acceder al primer elemento del arreglo fruits:

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[0]); // apple

Los arreglos siempre comienzan en cero. Esto significa que el primer elemento tiene el índice 0, el segundo tiene el 1 y así los siguientes elementos.

Para acceder al último elemento del arreglo, se puede usar la longitud (length) del arreglo menos 1.

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[fruits.length - 1]); // orange

A veces puede ser confuso cuando se está trabajando con un arreglo anidado de arreglos, pero la sintaxis es la misma que usamos cuando queremos acceder a un elemento de un arreglo anidado. Por ejemplo, si queremos acceder al primer elemento de nestedArray:

const nestedNumberArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(nestedNumberArray[0][0]); // 1

nestedNumberArray[0] apunta a este arreglo:

[1, 2, 3];

Para acceder al primer elemento de este arreglo, hay que usar otro para de corchetes con el número de índice que se quiere acceder:

nestedNumberArray[0][0];

Cómo acceder a las propiedades de un arreglo de objetos en JavaScript

Muchas veces vamos a encontrar arreglos de objetos en JavaScript.

En este ejemplo, dentro del arreglo developers, cada desarrollador tiene las siguientes propiedades: name, age y la propiedad languages que es un arreglo con los lenguajes de programación que conocen.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

Si queremos acceder a la propiedad name del primer desarrollador, usamos la siguiente sintaxis:

console.log(developers[0].name); // John

Aquí estamos usando una combinación de anotación de punto y corchetes para acceder a la primera propiedad del objeto del primer desarrollador en el arreglo developers.

developers[0] es el objeto del primer desarrollador.

{ name: "John", age: 25, languages: ["JavaScript", "Python"] }

Luego usamos la notación de punto (developers[0].name) para acceder a la propiedad name de este objeto.

Cómo encontrar un valor específico de un arreglo de objetos en JavaScript

Para buscar un objeto en particular dentro de un arreglo de objetos, es posible usar el método find. Este método devuelve el primer elemento en el arreglo que cumple con los parámetros de la función. Si ningún elemento los cumple, devuelve undefined.

Este es un ejemplo usando el método find con un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((number) => number > 3); // 4

En el ejemplo anterior, el método find busca entre los números del arreglo y devuelve el primer número mayor a 3. En este caso, find devuelve el número 4.

También podemos usar el mismo razonamiento para encontrar un objeto específico dentro de un arreglo de objetos.

En el siguiente ejemplo, vamos a buscar el objeto con el valor "Kelly" en la propiedad name dentro del arreglo developers.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

developers.find((developer) => developer.name === "Kelly");

En este ejemplo, developer representa cada objeto del arreglo. El método find va a recorrer el arreglo developers y devolver el primer objeto developer que tenga el valor "Kelly" en la propiedad name.

{ name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] }

Conclusión

Espero que este artículo te haya resultado útil para aprender sobre arreglos y cómo acceder a sus propiedades.

Vimos un par de ejemplos de arreglos y también vimos cómo acceder a sus elementos desde arreglos anidados y de un arreglo de objetos.

También aprendimos el método find y cómo usarlo para encontrar un objeto específico dentro de un arreglo de objetos.

Ahora deberías poder entender mejor sobre cómo trabajar con arreglos y objetos en JavaScript.

¡Feliz codificación! 🚀