En JavaScript, los bucles nos permiten repetir acciones de manera indefinida y son un elemento fundamental en la creación de proyectos eficientes. En este post, te enseñaremos cómo anidar bucles en JavaScript para controlar todas las variables de una matriz.
¿Qué haremos en este post?
En nuestro post sobre cómo crear un tablero de ajedrez en JavaScript, te enseñamos a usar los bucles para crear secuencias de filas intercaladas. Al leer ese post, incluso puedes aprender a hacer que el número total de filas sea una variable que podemos cambiar. Sin embargo, no hemos establecido cómo pasar de que nuestro tablero sea un vector, es decir, que sea de un solo eje, a que sea una matriz, en donde tenemos dos ejes que controlamos.
Lo que queremos hacer en el post actual es utilizar el eje horizontal de nuestro tablero para modificar el número de columnas de igual manera que el número de filas. Por tanto, en este artículo, usaremos la estrategia de anidar bucles en JavaScript para crear columnas flexibles.
¿Cómo anidar bucles en JavaScript?
En muchas ocasiones, la programación se basa en detectar patrones. En nuestro caso, un tablero de ajedrez tiene un patrón muy claro que podemos ejecutar usando bucles. Entonces, para solucionar nuestro tablero de ajedrez, crearemos una representación basada en el valor B y el valor N. En esta ocasión, en vez de crear filas enteras ya estructuradas, queremos simplificar nuestro tablero a los valores de cada casilla para que ambos ejes sean modificables. Para ello, crearemos un bucle for dentro de otro bucle for.
Anidar bucles en JavaScript o introducir un bucle dentro de otro nos permite darle una segunda dimensión a la función que estamos creando. Crear un tercer bucle nos permitiría tener una matriz multidimensional. Es decir, nos permite modificar los elementos de otro de sus ejes. Entonces, para anidar bucles en JavaScript, podemos empezar por crear el siguiente bucle:
for (let i = 0; i < totalFilas; i++) {
let fila = [ ]
for (let j = 0; j < 8; j++) {
if ( i % 2 === 0) {
fila.push (‘B’)
} else {
fila.push (‘N’);
}
}
console.log (fila.join (‘ ‘)}
}
Lo que hacen las anteriores líneas de código es definir una variable fila que contiene un array vacío. Después de este array, definimos que, si la variable i es par, se le añade el elemento B al array, mientras que si es impar, se le añade el elemento N. La definición de si una variable es par o impar se logra con el operador aritmético de módulo. Esto creará una columna con los valores intercalados hasta que i sea igual a la variable totalFilas. Esta columna se repetirá hasta que j sea igual a 8.
Para hacer que nuestro código no muestre los arrays, hemos usado el método join, que nos permite unir los elementos de una matriz en una sola cadena. Sin embargo, las líneas de código anteriores nos intercalan los valores N y B a nivel de las columnas, pero no a nivel de las filas. Para modificar esto, basta con cambiar la variable que se modula por 2 a la suma entre las dos variables que tenemos. A continuación, te mostramos las líneas de código finales.
for (let i = 0; i < totalFilas; i++) {
let fila = [ ]
for (let j = 0; j < 8; j++) {
if ( (i+j) % 2 === 0) {
fila.push (‘B’)
} else {
fila.push (‘N’);
}
}
console.log (fila.join (‘ ‘)}
}
Ahora, para modificar el número de columnas tenemos varias opciones. Podemos usar la misma variable totalFilas en vez del parámetro j < 8 para crear tableros cuadrados. Si queremos que este valor sea independiente, podemos cambiar su número directamente en el parámetro definido dentro del bucle o crear una variable que se llame totalColumnas e introducirla en lugar del 8.
¿Qué sigue?
Ahora que sabes cómo anidar bucles en JavaScript para crear más dimensiones en un elemento, ¡es el momento de que empieces a crear tus propias líneas de código y pongas a prueba estos conocimientos! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde seguirás aprendiendo sobre distintos lenguajes de programación para crear y desarrollar tus propios proyectos. ¿Qué esperas para unirte? ¡Te esperamos!
