For loop
Algunas veces vas a desear ejecutar tu código hasta que una condición se cumpla o se deje de cumplir. Los For Loops tienen esa característica, se ejecutan el código hasta que se deja de cumplir la condición.
Se compone de:
- Inicializar el for
- Condición
- Incremento
for(let i = 0; i <= 10; i ++) {
console.log(`Numero: ${i} `);
}Podemos llevar este ejemplo más allá, una pregunta sencilla para programadores JR es cómo identificas un número par o impar con un for loop.
for(let i = 0; i <= 10; i++) {
if(i % 2 == 0) {
console.log(`Numero ${i} ES PAR `);
} else {
console.log(`Numero ${i} ES IMPAR `);
}
}Los for son útiles cuando tienes un arreglo, digamos un carrito de compras.
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet ', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
]
for(let i = 0; i < carrito.length; i++ ) {
console.log(carrito[i].nombre);
}
En este caso nuestro for loop corre hasta que una condición se cumple, ahora como este arreglo el usuario se va a encargar de llenarlo, un for loop ejecutará el código hasta que lleguemos al final del carrito.
Break y continue en el for loop
Break cortará la ejecución del for loop, mientras que continue nos permitirá interceptar, digamos un elemento, y continuar con su ejecución pero regresando al inicio del loop.
for(let i = 0; i <= 10; i++) {
if( i === 5) {
console.log('Estamos en el 5... FIN.');
break;
}
console.log(`Numero: ${i} `);
}
for(let i = 0; i <= 10; i++) {
if( i === 5) {
console.log('Estamos en el 5... CONTINUAR....');
continue;
}
console.log(`Numero: ${i} `);
}En console.log tendremos:
¿En qué casos se puede utilizar el continue?
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet', precio: 300, descuento: true},
{ nombre: 'Audífonos', precio: 200},
{ nombre: 'Teclado', precio: 50, descuento: true},
{ nombre: 'Celular', precio: 500},
]
for(let i = 0; i <= 10; i++) {
if(carrito[i].descuento) {
console.log(carrito[i].nombre + ' ' + `El articulo ${carrito[i].nombre} Tiene descuento... `);
continue;
}
console.log(carrito[i].nombre);
}Veremos esto en consola:
El famoso problema Fizz Buzz resuelto
3 6 9 12 15 … FIZZ
5 10 15 20 25 … BUZZ
15 30 45 … Fizz Buzz
for(let i = 1; i < 100; i++ ) {
if(i % 15 === 0) {
console.log(`${i} FIZZ BUZZ`)
} else if(i % 3 === 0) {
console.log(`${i} fizz`);
} else if ( i % 5 === 0 ) {
console.log(`${i} buzz`)
}
}
While loop
Otro bucle muy común es el while loop, este se ejecuta mientras una condición sea verdadera.
let i = 0;
while (i < 10) { // condicion
console.log(`Numero: ${i}`); // Bloque de código...
i++; // incremento
}El while se ejecuta mientras una condición sea verdadera, por lo tanto si inicicializamos en 20, no hará nada.
Do while loop
Do while es otro loop que es muy común en otros lenguajes y también en JavaScript. Do While va a correr al menos una vez. A diferencia del for y del while, el do while se ejecuta al menos una vez, y después verifica si la condición se cumple.
let i = 0;
do {
console.log(`Numero: ${i}`)
i++;
} while( i < 10 );
Ahora, lo que hace diferente a un while de un for o un do while, es que al menos se va a ejecutar una vez aunque la condición no se cumpla.
Los métodos .forEach() y .map() vistos como bucles
El forEach es para recorrer arreglos y asignarle cada valor del arreglo a una función, por lo general, de flecha. El map nos va a armar otro arreglo a partir de otro arreglo y de lo que le vallamos indicando en el código para cada uno de los items. Ambos recorren un arreglo y por lo tanto también son loops.
const pendiente = [ 'Tarea', 'Comer', 'Proyecto', 'Estudiar JavaScript' ];
pendiente.forEach( (pendiente, indice) => {
console.log(`${indice} : ${pendiente}`);
})
A continuación, comparación de un forEach con un map ambos trabajando con un arreglo de objetos.
const carrito = [
{ nombre: 'Monitor', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audífonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
carrito.forEach( producto => console.log(producto.nombre + " forEach") );
const nuevoArreglo = carrito.map( producto => producto.nombre);
console.log( nuevoArreglo );
La sintaxis es la misma, solo recuerda, el map te crea un nuevo arreglo. Si solo deseas recorrer los elementos utiliza el Foreach, si requieres crear un nuevo arreglo, sin duda el map sera mejor.
El bucle for …of…
For …of… no es como un for tradicional que ejecuta una pieza de código mientras una condición sea verdadera, este ejecuta mientras haya elementos por iterar, como puede ser un arreglo y otros llamados Maps y Sets que veremos más adelante.
let pendientes = ['Tarea', 'Comer', 'Proyecto', 'Estudiar JavaScript'];
for (let pendiente of pendientes) {
console.log(pendiente);
}
Ejemplo con un arreglo de objetos
const carrito = [
{ nombre: 'Monitor', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audífonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
for( let producto of carrito ) {
console.log(producto.nombre);
}
Sin duda una forma más sencilla que un forEach y un for ¿no?
For …in…
El for in va a iterar sobre todas las propiedades de un objeto. En cambio, for of es más para arreglos
let automovil = {
modelo: 'Camaro',
motor: '6.0',
ano: '1969',
marca: 'Chevrolet'
}
for(let auto in automovil) {
console.log(`${auto} : ${automovil[auto]}`);
}
let automovil = {
modelo: 'Camaro',
motor: '6.0',
anio: '1969',
marca: 'Chevrolet'
}
for(let [ llave, valor] of Object.entries(automovil) ) {
console.log(valor);
console.log(llave);
}
Hasta aquí los benditos loops.