Recorrer un array con propiedades en JavaScript

Autor: | Última modificación: 26 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Un array es un elemento de JavaScript que nos permite enlistar 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.

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:

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, 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, deberemos agregar la siguiente línea de código al bucle anterior, justo antes del último cierre de llave:

this.team.push (teamObj)

Esto hará que el bucle no solo recorra todo el array de equipos, 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:

let FootballLeague = new FootballLeague (‘foot’, teams, footballLeagueConfig)

console.log (footballLeague)

Puedes ver el resultado de esta ejecución a continuación. Ten presente que, aunque te lo ejemplificamos con solo los dos primeros equipos, el bucle que hemos creado 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. 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 de 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 podáis entender y modificar.

¿Cuál es el siguiente paso?

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. ¿A qué esperas para aprovechar esta oportunidad de convertirte en desarrollador web? ¡Inscríbete pronto!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!