Un array es un elemento de JavaScript que nos permite listar distintos valores, normalmente strings. Existen distintas metodologías para hacer que nuestro programa recorra y pinte estos valores de manera automática: el más popular es el bucle for de JavaScript. Sin embargo, puede que a veces queramos hacer más que solo pintar estos valores. Por ello, en este post, te enseñaremos cómo pintar y recorrer un array con propiedades en JavaScript de manera automática.
¿Cómo recorrer un array con propiedades en JavaScript?
Antes de enseñarte cómo recorrer un array con propiedades en JavaScript, te aconsejamos leer nuestro post sobre cómo funciona el bucle for y los bucles for in y for of de este lenguaje de programación. Recuerda que estos bucles son especialmente útiles para recorrer el contenido de un array, pues con ellos podemos pintar todos sus elementos de manera automática.
Tutorial
Para ejemplificar nuestro tutorial, asumamos que estamos creando un proyecto en el que queremos simular los partidos de una liga de fútbol. Ahora, asumamos que tenemos el siguiente array de equipos de este deporte y debemos recorrer array JS de objetos JavaScript:
teams: ['Hoffernheim', 'Lyon', 'Chelsea', 'Barca', 'Madrid', 'Atlético', 'Rayo Vallecano', 'Wolfsburg']
Lo que haremos en este post será intentar recorrer este array de equipos usando el bucle for. Sin embargo, no solo queremos recorrer los distintos strings que lo conforman. Además, queremos hacer que cada string tenga un conjunto de propiedades que se pinten en la pantalla y describan los partidos ganados, perdidos y empatados.
Para ello y para recorrer array JS haremos lo siguiente:
- Insertaremos un bucle for en el que crearemos un objeto con las propiedades que queremos pintar.
- Este objeto se llamará teamObj y estará situado, junto al bucle, dentro de una clase que llamaremos FootballLeague.
Observa que la clase que te mostramos a continuación está escrita con las palabras empezando en mayúsculas, este tipo de nomenclatura se llama UpperCamelCase.
class League
constructor (name, team, config={ }) {
this.name =name;
this.teams = [ ];
for (let team of teams) {
let teamObj = {
name: team,
matchesWon: 0,
matchesDraw: 0,
matchesLost: 0,
}
}Ahora que hemos creado un objeto con las variables que queremos agregar a los strings de nuestro array, podemos agregar este objeto descriptivo al array. ¿Y cómo agregamos un elemento a un array? Pues con el método push.
Entonces, debemos agregar la siguiente línea de código al bucle anterior, justo antes del último cierre de llave para recorrer un array con propiedades en JavaScript:
this.team.push (teamObj)
Esto hará que el bucle no solo recorra todo el array de equipos o recorrer objeto JS, sino que también le agregue a cada equipo las propiedades del objeto teamObj.
Como hemos decidido que el nombre de este bucle sea team, cada string será un nombre. Ahora es el momento de poner este código a prueba con la siguiente ejecución para recorrer un array:
let FootballLeague = new FootballLeague (‘foot’, teams, footballLeagueConfig)
console.log (footballLeague)
Puedes ver el resultado de esta ejecución a continuación para recorrer un array con propiedades en JavaScript. Ten presente que, aunque te lo ejemplificamos con solo los dos primeros equipos, el bucle que hemos creado para recorrer objeto JS, recorrerá todos los equipos de la misma manera:
FootballLeague {
name: 'foot',
teams: [
{name: 'Hoffernheim',
matchesWon: 0,
matchesDraw: 0,
matchesLost: 0,
},
{name: 'Lyon', matchesWon:0, machesDraw:0, matchesLost:0},Desde KeepCoding te aconsejamos, en la medida de lo posible, introducir las unidades de lógica dentro de funciones o métodos para recorrer array de objetos JavaScript. Entonces, cómo hemos creado un bucle que nos permite recorrer el array de teams, lo insertaremos en un método setup, al cual podremos llamar desde cualquier otro objeto en otro momento.
setupTeams (teams) {
this.teams = [ ];
for (let team of teams) {
let teamObj = {
name: team,
matchesWon: 0,
matchesDraw: 0,
matchesLost: 0,
}
this.teams.push (teamObj)
}
}Ahora con este método, podemos introducir la siguiente línea de código a cualquiera de nuestras clases para recorrer el array de teams que hemos creado.
Recuerda que ahora puedes agregar cualquier número de propiedades a este objeto y todas aparecerán en cada elemento de tu array.
this.setupTeams (teams)
Así como antes te hemos recomendado elegir muy bien los atributos de clase de CSS, ahora te recomendamos elegir muy bien los nombres de las clases, funciones y variables de JavaScript. Elegir un buen nombre es la mejor forma de crear un código que tú y tus compañeros puedan entender y modificar. De esta manera, sabemos cómo recorrer array de objetos JavaScript.
Después de leer este post, no solo has aprendido cómo recorrer un array con propiedades en JavaScript, sino que también has dado un paso en tu camino para dominar este lenguaje de programación para la web. Desde KeepCoding, te invitamos a que sigas este recorrido con nosotros gracias a nuestro Desarrollo Web Full Stack Bootcamp. Allí, además de seguir aprendiendo sobre JavaScript, aprenderás a dominar otros lenguajes de programación como CSS y HTML.
