====== JavaScript: estructuras de control ======

Parte de las notas sobre el lenguaje de programación [[informatica:programacion:javascript|JavaScript]].

===== Condicionales (selección) =====

Permiten tomar decisiones en el código.

==== if ====

<code javascript>
if (condición) {
  código a ejecutar si la condición es verdadera
} else {
  ejecuta este otro código si la condición es falsa
}
</code>

==== else if ====

<code javascript>
if (condición) {
  código a ejecutar si la condición es verdadera
} else if (condición 2) {
  ejecuta este otro código si la condición es falsa, pero la 
  siguiente condición no
} else {
  ejecuta este otro código en cualquier otro caso
}
</code>

==== switch ====

Para los casos donde hay que realizar varias elecciones, la construcción ''switch'' nos permite escribir un código más claro:

<code javascript>
switch (expresion) {
  case choice1:
    ejecuta este código
    break;

  case choice2:
    ejecuta este código
    break;

  // Se pueden incluir todos los casos que quieras

  default:
    por si acaso, corre este código
}
</code>

==== Operador ternario ====

Pequeña sintaxis que prueba una condición y devuelve un valor/expresión, si es true, y otro si es false. El operador ternario es el signo de interrogación ''?''.

<code javascript>
( condición ) ? ejecuta este código : ejecuta este código en su lugar
</code>

Ejemplo:

<code javascript>
let select = document.querySelector("select");
let html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function () {
  select.value === "black"
    ? update("black", "white")
    : update("white", "black");
};
</code>
===== Bucles (iteración) =====

==== for ====

Sintaxis básica:

<code javascript>
for (inicializador; condición; expresión-final) {
  // código a ejecutar
}
</code>

Para recorrer colecciones/arrays, empleamos otra sintaxis:

<code javascript>
const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "León"];

for (const cat of cats) {
  console.log(cat);
}
</code>

==== while ====

<code javascript>
inicializador
while(condición) {
  // código a ejecutar

  expresión-final
}
</code>

==== do...while ====

A diferencia del ''while'' normal, en el ''do...while'' el código que hay en el bucle se ejecuta al menos una vez:

<code javasscript>
inicializador
do {
  // código a ejecutar

  expresión-final
} while (condición)
</code>