JavaScript para bucle

Tabla de contenido

    Mostrar tabla de contenidos

Los bucles pueden ejecutar un bloque de código varias veces.

Bucles de JavaScript

Los bucles son útiles si desea ejecutar el mismo código una y otra vez, cada uno tiempo con un valor diferente.

Este suele ser el caso cuando se trabaja con matrices:

En lugar de escribir:

 text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
 text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
 text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Puedes escribir:

for (let i = 0; i < cars.length; i++) { 
  text += cars[i] + "<br>";
 }

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

let text = "";
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Diferentes tipos de bucles

JavaScript admite diferentes tipos de bucles:

  • for: recorre un bloque de código varias veces

  • for/in - recorre las propiedades de un objeto

  • for/of - recorre los valores de un objeto iterable

  • while: recorre un bloque de código mientras una condición especificada es verdadera

  • do/ while: también recorre un bloque de código mientras una condición especificada es verdadera

El bucle for

La instrucción for crea un bucle con 3 expresiones opcionales:

for (expression 1; expression 2; expression 3) {
      // code block to be executed
 }

La Expresión 1 se ejecuta (una vez) antes de la ejecución del bloque de código.

La Expresión 2 define la condición para ejecutar el bloque de código.

La Expresión 3 se ejecuta (cada vez) después de que se haya ejecutado el bloque de código.

Ejemplo

for (let i = 0; i < 5; i++) {
   text += "The number is " + i + "<br>";
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
let text = "";

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Del ejemplo anterior, puedes leer:

La expresión 1 establece una variable antes de que comience el ciclo (sea i=0).

La expresión 2 define la condición para que se ejecute el bucle (i debe ser menor que 5).

La expresión 3 aumenta un valor (i++) cada vez que el bloque de código en el bucle tiene sido ejecutado.

Expresión 1

Normalmente utilizará la expresión 1 para inicializar la variable utilizada en el bucle (sea i=0).

Este no es siempre el caso. A JavaScript no le importa. La expresión 1 es opcional.

Puede iniciar muchos valores en la expresión 1 (separados por coma):

Ejemplo

for (let i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
 }

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Y puedes omitir la expresión 1 (como cuando tus valores están establecidos antes de que comience el ciclo):

Ejemplo

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
 }

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Expresión 2

A menudo, la expresión 2 se utiliza para evaluar la condición de la variable inicial.

Este no es siempre el caso. A JavaScript no le importa. La expresión 2 es también opcional.

Si la expresión 2 devuelve verdadero, el ciclo comenzará de nuevo. Si devuelve falso, el El bucle terminará.

Si omite la expresión 2, debe proporcionar un descanso dentro del bucle. De lo contrario, el ciclo nunca terminará. Esto bloqueará su navegador. Lea sobre las pausas en un capítulo posterior de este tutorial.

Expresión 3

A menudo, la expresión 3 incrementa el valor de la variable inicial.

Este no es siempre el caso. A JavaScript no le importa. La expresión 3 es opcional.

La expresión 3 puede hacer cualquier cosa como incremento negativo (i--), positivo incremento (i=i + 15), o cualquier otra cosa.

La expresión 3 también se puede omitir (como cuando incrementas tus valores dentro del bucle):

Ejemplo

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) { 
  text += cars[i] + "<br>";
   
 i++;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let len = cars.length;
let text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Alcance del bucle

Usando var en un bucle:

Ejemplo

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

Usando let en un bucle:

Ejemplo

let i = 5;

for (let i = 0; i < 10; i++) {
    // some code
}

// Here i is 5

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

En el primer ejemplo, usando var, la variable declarada en el bucle vuelve a declarar la variable fuera del bucle.

En el segundo ejemplo, usando let, la variable declarada en el bucle no vuelve a declarar la variable fuera del bucle.

Cuando se usa let para declarar la variable i en un bucle, la i La variable solo será visible dentro del bucle.

Bucles For/Of y For/In

El bucle for/in y el bucle for/of se explican en el siguiente capítulo.

Bucles while

El bucle while y el do/ while se explican en los siguientes capítulos.