Introducci贸n a JavaScript
驴Por qu茅 aprender JavaScript?
隆Hola Mundo! en Mac
隆Hola Mundo! en Windows
Anatom铆a de una variable
Tipos de datos en JavaScript
Creaci贸n de strings
Operadores aritm茅ticos
Conversi贸n de tipos: Type Casting y Coerci贸n
Conversi贸n de tipos expl铆cita e impl铆cita
Estructuras de Control y L贸gica
Operadores de comparaci贸n
Operadores l贸gicos
Ejecuci贸n condicional: if
Ejercicio: Adivina el n煤mero
Ejecuci贸n condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatom铆a de una funci贸n
Funciones vs M茅todos
Funciones puras e impuras
Arrow function y enlace l茅xico
Contextos de ejecuci贸n y scope chain
驴Qu茅 es Closure?
Preguntas a Desarrolladores Senior: 驴Por qu茅 aprender Desarrollo Web?
Manipulaci贸n de Arrays
Introducci贸n a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificaci贸n b谩sica del final con push( ), pop( )
Iteraci贸n con map( ) y forEach( )
Filtrado y reducci贸n con filter( ) y reduce( )
B煤squeda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programaci贸n Orientada a Objetos
Anatom铆a de un Objeto
Trabajando con objetos en JavaScript
Funci贸n constructora
驴Qu茅 es una clase?
Prototipos y herencias
Herencia en la pr谩ctica
Prototipos en la pr谩ctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincron铆a en JavaScript
驴C贸mo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
驴C贸mo funciona la web?
驴C贸mo funciona HTTP?
M茅todo GET en JavaScript
M茅todo POST en JavaScript
M茅todo DELETE en JavaScript
Importancia del id en el m茅todo DELETE
ECMAScript 6 y tus siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How to use a "for" loop in JavaScript?
The "for" is one of the most fundamental and powerful structures in JavaScript to perform iterations or loops, allowing you to step through elements within a list or array. You may be wondering, how does it work and why is it so valuable? Here I will explain it in a simple and practical way.
What is the "for" method and how to structure it?
The "for" method in JavaScript is a tool that allows us to repeat the execution of a block of code until a specified condition is false. It consists of three main steps within its parentheses:
- Initialization: a control variable (commonly 'i') is defined, assigning an initial value. For example,
let i = 0. - Condition: Evaluates the condition that must be met for the loop to continue. Typically, the control variable is compared to a length. An example is
i < list.length. - Increment: Modifies the control variable at each iteration, usually by incrementing it by one
(i++).
The basic structure is as follows:
for (let i = 0; i < list.length; i++) { // Code to execute}How to iterate with "for" on an array?
To make it more practical, let's do an example. Suppose we have an array with several elements that we want to print on the console.
Practical example of iteration with "for".
First, we define our array:
let list = ["eat", "sleep", "code", "repeat"];Then, we implement the "for" loop:
for (let i = 0; i < list.length; i++) { console.log(list[i]);}Understanding the code
- Array definition:
listcontains four elements of type string. - Loop initialization and condition: It starts from
i = 0and continues as long asi < list.length(4 in this case). - Iteration: For each loop,
console.log(list[i]);prints the current element based on indexi. - Increment:
i++ensures that the loop advances to the next index of the array.
The result when executing this code will be:
eatsleepcoderepeatWhat happens inside the "for" loop?
Each time the "for" loop executes, it performs the following steps:
- Checks the condition: if the condition is true, the code block inside the loop is executed.
- Code execution: Prints the current element of the array.
- Increment: Increments the value of
ito move to the next element. - Re-evaluation: Re-checks the condition; if it is still true, it repeats the loop. If not, it stops.
Practical considerations and tips
- Simplicity and initialization: Use consistent nomenclature, such as
let i = 0, to maintain clarity. - Avoid infinite loops: Make sure the condition eventually becomes false by adding an appropriate increment.
- Versatility of "for": Although we did a basic example with
console.log, "for" can be adapted to more complex tasks by transforming or accumulating data.
Now it's your turn! Practice is key. Try implementing a "for" loop in simple projects to solidify the use of this powerful structure. And remember, keep exploring and expanding your JavaScript skills; constant learning opens doors to endless possibilities in the programming world.
Contributions 28
Questions 0
Sort by:
Hola... les comparto una forma sencilla de usar el ciclo for!
```js
//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)
}
```
## 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]);`
`}`
**馃煛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.
```js
// 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:
```js
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.
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
Alguien en un momento siente que no entiende nada, al practicar resulta valioso lo de los ejercicios.
Les dejo el aporte de la clase realizado del c贸digo
Realice el FizzBuzz como ejemplo
```js
// 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);聽 }}
disculpe quien me puede ayudar. Donde puedo conseguir ejercicios para practicar los temas de este curso.
```js
let list = ["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"]
function escribirDiaDeLaSemana(){
for (let i = 0; i < list.length; i++){
console.log(list[i])
}
}
escribirDiaDeLaSemana()
```
```js
const numeroSecreto = Math.floor(Math.random() *10 +1)
let list = ["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"]
function escribirDiaDeLaSemana(){
for (let i = 0; i < list.length; i++){
console.log(list[i])
}
}
escribirDiaDeLaSemana()
```const numeroSecreto = Math.floor(Math.random() \*10 +1)let list = \["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"]
function escribirDiaDeLaSemana(){for (let i = 0; i < list.length; i++){聽 聽 console.log(list\[i])}}escribirDiaDeLaSemana()
隆隆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](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_operators)
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
```js
// 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铆:
porque se crea la variable i
```js
let list = ['eat','sleep','code','repeat','dreams'];
for(let i=0; i<list.length; i++){
console.log(`${i+1}: ${list[i]}`);
}
```
```js
for (let i = 1; i <= 3; i++) {
let number = parseInt(prompt(`Coloque un numero aleatorio del 1 al 10`));
let random = Math.floor(Math.random() * 10);
console.log(number)
if (number === random) {
console.log(`El numero es: ${random}, felicitaciones ganaste un auto de 0 km!`)
} else {
console.log(`El numero es: ${random}, 隆que lastima! intenta de nuevo`)
}
}
```for (let i = 1; i <= 3; i++) {聽 let number = parseInt(prompt(`Coloque un numero aleatorio del 1 al 10`));聽 let random = Math.floor(Math.random() \* 10);聽 console.log(number)聽 聽 if (number === random) {聽 聽 console.log(`El numero es: ${random}, felicitaciones ganaste un auto de 0 km!`)聽 } else {聽 聽 console.log(`El numero es: ${random}, 隆que lastima! intenta de nuevo`)聽 }聽 }
ejer 1
聽 let list = \[ "eat","sleep","code", "repeat"];
聽 for(let i = 0; i < list.length; i++) {聽 聽 console.log(list\[i])聽 聽 聽 }
ejrec 2
聽 let num = parseFloat(prompt("por favor ingrese el numero que desea hacer la tabla "));
聽 for (let i = 1; i < 11; i++) {聽 聽 let resultado = num \* i ;聽 聽 聽console.log(num + " x " + i + " = " + resultado);聽 }
## 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.
```js
let list = ["eat","sleep","code","repeat","javascript"];
for(let i = 0; i < list.length; i++ ){
console.log(`${i + 1}. ${list[i]}`);
}
``````js
1. eat
2. sleep
3. code
4. repeat
5. javascript
```
```js
for (let t=0; t < 5 ; let++) {
}
```
Aqui probando valor de inicio producido por una funcion y un incremento diferente a uno:
**MIS APORTES:** (Con un ejemplo que les recomiendo ver)
El bucle ***for*** consiste en tres expresiones opcionales, encerradas en par茅ntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle.
***Sintaxis***
*for (\[expresion-inicial]; \[condicion]; \[expresion-final])sentencia*
***Codigo de ejemplo:***
```js
// ---------- Ciclos ---------
//for
let lista = ['comer', 'dormir', 'estudiar en platzi', 'tomar un break'];
for (let i=0; i<lista.length; i++){
console.log(`Tu debes de: ${lista[i]}`)
}
```Documentaci贸n de:
<https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/for>
Me ha encantado este tema de JavaScript
![]()
La Iteracion es:
Variable inicio > Condicion > Codigo a ejecutar > incremento o Decremento > condicion > Codigo a ejecutar > incremento > ...
![]()Probando el ciclo for ![]()```js
let numero = parseInt(prompt("Ingresa un numero"))
for (let i = 0; i<=12; i++) {
console.log( i, " x ", numero, " = ", numero*i);
}
```
Want to see more contributions, questions and answers from the community?