Tipos de bucles en JavaScript - SoniaHarry/Course-Checkpoint-8 GitHub Wiki
JavaScript soporta varios tipos de bucles, a continuación se muestra cada tipo:
Sintaxis:
for (expresion1; expresion2; expresion3) {
// bloque de código a ejecutar
}
Ejemplo:
let text=""; //Se inicializa la variable
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "\n";
}
console.log(text);
/* Devuelve:
"The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
"
*/
Analicemos este caso:
NOTA: Deberíamos saber que se pueden inicializar en la expresion1 varios valores siempre separados por una coma.
Ejemplo:
const cars = ["BMW", "Volvo", "Saab", "Ford"]; //Se inicializa el array
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "\n";
console.log(text);
}
El ejemplo anterior en la
Primera vuelta -> i=0 -> "BMW"
Segunda vuelta -> i=1 -> "BMW Volvo " Tercera vuelta -> i=2 -> "BMW Volvo Saab "
Cuarta vuelta -> i=3 -> "BMW Volvo Saab Ford "
IMPORTANTE: En el ejemplo anterior si llamamos a console.log(text); fuera del bucle nos devolverá el siguiente
$\color{red}error$ .
Uncaught ReferenceError: text is not defined
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-7b90d2fe-2bea-6863-488d-52f25630de0c:9
NOTA: También deberíamos saber que la expresion1 es opcional, por lo que si no se define expresion1 habrá que inicializar la variable inicial antes del bucle.
Ejemplo:
let text="";
let i = 0
for (; i < 5; i++) {
text += "The number is " + i + "\n";
}
console.log(text);
/* Devuelve
"The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
"
*/
NOTA: La expresion2 es opcional. Pero es IMPORTANTE que dentro del bucle exista la instrucción break que provoca una interrupción del bucle, ya que sino el bucle nunca terminaría provocando que el navegador se bloquee.
NOTA: La expresión3 es opcional. Pero habrá que incrementarla o realizar la operación que sea dentro del bucle. Ejemplo:
Ejemplo:
let text="";
for (let i = 0; i < 5;) {
text += "The number is " + i + "\n";
i++
}
console.log(text);
/* Devuelve
"The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
"
*/
Sintaxis:
for (key in object) {
// bloque de código a ejecutar
}
Ejemplo:
const client = {name:"John", surname:"Doe", age:25};
let text = "";
for (let c in client) {
text += client[c];
}
console.log(text);
/* Devuelve
"JohnDoe25"
*/
Analicemos este caso:
En este caso el bucle for interatua sobre el objeto
NOTA: Además utilizando for in se pueden recorrer las propiedades de una matriz.
Ejemplo:
const numbers = [45, 4, 9, 16, 25];
let text = "";
for (let x in numbers) {
text += numbers[x];
}
/* Devuelve
"45491625"
*/
IMPORTANTE: No use este for in en una matriz si el orden del índice es importante. Es mejor utilizar un bucle for of ó Array.forEach() cuando el orden es importante.
Array.forEach() El método forEach() llama a una función (una función de devolución de llamada) una vez para cada elemento de la matriz.
Ejemplo:
const numbers = [45, 4, 9, 16, 25];
let text = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
text += value;
}
console.log(text);
/*
"45491625"
*/
Recorre los valores de un objeto iterable. Le permite recorrer estructuras de datos iterables como matrices, cadenas, listas ...
Sintaxis:
for (variable of iterable) {
// bloque de código a ejecutar
}
Ejemplo array:
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x;
}
console.log(text);
/* Devuelve
"BMWVolvoMini"
*/
Ejemplo string:
let language = "JS";
let text = "";
for (let x of language) {
text += x;
console.log(x + "\n");
}
/* Devuelve
"J"
"S"
*/
El bucle while recorre un bloque de código siempre que una condición especificada sea verdadera.
Sintaxis:
while (condition) {
// bloque de código a ejecutar
}
Ejemplo:
let text="";
let i=3;
while (i < 10) {
text += "The number is " + i + "\n";
i++;
}
console.log(text);
/* Devuelve
"The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
"
*/
Analicemos este caso:
NOTA: Recuerde incrementar el valor de la variable usada en la condición ( i++; ) porque sino el bucle nunca terminará y estaríamos delante de un bucle infinito.
Este bucle es una variante del bucle while. Este bucle ejecutará el bloque de código una vez, antes de verificar si la condición es verdadera, luego repetirá el bucle mientras la condición sea verdadera.
Sintaxis:
do {
// bloque de código a ejecutar
}
while (condition);
Ejemplo:
El siguiente ejemplo utiliza un bucle do while. El bucle siempre se ejecutará al menos una vez, incluso si la condición es falsa, porque el bloque de código se ejecuta antes de que se pruebe la condición.
let text="";
let i=3;
do {
text += "The number is " + i;
i++;
}
while (i < 10);
/* Devuelve
"The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 "
*/
IMPORTANTE: Recuerde incrementar el valor de la variable usada en la condición ( i++; ) porque sino el bucle nunca terminará y estaríamos delante de un bucle infinito.
📚REFERENCIAS:
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration
https://www.freecodecamp.org/espanol/news/javascript-bucles-explicados-for-while-loops/
https://www.w3schools.com/js/js_loop_for.asp
https://www.w3schools.com/js/js_loop_forin.asp
