Introducción al "Control Flow" en JavaScript para Principiantes

En el post anterior sobre JavaScript te expliqué conceptos básicos como las variables, los tipos de datos, los condicionales, los operadores, las funciones… Ahora que ya sabes estos conceptos de JavaScript es importante que entiendas cómo se ejecuta este código.

El Control Flow o Flujo de control en JavaScript es el orden en el que el intérprete de JavaScript (generalmente en el navegador) ejecuta las declaraciones de tu código. Si en tu código no existen declaraciones que alteren el flujo, este se ejecuta de principio a fin (de arriba hacia abajo) línea a línea. Las estructuras de control se utilizan para:

1. Determinar si un código debe ejecutarse o no.

2. Determinar si un código debe ejecutarse repetidas veces.

3. Determinar si se interrumpe una ejecución.

Condicionales

Estas instrucciones van a determinar si el código se debe ejecutar en función a una o varias condiciones. Para que el código de la condición se ejecute, el resultado del conjunto de condiciones es true , de lo contrario, el código será omitido.

if..else

En la publicación anterior te expliqué muy por encima este tipo de condicionales. La declaración if evalúa las condiciones dentro de los paréntesis que la siguen, si la condición o conjunto de condiciones dentro de este paréntesis da como resultado true , ejecutará el código dentro del bloque { }.

const name = "Leandro";

if (name === "Leandro") {
    console.log("Tu nombre es Leandro");
}
// "Tu nombre es Leandro"

Si la condición entre paréntesis da como resultado false el código dentro del bloque será ignorado.

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
}

El condicional if permite agregar a su declaración la palabra clave else , esta especifica el código que se ejecutará si la condición dentro del if es false .

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
} else {
    console.log("No sé cuál es tu nombre");
}
// "No sé cuál es tu nombre"

Además, el else te permite encadenar otra declaraciones if .

const name = "Leandro";

if (name === "Pedro") {
    console.log("Tu nombre es Pedro");
} else if (name === "Leandro") {
    console.log("Tu nombre es Leandro");
} else if (name === "Juan") {
    console.log("Tu nombre es Juan");
} else {
    console.log("No sé cuál es tu nombre");
}
// "Tu nombre es Leandro"

En caso de que algunas de estas condiciones sea true se ejecutará el código dentro del bloque de dicha condición y el resto será ignorado.

Operador ternario

Este operador es una abreviatura de un if..else y se utiliza para ejecutar un código u otro en función de si la condición es true o false . Al contrario que el if..else este operador no se puede extender.

Este operador se forma con tres operandos:

• La condición o conjunto de condiciones que se evaluará seguida de un signo ?

• El código que se ejecutará si la condición da como resultado true seguida de :

• La expresión que se ejecutará si la condición se evalúa como false

Estos tres operandos son necesarios obligatoriamente para formar el operador ternario.

El uso más común que se le da a este operador es para establecer un valor en una variable en función de una condición.

const age = 21;
const esMayorDeEdad = age > 18 ? true : false;
const puedePasar = esMayorDeEdad ? "Si, puede pasar" : "No, es menor de edad";

console.log(esMayorDeEdad); // true
console.log(puedePasar ); // Si, puede pasar

switch..case

Esta sentencia se utiliza para comparar el valor de una expresión con una lista de valores potenciales definidos. La sintaxis de esta expresión empieza con la palabra reservada switch seguida de la expresión entre paréntesis. A continuación se abren una llaves { } y dentro de estas se agregará la palabra reservada case seguida del potencial valor y : . Si el valor de la expresión coincide con algún case, se ejecutará cualquier declaración de código que esté después de los : de ese case.

const name = "Leandro";

switch (name) {
    case "Pedro":
        console.log("Tu nombre es Pedro");
    case "Leandro":
        console.log("Tu nombre es Leandro");
    case "Juan":
        console.log("Tu nombre es Juan");
    default:
        console.log("No sé cuál es tu nombre");
}
// "Tu nombre es Leandro"
// "Tu nombre es Juan"
// "No sé cuál es tu nombre"

Al final de los case se suele agregar un valor default por si ningunos de los valores anteriores cumplen la condición.

Un error común al utilizar switch..case es que, después de encontrar una coincidencia, el intérprete de JavaScript ejecuta cualquier declaración que siga al case coincidente, incluso aquellas que estén dentro de otras cláusulas case. Por tanto, el resultado del código anterior sería el siguiente:

// Tu nombre es Leandro
// Tu nombre es Juan
// No sé cuál es tu nombre

Para evitar esto, es necesario utilizar la palabra reservada break al final de la declaración de cada case. Esto detendrá la ejecución del switch .

const name = "Leandro";

switch (name) {
    case "Pedro":
        console.log("Tu nombre es Pedro");
        break;
    case "Leandro":
        console.log("Tu nombre es Leandro");
        break;
    case "Juan":
        console.log("Tu nombre es Juan");
        break;
    default:
        console.log("No sé cuál es tu nombre");
        break;
}
// "Tu nombre es Leandro"

Bucles

Los bucles permiten repetir un conjunto de declaraciones (bloque de código) mientras se cumpla una condición o hasta que se cumpla una condición, depende del tipo de bucle. Estos interrumpen el flujo normal de arriba hacia abajo hasta que este finalice, una vez finaliza, la ejecución continúa.

Algunos ejemplos de uso suelen ser buscar un elemento en un array o generar elementos en el HTML en base a un listado de datos.

const usuarios = ["Leandro", "Pedro", "Juan"];

for(let usuario of usuarios) {
    console.log(usuario);
}

// Leandro
// Pedro
// Juan

while

Para definir este tipo de bucles se utiliza la palabra reservada while seguida de paréntesis ( ) con la condición en su interior. Si la condición se evalúa como true se ejecutará el bloque de código dentro del bloque { } , de lo contrario, el bucle nunca se ejecuta. Después de cada iteración (ejecución), la condición se vuelve a evaluar, si aun es true , se vuelve a repetir el bucle.

let contador = 0;

while (contador < 3) {
  contador = contador + 1;
  console.log(`Loop ${contador}`);
}

// "Loop 1"
// "Loop 2"

Si el intérprete encuentra una declaración continue en un bucle de este tipo, detiene esa iteración, vuelve a evaluar la condición, y si es posible, continúa el bucle.

let contador = 0;

while(contador <= 5) {
  contador = contador + 1;

  if (contador === 3) {
    continue;
  }

  console.log(`Loop ${contador}`);
}

// "Loop 1"
// "Loop 2"
// "Loop 4"
// "Loop 5"

Si el intérprete encuentra una declaración break en un bucle while , se detiene la iteración y no se vuelve a evaluar la condición, lo que permite que el intérprete continúe con el código que esté después del bucle.

Es importante tener en cuenta que si la condición no se deja de cumplir nunca, es decir, siempre devuelve true , el bucle continuará de forma indefinida, a esto se le conoce como bucle infinito. Este es considerado un error de programación y puede hacer que la ejecución del código se bloquee de forma indefinida y causar fallos en la pestaña del navegador.

do..while

El bucle do..while es una variante del bucle while, pero con una diferencia clave: el bloque de código se ejecuta al menos una vez antes de que se evalúe la condición.

let contador = 0;

do {
  contador = contador + 1;
  console.log( `Loop ${ contador }` );
} while (contador < 3);

// "Loop 1"
// "Loop 2"
// "Loop 3"

for

El bucle for es otro tipo de bucle que se utiliza para iterar sobre una secuencia de valores, como elementos de un array. La sintaxis del for incluye tres partes: la inicialización, la condición y la expresión final, todas separadas por punto y coma.

const usuarios = ["Leandro", "Pedro", "Juan"];

for (let i = 0; i <= usuarios.length; i++) {
  console.log(usuarios[i]);
}

// "Leandro"
// "Pedro"
// "Juan"

La primera expresión inicializa una variable que actúa como un contador. Esta expresión se evalúa una vez, antes de la primera iteración del bucle. Estas variables pueden tener cualquier nombre válido, pero con frecuencia se las llama i para "iteración" o "índice".

La siguiente expresión es la condición que indica si el bucle debe ejecutarse. Se usa con mayor frecuencia a fin de establecer un límite superior para el contador de iteraciones. Si la condición no se evalúa en un principio como true, el cuerpo del bucle no se ejecuta.

La última expresión se ejecuta al final de cada iteración a través del bucle. Por lo general, se usa para aumentar el identificador en uno.

for...of

El bucle for...of se utiliza para iterar sobre objetos iterables (como arrays, strings, etc.). Este bucle proporciona una manera más simple y directa de recorrer los elementos de una colección.

const usuarios = ["Leandro", "Pedro", "Juan"];

for (let usuario of usuarios) {
  console.log(usuario);
}

// "Leandro"
// "Pedro"
// "Juan"

for...in

El bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto. A diferencia de for...of, este bucle recorre las claves de un objeto.

const usuario = { nombre: "Leandro", edad: 28, ocupación: "Programador" };

for (let propiedad in usuario) {
  console.log(`${propiedad}: ${usuario[propiedad]}`);
}

// "nombre: Leandro"
// "edad: 28"
// "ocupación: Programador"

forEach()

Los constructores Array, Map, Set y NodeList proporcionan un método (función) llamado forEach() que permite la iteración sobre su estructura de datos de una forma más sencilla. A diferencia de otras estructuras de bucle, este método no se puede interrumpir con break ni continue.

const usuarios = ["Leandro", "Pedro", "Juan"];

usuarios.forEach((usuario, i) => {
  console.log(`${i}.${usuario}`);
});

// "0.Leandro"
// "1.Pedro"
// "2.Juan"

Funciones

Son bloques de código reutilizables que realizan una tarea específica. Pueden recibir parámetros y devolver un valor, lo que permite separar y organizar mejor el código. Las funciones necesitan ser ejecutadas para que realicen su labor, esto quiere decir que cuando el intérprete llegue a una función, esta será ignorada y no interrumpirá el flujo hasta que esta sea ejecutada.

Las funciones se declaran con la palabra reservada function seguida de un espacio y el nombre que se le quiera dar a la función, a continuación es necesario abrir y cerrar un paréntesis () dentro de estos paréntesis se pueden definir valores en caso de que la función los requiera, por último, se necesita abrir y cerrar las llaves {} para indicar el inicio y el final del bloque de la función.

Para poder ejecutar una función hay que escribir el nombre que se le ha dado seguido de paréntesis () y si la función necesita parámetros, estos se tendrán que pasar dentro del paréntesis.

// Función con parámetros
function saludoPersonalizado(nombre) {
    console.log(`Hola, ${nombre}!`);
}

saludoPersonalizado("Leandro"); // "Hola, Leandro!"

// Función sin parámetros
function saludoGenerico() {
    console.log("Hola, usuario!");
}

saludoGenerico(); // "Hola, usuario!"

Los parámetros que la función recibe entre los paréntesis () son llamados parámetros de entrada. Estos parámetros tienen que ser pasados al ejecutar la función.

Algunas funciones pueden tener también, si se necesita, parámetros de salida, para ello será necesario tener dentro de la función la palabra reservada return seguida del valor que se quiere devolver. Este valor devuelto se puede recoger dentro de una variable para ser utilizado más adelante.

// Función con valor de retorno
function saludoGenerico() {
    return "Hola, usuario!";
}

const saludo = saludoGenerico();

console.log(saludo); // "Hola, usuario!"

Cuando una función es ejecutada, el flujo de ejecución se detiene en el punto donde se encuentra la función y se reanuda después de que la función haya terminado de ejecutarse. Esto permite modularizar el código y reutilizar funciones en diferentes partes del programa.

Conclusión

El flujo de control es fundamental para escribir código efectivo y eficiente en JavaScript. Con una comprensión sólida de las estructuras de control como condicionales y bucles, puedes gestionar mejor cómo y cuándo se ejecuta tu código. Espero que esta guía básica sobre el control flow te haya ayudado a entender un poco mejor cómo se ejecuta el código JavaScript.

Para aprender más, visita MDN Web Docs sobre JavaScript.

¡Hasta el siguiente post!