Recorriendo Arreglos con Ciclos (Versión en Video)

Estamos de regreso con un programa que imprime el arreglo de mis amigos.

Pero hay algo en esto que realmente me molesta.

Cada vez que añado un nuevo amigo a mi arreglo, tengo que añadir un comando "text" aquí abajo.

Digamos que añado a "Winston".

Bueno, no se muestra automáticamente.

Si quiero mostrarlo, tengo que ir aquí y escribir "text(myFriends[3]" , luego cambiar la posición de "y" y entonces vemos a "Winston".

Eso es mucho trabajo.

Yo quisiera que cada vez que añado a alguien a mi arreglo se ejecute el comando "text" automáticamente.

Bueno, ¿recuerdas cuando aprendimos de ciclos?

Usar ciclos es una gran manera de repetir la misma porción de código muchas veces en una fila.

Como si quisiéramos tener un montón de árboles en una fila o un montón de globos.

Bueno, pues los ciclos también son una solución para correr una porción de código para cada elemento de un arreglo.

De hecho, usarás un ciclo casi siempre que uses arreglos. Funcionan muy bien juntos.

Así que para mostrarte lo que quiero decir, usemos un ciclo para desplegar los nombres de mis amigos, en lugar de tener todos estos comandos de texto.

Así que empezaremos con las tres preguntas que siempre nos hacemos cuando queremos usar un ciclo.

Primera, ¿qué es lo que quiero repetir? Bueno, revisemos aquí. ¿Qué es lo que se está repitiendo? El comando "text".

¿Qué es lo que quiero cambiar cada vez? Bueno, déjenme ver qué es diferente. La posición de "y" y el índice, ¿cierto? Así que lo que queremos cambiar es el número de amigo y la posición de "y".

¿Hasta cuándo quiero repetir? Bueno, queremos repetir hasta que no haya más amigos.

Así que ahora sabemos lo que queremos, y podemos hacer el ciclo.

Empezaremos con una variable que será un contador, para llevar un seguimiento de dónde estamos en el ciclo. Así que digamos "var friendNum = 0;"

Vamos a empezar con 0 porque recuerden que 0 es el primer elemento del arrego, no 1.

Luego tenemos nuestro ciclo "while". Así que diremos "while(friendNum < myFriends.lenght)". (Mientras la variable "friendNum" sea menor que "myFriends.lenght").

Así que vamos a comparar el contador actual con el total de elementos del arreglo.

Y es dentro del ciclo, donde usamos el comando "text".

Así que decimos "text(myFriends[" y aquí, en lugar de un número, ponemos la variable "friendNum" porque "friendNum" representa el elemento actual.

Y luego voy a poner esta posición por ahora.

Aquí nos marca un error de ciclo infinito porque en realidad no hemos cambiado nada en "friendNum".

Recuerda, necesitamos incrementar "friendNum" cada vez, de otra manera el ciclo correrá de manera indefinida porque la condición siempre será verdadera.

Veo que algo pasa. Voy a poner comentarios en el código anterior. Para que pueda ver realmente qué está pasando.

Lo que tenemos aquí es que hemos mostrado todos los nombres, pero están unos encima de otros.

Así que tenemos que cambiar la posición de "y".

Digamos "friendNum" multiplicado por 30.

Ok, eso está bien, pero "Sophia" está fuera de la pantalla, y "Sophia" no va a estar muy contenta si se da cuenta de esto.

Así que sumemos 30 a esto. Ahora todos están recorridos en 30.

¡Hermoso! Ahora puedes ver que tenemos un ciclo que despliega nuestro arreglo.

Y eso significa que si añadimos más personas como "OhNoes Guy", o tal vez a "Sal", si lo añado a mi arreglo entonces "Sal" va a ser mi amigo. ¡Impresionante! Ahora él es mi amigo.

Y puedes ver que automáticamente se muestran los amigos nuevos, porque siempre se recorre todo el arreglo.

Así que podemos borrar nuestro código anterior. Ya no lo necesitamos.

Y vamos a recorrer el código y revisar lo que hace.

Comenzamos con "friendNum" igual a cero.

Verificamos si "friendNum" es menor que la longitud actual de arreglo.

Así que sabemos que cero es menor que 6. Eso es verdad.

Entonces vamos aquí dentro y decimos que imprima el elemento "friendNum" del arreglo "myFriends"

Éste será cero, la primera vez.

Y luego será igual a 30 más cero por 30.

Así que despliega "Sophia" en 10 y 30. Es lo que hace.

Y luego "friendNum++". Así que ahora "friendNum" es 1.

Y luego regresa al principio y dice: "Ok, ¿1 es menor que 'myFriends.lenght'? Sí, sí lo es".

Y continúa, continúa y continúa.

Y finalmente llegamos a "Sal". Recuerda que "Sal" es el sexto elemento en el arreglo, pero su índice es 5, porque empezamos en cero.

Entonces, ¿cinco es menor que seis? Sí.

Así que despliega "myFriends" índice 5.

Y luego esto es seis y decimos: "¿seis es menor que seis? No. Es igual.

Entonces esto es falso. Así que nunca desplegará el sexto elemento,

lo cual es bueno porque no hay nada en el índice seis.

Hay un sexto elemento, pero no hay nada en el índice seis.

Eso puede ser realmente confuso, el hecho de que haya un cero y un uno y todo eso, pero podrás manejarlo.

Muy bien, éste es nuestro ciclo.

Ahora, si quieres puedes usar un ciclo "for" si es que prefieres los ciclos "for".

Para usar un ciclo "for", escribiremos "for" y luego, "var friendNum = 0;" y luego tenemos nuestra condición

"friendNum < myFriend.lenght",

y luego escribimos nuestro incremento "friendNum++".

Y luego dentro del ciclo "for" ponemos esta línea de código aquí.

Y sólo cambiaré la "x" para que puedas ver

que hace exactamente lo mismo. Así que tú decides cuál ciclo usar, el punto es que uses un ciclo con tu arreglo, porque eso te hará muy poderoso.