Control de flujo

JavaScript cuenta con varias estructuras de control de flujo, que incluyen declaraciones condicionales, bucles, y manejo de excepciones.

El control de flujo en JavaScript se refiere a la manera en que se determina el orden en que se ejecutan las instrucciones en un programa. Por defecto, el código en JavaScript se ejecuta de arriba hacia abajo, pero esto no siempre es lo ideal. A menudo necesitamos que el programa tome decisiones o repita ciertas acciones, y es aquí donde entran en juego las estructuras de control de flujo. Estas estructuras nos permiten realizar elecciones, iteraciones y gestionar situaciones excepcionales para dirigir cómo se ejecutan las líneas de código.

Declaraciones Condicionales

Permiten que el programa tome decisiones basadas en condiciones, ejecutando diferentes bloques de código dependiendo de si una condición se evalúa como verdadera o falsa.

Declaración if

Las sentencias condicionales se encuentran en casi todos los lenguajes de programación que utilizamos hoy en día. Son simplemente sentencias que evalúan una determinada condición y luego ejecutan código en función del resultado de esa evaluación. JavaScript no se queda atrás, ya que admite sentencias condicionales de manera predeterminada.

📝

Definición

La declaración if ejecuta el código si una condición dada es verdadera .

Sintaxis

if (expression) statement;

Empezamos con la palabra clave if, seguida de un par de paréntesis (()). Dentro de estos paréntesis, ponemos una expresión que es la condición a evaluar. Si esta condición evalúa al valor booleano true, ejecuta la siguiente declaración o statement.

statement Aquí se llama al cuerpo de if, mientras que la parte if (expression) se llama al encabezado de if.

La declaración if evalúa la expresión dada y comprueba si se reduce a true. Si lo hace, significa que la condición se cumple, por ende, el cuerpo se ejecuta.

De lo contrario si se reduce a false, la condición no se cumple, por ende, el cuerpo no se ejecuta.

Clausula else

La sentencia if puede contener un bloque else (“si no”, “en caso contrario”) opcional. Este bloque se ejecutará cuando la condición sea falsa.

let year = prompt('¿En qué año fue publicada la especificación ECMAScript-2015?', '');
 
if (year == 2015) {
  alert( '¡Lo adivinaste, correcto!' );
} else {
  alert( '¿Cómo puedes estar tan equivocado?' ); // cualquier valor excepto 2015
}

else if

A veces queremos probar más de una condición. La clausula else if nos permite hacer esto.

let year = prompt('¿En qué año fue publicada la especificación ECMAScript-2015?', '');
 
if (year < 2015) {
  alert( 'Muy poco...' );
} else if (year > 2015) {
  alert( 'Muy Tarde' );
} else {
  alert( '¡Exactamente!' );
}

En el código de arriba, JavaScript primero revisa si year < 2015. Si esto es falso, continúa a la siguiente condición year > 2015. Si esta también es falsa, mostrará la última alert.

Podría haber más bloques else if. Y el último else es opcional.

Operador ternario ?

El operador condicional (ternario) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción if.

Sintaxis

condición ? expr1 : expr2

Si la condición es true, el operador retorna el valor de la expr1; de lo contrario, devuelve el valor de expr2. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable isMember, se puede usar esta declaración:

"La Cuota es de:  " + (isMember ? "$2.00" : "$10.00");

También puedes asignar variables dependiendo del resultado de la condición ternaria:

var elvisLives = Math.PI > 4 ? "Sip" : "Nop";

También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):

var firstCheck = false,
  secondCheck = false,
  access = firstCheck
    ? "Acceso Denegado"
    : secondCheck
      ? "Acceso Denegado"
      : "Acceso Permitido";
 
console.log(access); // muestra "Acceso Permitido"

También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:

var stop = false,
  age = 16;
 
age > 18 ? location.assign("continue.html") : (stop = true);

También puede realizar más de una operación por caso, separándolas con una coma:

var stop = false,
  age = 23;
 
age > 18
  ? (alert("OK, puedes continuar."), location.assign("continue.html"))
  : ((stop = true), alert("Disculpa, eres menor de edad!"));

También puede realizar más de una operación durante la asignación de un valor. En este caso, el último valor separado por una coma del paréntesis será el valor asignado.

var age = 16;
 
var url =
  age > 18
    ? (alert("OK, puedes continuar."),
      // alert devuelve "undefined", pero será ignorado porque
      // no es el último valor separado por comas del paréntesis
      "continue.html") // el valor a ser asignado si age > 18
    : (alert("Eres menor de edad!"),
      alert("Disculpa :-("),
      // etc. etc.
      "stop.html"); // el valor a ser asignado si !(age > 18)
 
location.assign(url); // "stop.html"

Switch

La declaración switch evalúa una expresión, comparando el valor de esa expresión con una instancia case, y ejecuta declaraciones asociadas a ese case, así como las declaraciones en los case que siguen.

Sintaxis

switch (expresión) {
  case valor1:
    //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
    [break;]
  case valor2:
    //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
    [break;]
  ...
  case valorN:
    //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
    [break;]
  default:
    //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
    [break;]
}

Si ocurre una coincidencia, el programa ejecuta las declaraciones asociadas correspondientes. Si la expresión coincide con múltiples entradas, la primera será la seleccionada, incluso si las mayúsculas son tenidas en cuenta.

El programa primero busca la primer instancia case cuya expresión se evalúa con el mismo valor de la expresión de entrada (usando comparación estricta, ===) y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas. Si no se encuentra una cláusula de case coincidente, el programa busca la cláusula default opcional, y si se encuentra, transfiere el control a esa instancia, ejecutando las declaraciones asociadas. Si no se encuentra una instancia default el programa continúa la ejecución en la instrucción siguiente al final del switch. Por convención, la instancia default es la última cláusula, pero no tiene que ser así.

La declaración break es opcional y está asociada con cada etiqueta de case y asegura que el programa salga del switch una vez que se ejecute la instrucción coincidente y continúe la ejecución en la instrucción siguiente. Si se omite el break el programa continúa la ejecución en la siguiente instrucción en la declaración de switch.

Manejo de excepciones

El manejo de excepciones en JavaScript permite controlar errores de forma que la ejecución de un programa no se detenga abruptamente. Para esto, se utilizan las estructuras try, catch, finally y la palabra clave throw, junto con el objeto Error.

Componentes clave:

  1. try: Bloque que contiene el código que podría generar un error.
  2. catch: Captura y maneja el error si ocurre en el bloque try.
  3. finally: (Opcional) Se ejecuta siempre, independientemente de si hubo un error.
  4. throw: Lanza un error manualmente, usando instancias del objeto Error para proporcionar detalles sobre el problema.

Ejemplo básico:

try {
  throw new Error('Este es un error personalizado');
} catch (error) {
  console.error('Error capturado:', error.message); // 'Este es un error personalizado'
} finally {
  console.log('Este bloque se ejecuta siempre.');
}

Uso del objeto Error

El objeto Error en JavaScript se utiliza para crear instancias que representan errores. Proporciona propiedades como message (descripción del error) y name (tipo de error), facilitando la identificación y el manejo de problemas en el código.

Tipos de Error

Además del constructor genérico Error, hay otros siete constructores de errores en el núcleo de JavaScript.