Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Clase 15 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Cómo utilizar un bucle "for" en JavaScript?

El "for" es una de las estructuras más fundamentales y poderosas en JavaScript para realizar iteraciones o loops, permitiendo recorrer elementos dentro de una lista o array. Tal vez te preguntes, ¿cómo funciona y por qué es tan valioso? Aquí te lo explicaré de manera sencilla y práctica.

¿Qué es el método "for" y cómo estructurarlo?

El método "for" en JavaScript es una herramienta que nos permite repetir la ejecución de un bloque de código hasta que una condición especificada sea falsa. Consta de tres pasos principales dentro de sus paréntesis:

Inicialización: Se define una variable de control (comúnmente 'i'), asignando un valor inicial. Por ejemplo, let i = 0.
Condición: Evalúa la condición que debe cumplirse para que el loop continúe. Normalmente, se compara la variable de control con una longitud. Un ejemplo es i < lista.length.
Incremento: Modifica la variable de control en cada iteración, generalmente incrementándola en uno (i++).

La estructura básica es la siguiente:

for (let i = 0; i < lista.length; i++) {
  // Código a ejecutar
}

¿Cómo iterar con "for" sobre un array?

Para hacerlo más práctico, haremos un ejemplo. Supongamos que tenemos un array con varios elementos que deseamos imprimir en la consola.

Ejemplo práctico de iteración con "for"

Primero, definimos nuestro array:

let lista = ["eat", "sleep", "code", "repeat"];

Luego, implementamos el loop "for":

for (let i = 0; i < lista.length; i++) {
  console.log(lista[i]);
}

Entendiendo el código

Definición del array: lista contiene cuatro elementos de tipo cadena de texto.
Inicialización y condición del bucle: Comienza desde i = 0 y sigue mientras i < lista.length (4 en este caso).
Iteración: Por cada ciclo, console.log(lista[i]); imprime el elemento actual basado en el índice i.
Incremento: i++ garantiza que el bucle avance al siguiente índice del array.

El resultado al ejecutar este código será:

eat
sleep
code
repeat

¿Qué ocurre dentro del ciclo "for"?

Cada vez que el loop "for" se ejecuta, realiza los siguientes pasos:

Verifica la condición: Si la condición es verdadera, se ejecuta el bloque de código dentro del loop.
Ejecución del código: Imprime el elemento actual del array.
Incremento: Aumenta el valor de i para moverse al siguiente elemento.
Reevaluación: Vuelve a comprobar la condición; si sigue siendo verdadera, repite el ciclo. Si no, se detiene.

Consideraciones y consejos prácticos

Simplicidad e inicialización: Usa nomenclatura consistente, como let i = 0, para mantener claridad.
Evita bucles infinitos: Asegúrate de que la condición eventualmente sea falsa añadiendo un incremento adecuado.
Versatilidad del "for": Aunque hicimos un ejemplo básico con console.log, el "for" puede adaptarse a tareas más complejas transformando o acumulando datos.

¡Ahora es tu turno! La práctica es clave. Intenta implementar un bucle "for" en proyectos simples para afianzar el uso de esta estructura poderosa. Y recuerda, sigue explorando y expandiendo tus habilidades en JavaScript; el aprendizaje constante abre puertas a infinitas posibilidades en el mundo de la programación.

Arnol Daniel Degollado Garrocho

student•

Deiby Alejandro Triana Archila

student•

Muchas gracias!!!!

Jhonathan Galvis Fajardo

student•

Hola... les comparto una forma sencilla de usar el ciclo for!

//forma rapida para iterar los elementos de una lista con FOR (LET I OF LISTA){instruccion} 

animals= ['perro','gato','loro']
for (let i of animals){
    console.log(i)
}
let rango = [0, 1, 2, 3, 4, 45,7];
for (let i of rango) { // para iterar los valores de la lista o variable
    console.log(i);
}

// para iterar un rango con valores dados
for(let i=0; i < 8; i++){
    console.log(i)
}

Eduardo Enrique Morales Martínez

student•

Gracias

Platzi Team

student•

Loop For

El bucle for en JavaScript es una estructura de control que se utiliza para ejecutar un bloque de código repetidamente, generalmente con un contador que se incrementa o decrementa en cada iteración. Es uno de los bucles más comunes y versátiles en la programación.

Sintaxis del Bucle for

La sintaxis básica del bucle for es la siguiente:

for (inicialización; condición; incremento) { // Código a ejecutar en cada iteración }

inicialización: Se ejecuta una sola vez al inicio del bucle y se utiliza para inicializar una o más variables.
condición: Se evalúa antes de cada iteración. Si la condición es true, el bloque de código dentro del bucle se ejecuta. Si es false, el bucle termina.
actualización: Se ejecuta al final de cada iteración. Se utiliza para actualizar la(s) variable(s) de control del bucle.

Ejemplo Básico

for (let i = 0; i < 5; i++) { console.log("El valor de i es " + i); }

En este ejemplo:

La inicialización establece i en 0.
La condición comprueba que i sea menor que 5.
La actualización incrementa i en 1 después de cada iteración.

Iterar sobre un Array

El bucle for se utiliza frecuentemente para iterar sobre los elementos de un array:

let colores = ["rojo", "verde", "azul", "amarillo"];

for (let i = 0; i < colores.length; i++) { console.log(colores[i]); }

Christopher Andrés Guano Valencia

student•

🟡Qué son los operadores de incremento y decremento

Te habrás fijado que el profesor utiliza i++. Pero, ¿qué es eso? El operador de incremento (++) y decremento (--) consiste en aumentar o disminuir una sola unidad a una unidad, respectivamente, de forma más corta.

Estos operadores se pueden utilizar antes y después de una variable.

// Después de una variable
variable++
variable--

// Antes de una variable
++variable
--variable

Sin embargo, si se utiliza antes o después, el comportamiento es diferente:

Si está después, retorna el valor actual y luego aumento o disminuye el valor de la variable
Si está antes, el valor de la variable aumenta o disminuye y luego devuelve el valor actualizado.

Observa los siguientes ejemplos:

let a = 3
let b = 3

console.log(a++) //3
console.log(++a) //4

console.log(a) //4
console.log(b) //4

Es decir, a++ retorna 3 y luego aumenta a 4, mientras que ++b aumenta a 4 y retorna 4. Aunque en ciclos for no hay diferencia, es importante tener en cuenta este detalle.

Carlos Humberto Chavarría Aparicio

student•

Alguien en un momento siente que no entiende nada, al practicar resulta valioso lo de los ejercicios.

Aitor Garcia Ramos

student•

¡¡Hola!! He hecho cuatro ejemplos con el mismo bucle, uno más enrevesado que otro, espero que os sea de ayuda. Os dejo, además, un poco de documentación sobre operadores de asignación y un pequeño resumen:

OPERADORES DE ASIGNACIÓN

Expresiones y operadores - JavaScript | MDN

Las siguientes expresiones significan todas lo mismo:

i = i + 1; // Sumamos 1 a "i"

i++; // Sumamos 1 a "i"

i += 1; // Sumamos 1 a "i"

Bucles FOR

// Bucle for normal:
for (let i = 0; i < 10; i++) {
    console.log(i);
}
console.log('-------------------'); // Separador

// Un poco más complejo, usando un listado
let listado = ['manzana', 'pera', 'uva', 'naranja', 'sandía', 'melón'];
for (let i = 0; i < listado.length; i++) {
    console.log(`${i + 1} - ${listado[i]}`);
}
console.log('-------------------'); // Separador

// Marcha atrás
for (let i = (listado.length - 1); i >= 0; i--) {
    console.log(`${i + 1} - ${listado[i]}`);
}
console.log('-------------------'); // Separador

// Escaklonado de dos en dos
for (let i = 0; i < listado.length; i+=2) {
    console.log(`${i + 1} - ${listado[i]}`);
}

La respuesta se ve como algo así:

Aitor Garcia Ramos

student•

En la versión que va marcha atrás, inicializamos i de la siguiente manera:

let i = (listado.length - 1);

Esto es porque length nos devuelve el número de elementos dentro del listado listado (6), pero las posiciones del listado empiezan a contarse desde 0 ([0, 1, 2, 3, 4, 5]), así que si quisiéramos acceder a la última, accederíamos a la posición 5:

i[5]; // Última posición del listado

Esto sería lo mismo que lo siguiente:

i[listado.length - 1]; // Última posición del listado

Espero que sea de ayuda.

Juan Pablo Avila

student•

por que se escribe i++? y no se escribe i +1? disculpen mi novatez

y tambien porque se escribe [i], creo que falta algo de explicación estos conceptos, no me queda claro en este ejemplo

Sandra Procopio Guzman

student•

Hola :)

i++ es más corto y rápido de escribir que i = i + 1 en un ciclo for esto lo hace más legible y fácil de entender

Arturo Emiliano Sánchez Romero

student•

El [i], indica un elemento de una lista. Siguiendo el ejemplo de la clase, si tu pones list[1], entonces te devolverá el segundo elemento (una lista inicia desde 0 hasta n) que es "sleep".

Eduardo Arturo Quintero Bueno

student•

Quedan más dudas que respuestas, un profesor que no explica los conceptos a medida que los va haciendo, y cómo siempre Platzi se apoya en que otros estudiantes, les expliquen a otros estudiantes sus dudas y no el profesor. Pero si estos estudiantes, son en verdad estudiantes?, no es algo normal que cometan errores al intentar explicar lo que el profesor debería corregir y terminen confundiendo más...

Andrés Soret Chacin

student•

Loops en Programación

Los loops o bucles son estructuras de control que nos permiten iterar sobre elementos de un objeto iterable.
Utilizamos loops para ejecutar repetidamente un bloque de código hasta que se cumpla una condición específica.
Un objeto iterable puede ser una lista, un array, entre otros.

Estructura de un Loop 'for'

La estructura del loop 'for' es una de las más utilizadas en programación.
Permite iterar sobre cada elemento de una lista u otro objeto iterable.
La sintaxis básica de un loop 'for' incluye la palabra reservada for, seguida de paréntesis que contienen tres partes: inicialización, condición e incremento.
La inicialización define una variable que se utilizará para controlar el loop.
La condición se evalúa en cada iteración; si es verdadera, el loop continúa, si es falsa, el loop termina.
El incremento actualiza la variable de control después de cada iteración.

Ejemplo de un Loop 'for'

Supongamos que tenemos una lista de tareas y queremos imprimir cada una de ellas en la consola.
La lista de tareas puede ser representada como un array de strings: ["eat", "sleep", "code", "repeat"].

Código Ejemplo

let tasks = ["eat", "sleep", "code", "repeat"];

for (let i = 0; i < tasks.length; i++) { console.log(tasks[i]); }

Explicación del Código

Declaramos una lista de tareas: tasks.
Iniciamos un loop 'for':
- let i = 0; inicializa la variable de control i a 0.
- i < tasks.length; establece la condición para continuar el loop mientras i sea menor que la longitud de la lista tasks.
- i++ incrementa la variable de control i en 1 después de cada iteración.
Dentro del loop, usamos console.log(tasks[i]); para imprimir el elemento actual de la lista.
La variable i se utiliza como índice para acceder a los elementos de la lista tasks.

Ejecución del Código

La primera iteración imprime tasks[0], que es "eat".
La segunda iteración imprime tasks[1], que es "sleep".
La tercera iteración imprime tasks[2], que es "code".
La cuarta iteración imprime tasks[3], que es "repeat".
Cuando i se incrementa a 4, la condición i < tasks.length ya no se cumple y el loop termina.

Próximos Pasos

Practicar con diferentes tipos de loops y estructuras de control para entender sus aplicaciones y diferencias.
Explorar otros métodos de iteración como while y do-while.
Aplicar loops en proyectos más complejos para consolidar el conocimiento y ver su utilidad en contextos reales.

Mateo Gamboa

student•

juntando lo aprendido hasta el momento me realice este ejercicio para ver numeros pares :

let list2 = [1,2,3,4,5,6,7,8,9,10]for (let i = 0; i < list2.length; i++){ if (list2[i] %2 === 0){ console.log(list2[i]+ " es par") }}

Zarod Barney

student•

disculpe quien me puede ayudar. Donde puedo conseguir ejercicios para practicar los temas de este curso.

Cristhian Alexis Vera Sandoval

student•

Les dejo el aporte de la clase realizado del código

Reynaldo Francisco Moreno Briceño

student•

Realice el FizzBuzz como ejemplo

// FizzBuzz

for (let i = 0; i <= 100; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else {
    console.log(i);
  }
}

```*// FizzBuzz*
for (let i = 0; i <= 100; i++) {  if (i % 3 === 0 && i % 5 === 0) {    console.log("FizzBuzz");  } else if (i % 5 === 0) {    console.log("Buzz");  } else if (i % 3 === 0) {    console.log("Fizz");  } else {    console.log(i);  }}

Emilio Flor

student•

For es un tipo de bucle de iteración determinada, su estructura nos obliga a definir el punto de inicio y el punto de fin.

El bucle For también se puede usar con break.

se compone de 3 partes:

1.- declaracion.

2.- condición.

3.- iteración*

*no es "incremento" ya que se puede incrementar o decrementar el valor, lo cual indica que es una iteración.

for (declaracion; condición; iteracion) {

// Bloque de código a ejecutar en cada iteración

}

for (let i = 0; i < 3; i++){

console.log(i)

}output:

//0,1,2,3

Andrés Pastrana

student•

Un bucle es una forma de repetir instrucciones sin tener que escribirlas muchas veces. El for se utiliza cuando sabemos cuántas veces queremos repetir algo o queremos recorrer una colección (listas, arreglos, etc.).

Un bucle for normalmente tiene tres partes:

Inicio → desde dónde comienza.
Condición → hasta dónde llega.
Incremento → cómo avanza en cada vuelta.

Cada repetición se llama iteración.

Ciro de Jesus Arrieta Lacouture

student•

Tabla de Multiplicar

Ciro de Jesus Arrieta Lacouture

student•

Juan Francisco

student•

for (i=0; i<list.length; i++)

{còdigo}

1- La variable i inicia en 0,

2- Si la i es menor a list.length entonces se ejecuta el codigo,

3- A la i le sumamos el incremento i+1 y comenzamos el ciclo con el nuevo valor de i.

3- Si la i no es menor a list.length entonces no se ejecuta el codigo y el ciclo termina.

FIN

Jonathan Garcia

student•

Gonzalo Tomas Orlando

student•

let list = ["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"]

function escribirDiaDeLaSemana(){
for (let i = 0; i < list.length; i++){
    console.log(list[i])
}
}
escribirDiaDeLaSemana()