Los bucles son estructuras de control de flujo que nos permiten repetir un conjunto de instrucciones varias veces, lo que nos permite realizar tareas complejas de manera más eficiente.
JavaScript cuenta con varios tipos de bucles, pero hacen básicamente lo mismo: repiten una acción varias veces. En este tutorial vamos a conocer 3 bucles básicos.
Bucle For
El bucle for se utiliza para repetir un conjunto de instrucciones un número específico de veces. La sintaxis es la siguiente:
for (inicialización; condición; actualización) {
// código a ejecutar
}Donde:
La inicialización se ejecuta una sola vez al principio del bucle.
La condición se evalúa al principio de cada iteración.
La actualización se ejecuta al final de cada iteración.
Ejemplo:
for (let i = 0; i < 5; i++) {
console.log(i);
}Cada ejecución del bucle se llama iteración. El bucle en el ejemplo de arriba se ejecutará 5 veces, imprimiendo los números del 0 al 4.
Tipos de bucles for
Hay dos tipos de bucles for en JavaScript:
– Bucle for simple: utiliza una variable única y se repite un número específico de veces.
for (let i = 0; i < 5; i++) {
console.log(i);
}– Bucle for con variables múltiples: utiliza varias variables y se repite un número específico de veces.
for (let i = 0, j = 0; i < 3 && j < 3; i++, j++) {
console.log(`i: ${i}, j: ${j}`);
}Omitiendo partes
Cualquier parte de for puede ser omitida. Si se omite la inicialización, el bucle for asumirá que la variable ya está declarada y asignada con un valor anterior. Por ejemplo:
for (; i < 5; i++) {
console.log(i);
}En este caso, el bucle for asumirá que i ya está declarada y asignada con un valor anterior. Si no se ha declarado i previamente, se producirá un error.
Si se omite la condición, el bucle se ejecutará indefinidamente hasta que se produzca un error o se llame a break o return dentro del bucle. Por ejemplo:
for (let i = 0; ; i++) {
console.log(i);
}En este caso, el bucle for se ejecutará indefinidamente imprimiendo los valores de i en una pila infinita.
Si se omite la actualización, el bucle no actualizará la variable utilizada en la condición:
for (let i = 0; i < 5) {
console.log(i);
}En este caso, el bucle for no actualizará la variable i, por lo que se ejecutará solo una vez y luego se detendrá.
Bucle While
El bucle while se utiliza para repetir un conjunto de instrucciones mientras se cumpla una condición determinada. La sintaxis básica es la siguiente:
while (condición) {
// código a ejecutar
}La condición se evalúa al principio de cada iteración del bucle. Así, si la condición es verdadera, el código dentro del bucle se ejecuta, pero si la condición es falsa, el bucle se sale y la ejecución continúa con la siguiente línea de código. Por ejemplo:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}En este ejemplo, el bucle while se ejecutará mientras la variable i sea menor que 5. En cada iteración, se imprime el valor actual de i y se incrementa en 1.
Las llaves no son requeridas para un cuerpo de una sola línea
Si el cuerpo del bucle tiene una sola sentencia, podemos omitir las llaves, debido a que el intérprete de JavaScript automáticamente entiende que la línea siguiente es el final del cuerpo del bucle:
let i = 0;
while (i < 5) console.log(i++);Bucle do…while
El bucle do…while es similar al bucle while, sin embargo, hay una diferencia importante entre los dos: en un bucle do…while, la condición se evalúa al final de cada iteración, no al principio.
La sintaxis básica del bucle do…while es la siguiente:
do {
// código a ejecutar
} while (condición);En el siguiente ejemplo, el bucle do itera al menos una vez y se repite hasta que la variable i no sea menor que 5.
let i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024
