Control de flujo y manejo de errores

Declaracin de bloque

La declaracin ms bsica es una declaracin de bloque, que se utiliza para agrupar instrucciones. El bloque est delimitado por un par de llaves:

{
  statement_1;
  statement_2;
  
  statement_n;
}

Ejemplo

Las declaraciones de bloque se utilizan comnmente con declaraciones de control de flujo (if, for, while).

while (x < 10) {
  x++;
}

Aqu, { x++; } es la declaracin de bloque.

js var x = 1; {
  var x = 2;
}
console.log(x); // muestra 2

Expresiones condicionales

Una expresin condicional es un conjunto de instrucciones que se ejecutarn si una condicin especificada es verdadera. JavaScript admite dos expresiones condicionales: if...else y switch.

Expresin if...else

Utiliza la expresin if para ejecutar una instruccin si una condicin lgica es true. Utiliza la clusula opcional else para ejecutar una instruccin si la condicin es false.

Una declaracin if se ve as:

if (condition) {
  statement_1;
} else {
  statement_2;
}

Aqu, la condition puede ser cualquier expresin que se evale como true o false. (Consulta Boolean para obtener una explicacin de lo que se evala como true y false).

Si condition se evala como true, se ejecuta statement_1. De lo contrario, se ejecuta statement_2. statement_1 y statement_2 pueden ser cualquier declaracin, incluidas otras declaraciones if anidadas.

Tambin puedes componer las declaraciones usando else if para que se prueben varias condiciones en secuencia, de la siguiente manera:

if (condition_1) {
  statement_1;
} else if (condition_2) {
  statement_2;
} else if (condition_n) {
  statement_n;
} else {
  statement_last;
}

En el caso de mltiples condiciones, solo se ejecutar la primera condicin lgica que se evale como true. Para ejecutar mltiples declaraciones, agrpalas dentro de una declaracin de bloque ({ }).

Mejores prcticas

En general, es una buena prctica usar siempre declaraciones de bloque, especialmente al anidar declaraciones if:

if (condition) {
  statement_1_runs_if_condition_is_true;
  statement_2_runs_if_condition_is_true;
} else {
  statement_3_runs_if_condition_is_false;
  statement_4_runs_if_condition_is_false;
}

No es aconsejable utilizar asignaciones simples en una expresin condicional, porque la asignacin se puede confundir con la igualdad al mirar el cdigo.

Por ejemplo, no escribas un cdigo como este:

// Propenso a ser mal interpretado como "x == y"
if ((x = y)) {
  /* expresiones aqu */
}

Si necesitas usar una tarea en una expresin condicional, una prctica comn es poner parntesis adicionales alrededor de la asignacin, as:

if ((x = y)) {
  /* expresiones aqu */
}

Valores falsos

Los siguientes valores se evalan como false (tambin conocidos como valores Falsy:

• false
• undefined
• null
• 0
• NaN
• la cadena vaca ("")

Todos los dems valores, incluidos todos los objetos, se evalan como true cuando se pasan a una declaracin condicional.

Ejemplo

En el siguiente ejemplo, la funcin checkData devuelve true si el nmero de caracteres en un objeto Text es tres. De lo contrario, muestra una alerta y devuelve false.

function checkData() {
  if (document.form1.threeChar.value.length == 3) {
    return true;
  } else {
    alert(
      "Introduce exactamente tres caracteres. " +
        `${document.form1.threeChar.value} no es vlido.`,
    );
    return false;
  }
}

Declaracin switch

Una instruccin switch permite que un programa evale una expresin e intente hacer coincidir el valor de la expresin con una etiqueta case. Si la encuentra, el programa ejecuta la declaracin asociada.

Una instruccin switch se ve as:

switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    
  default:
    statements_def
    [break;]
}

JavaScript evala la instruccin switch anterior de la siguiente manera:

• El programa primero busca una clusula case con una etiqueta que coincida con el valor de expresin y luego transfiere el control a esa clusula, ejecutando las declaraciones asociadas.
• Si no se encuentra una etiqueta coincidente, el programa busca la clusula opcional default:
  • Si se encuentra una clusula default, el programa transfiere el control a esa clusula, ejecutando las declaraciones asociadas.
  • Si no se encuentra una clusula default, el programa reanuda la ejecucin en la declaracin que sigue al final de switch.
  • (Por convencin, la clusula default est escrita como la ltima clusula, pero no es necesario que sea as).

Declaraciones break

La declaracin opcional break asociada con cada clusula case asegura que el programa salga de switch una vez que se ejecuta la instruccin coincidente, y luego contina la ejecucin en la declaracin que sigue a switch. Si se omite break, el programa contina la ejecucin dentro de la instruccin switch (y evaluar el siguiente case, y as sucesivamente).

Ejemplo

En el siguiente ejemplo, si fruittype se evala como 'Bananas', el programa hace coincidir el valor con el caso 'Bananas' y ejecuta la declaracin asociada. Cuando se encuentra break, el programa sale del switch y contina la ejecucin de la instruccin que sigue a switch. Si se omitiera break, tambin se ejecutar la instruccin para case 'Cherries'.

switch (fruittype) {
  case "Oranges":
    console.log("Las naranjas cuestan $0.59 la libra.");
    break;
  case "Apples":
    console.log("Las manzanas cuestan $0.32 la libra.");
    break;
  case "Bananas":
    console.log("Los pltanos cuestan $0.48 la libra.");
    break;
  case "Cherries":
    console.log("Las cerezas cuestan $3.00 la libra.");
    break;
  case "Mangoes":
    console.log("Los mangos cuestan $0.56 la libra.");
    break;
  case "Papayas":
    console.log("Los mangos y las papayas cuestan $2.79 la libra.");
    break;
  default:
    console.log(`Lo sentimos, no tenemos ${fruittype}.`);
}
console.log("Hay algo ms que quieras?");

Expresiones de manejo de excepciones

Puedes lanzar excepciones usando la instruccin throw y manejarlas usando las declaraciones try...catch.

• Expresin throw
• Declaracin try...catch

Tipos de excepciones

Casi cualquier objeto se puede lanzar en JavaScript. Sin embargo, no todos los objetos lanzados son iguales. Si bien es comn lanzar nmeros o cadenas como errores, con frecuencia es ms efectivo usar uno de los tipos de excepcin creados especficamente para este propsito:

• excepciones ECMAScript
• La interfaz DOMException representa un evento anormal (llamado excepcin) que ocurre como resultado de llamar a un mtodo o acceder a una propiedad de una API web y la interfaz DOMError describe un objeto de error que contiene un nombre de error.

Expresin throw

Utiliza la expresin throw para lanzar una excepcin. Una expresin throw especifica el valor que se lanzar:

throw expression;

Puedes lanzar cualquier expresin, no solo expresiones de un tipo especfico. El siguiente cdigo arroja varias excepciones de distintos tipos:

throw "Error2"; // tipo String
throw 42; // tipo Number
throw true; // tipo Boolean
throw {
  toString: function () {
    return "Soy un objeto!";
  },
};

// Crea un objeto tipo de UserException
function UserException(message) {
  this.message = message;
  this.name = "UserException";
}

// Hacer que la excepcin se convierta en una bonita cadena cuando se usa como cadena
// (por ejemplo, por la consola de errores)
UserException.prototype.toString = function () {
  return `${this.name}: "${this.message}"`;
};

// Crea una instancia del tipo de objeto y trala
throw new UserException("Valor muy alto");

Declaracin try...catch

La declaracin try...catch marca un bloque de expresiones para probar y especifica una o ms respuestas en caso de que se produzca una excepcin. Si se lanza una excepcin, la declaracin try...catch la detecta.

La declaracin try...catch consta de un bloque try, que contiene una o ms declaraciones, y un bloque catch, que contiene declaraciones que especifican qu hacer si se lanza una excepcin en el bloque try.

En otras palabras, deseas que el bloque try tenga xito, pero si no es as, deseas que el control pase al bloque catch. Si alguna instruccin dentro del bloque try (o en una funcin llamada desde dentro del bloque try) arroja una excepcin, el control inmediatamente cambia al bloque catch. Si no se lanza ninguna excepcin en el bloque try, se omite el bloque catch. El bloque finalmente se ejecuta despus de que se ejecutan los bloques try y catch, pero antes de las declaraciones que siguen a la declaracin try...catch.

El siguiente ejemplo usa una instruccin try...catch. El ejemplo llama a una funcin que recupera el nombre de un mes de un arreglo en funcin del valor pasado a la funcin. Si el valor no corresponde a un nmero de mes (1-12), se lanza una excepcin con el valor "InvalidMonthNo" y las declaraciones en el bloque catch establezca la variable monthName en 'unknown'.

function getMonthName(mo) {
  mo = mo - 1; // Ajusta el nmero de mes para el ndice del arreglo (1 = Ene, 12 = Dic)
  let months = [
    "Ene",
    "Feb",
    "Mar",
    "Abr",
    "May",
    "Jun",
    "Jul",
    "Ago",
    "Sep",
    "Oct",
    "Nov",
    "Dic",
  ];
  if (months[mo]) {
    return months[mo];
  } else {
    throw "InvalidMonthNo"; // aqu se usa la palabra clave throw
  }
}

try {
  // declaraciones para try
  monthName = getMonthName(myMonth); // la funcin podra lanzar una excepcin
} catch (e) {
  monthName = "unknown";
  logMyErrors(e); // pasar el objeto exception al controlador de errores (es decir, su propia funcin)
}

El bloque catch

Puedes usar un bloque catch para manejar todas las excepciones que se puedan generar en el bloque try.

catch (catchID) {
  instrucciones
}

El bloque catch especifica un identificador (catchID en la sintaxis anterior) que contiene el valor especificado por la expresin throw. Puedes usar este identificador para obtener informacin sobre la excepcin que se lanz.

JavaScript crea este identificador cuando se ingresa al bloque catch. El identificador dura solo la duracin del bloque catch. Una vez que el bloque catch termina de ejecutarse, el identificador ya no existe.

Por ejemplo, el siguiente cdigo lanza una excepcin. Cuando ocurre la excepcin, el control se transfiere al bloque catch.

try {
  throw "myException"; // genera una excepcin
} catch (err) {
  // declaraciones para manejar cualquier excepcin
  logMyErrors(err); // pasa el objeto exception al controlador de errores
}

El bloque finally

El bloque finally contiene instrucciones que se ejecutarn despus que se ejecuten los bloques try y catch. Adems, el bloque finally ejecuta antes el cdigo que sigue a la declaracin try...catch...finally.

Tambin es importante notar que el bloque finally se ejecutar independientemente de que se produzca una excepcin. Sin embargo, si se lanza una excepcin, las declaraciones en el bloque finally se ejecutan incluso si ningn bloque catch maneje la excepcin que se lanz.

Puedes usar el bloque finally para hacer que tu script falle correctamente cuando ocurra una excepcin. Por ejemplo, es posible que debas liberar un recurso que tu script haya inmovilizado.

El siguiente ejemplo abre un archivo y luego ejecuta declaraciones que usan el archivo. (JavaScript de lado del servidor te permite acceder a los archivos). Si se lanza una excepcin mientras el archivo est abierto, el bloque finally cierra el archivo antes de que falle el script. Usar finally aqu asegura que el archivo nunca se deje abierto, incluso si ocurre un error.

openMyFile();
try {
  writeMyFile(theData); // Esto puede arrojar un error
} catch (e) {
  handleError(e); // Si ocurri un error, manjalo
} finally {
  closeMyFile(); // Siempre cierra el recurso
}

Si el bloque finally devuelve un valor, este valor se convierte en el valor de retorno de toda la produccin de trycatchfinally, independientemente de las declaraciones return en los bloques try y catch:

function f() {
  try {
    console.log(0);
    throw "bogus";
  } catch (e) {
    console.log(1);
    return true; // esta declaracin de retorno est suspendida
    // hasta que el bloque finally se haya completado
    console.log(2); // no alcanzable
  } finally {
    console.log(3);
    return false; // sobrescribe el "return" anterior
    console.log(4); // no alcanzable
  }
  // "return false" se ejecuta ahora
  console.log(5); // inalcanzable
}
console.log(f()); // 0, 1, 3, false

La sobrescritura de los valores devueltos por el bloque finally tambin se aplica a las excepciones lanzadas o relanzadas dentro del bloque catch:

function f() {
  try {
    throw "bogus";
  } catch (e) {
    console.log('captura "falso" interno');
    throw e; // esta instruccin throw se suspende hasta
    // que el bloque finally se haya completado
  } finally {
    return false; // sobrescribe el "throw" anterior
  }
  // "return false" se ejecuta ahora
}

try {
  console.log(f());
} catch (e) {
  // esto nunca se alcanza!
  // mientras se ejecuta f(), el bloque `finally` devuelve false,
  // que sobrescribe el `throw` dentro del `catch` anterior
  console.log('"falso" externo capturado');
}

// Produce
// "falso" interno capturado
// false

Declaraciones try...catch anidadas

Puedes anidar una o ms declaraciones try...catch.

Si un bloque try interno no tiene un bloque catch correspondiente:

1. debe contener un bloque finally, y
2. el bloque catch adjunto de la declaracin try...catch se comprueba para una coincidencia.

Para obtener ms informacin, consulta bloques try anidados en la una pgina de referencia try...catch.

Utilizar objetos Error

Dependiendo del tipo de error, es posible que puedas utilizar las propiedades name y message para obtener un mensaje ms refinado.

La propiedad name proporciona la clase general de Error (tal como DOMException o Error), mientras que message generalmente proporciona un mensaje ms conciso que el que se obtendra al convertir el objeto error en una cadena.

Si ests lanzando tus propias excepciones, para aprovechar estas propiedades (por ejemplo, si tu bloque catch no discrimina entre tus propias excepciones y las del sistema), puedes usar el constructor Error.

Por ejemplo:

function doSomethingErrorProne() {
  if (ourCodeMakesAMistake()) {
    throw (new Error('El mensaje'));
  } else {
    doSomethingToGetAJavascriptError();
  }
}

try {
  doSomethingErrorProne();
} catch (e) {               // AHORA, en realidad usamos `console.error()`
  console.error(e.name);    // registra 'Error'
  console.error(e.message); // registra 'The message' o un mensaje de error de JavaScript
}

• Anterior
• Siguiente