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

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:31

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

Curso de Fundamentos de JavaScript

Clase 15 de 55

Clase 15 / 55

Recursos

¿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.

Andrés Soret Chacin

Hace 2 años

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.

Comentarios (47)47 comentarios

Arnol Daniel Degollado Garrocho

Deiby Alejandro Triana Archila

Hace un año

Jhonathan Galvis Fajardo

Eduardo Enrique Morales Martínez

Platzi Team

Christopher Andrés Guano Valencia

Carlos Humberto Chavarría Aparicio

Aitor Garcia Ramos

Juan Pablo Avila

Sandra Procopio Guzman

Arturo Emiliano Sánchez Romero

Valentina Chavez Diaz

Hace 10 meses

Gonzalo Tomas Orlando

Eduardo Arturo Quintero Bueno

Mateo Gamboa

Zarod Barney

Cristhian Alexis Vera Sandoval

Reynaldo Francisco Moreno Briceño

Gerardo Díaz Valdez

Hace 21 días

Daniel Vergel

Hace 4 meses

HERNANDO RAMIREZ

Hace 6 meses

Andrés Felipe Toro Layton

Hace 7 meses

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

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

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

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