5 Cosas que Talvez no Sabías sobre try-catch-finally en JavaScript

Nube Colectiva

hace 5 años

En esta página:

Si has desarrollado proyectos con JavaScript, debes de saber que try-catch-finally se suelen usar para manejar errores de tiempo de ejecución y evitar que se detenga la ejecución la aplicación, pero hay ciertas cosas que se desconocen, quizás ya las conoces, pero este Post va para los Desarrolladores que quieren saber un poco más sobre try-catch-finally de JavaScript, vamos con el Post.

Antes de continuar, te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify:	Sound Cloud:

Bien ahora continuemos con el Post: 5 Cosas que Talvez no Sabías sobre try-catch-finally en JavaScript.

Las variables declaradas dentro de try no están disponibles en el catch o finally

Al usar let o const para declarar una variable dentro del try, esta variable no estará disponible para ser usada dentro de catch o finally, esto se debe a que las declaraciones de variables con let o const tienen un block-scoped (Alcance de bloque).

Por ejemplo voy a declara la variable stock usando let:


try {
   
    let stock = 36;
    throw "stock tiene un block scoped ";
} catch(e) {
    
    console.log("Catch realizada");
    console.log(stock); // Devuelve 'Reference a is no defined' o La referencia no esta definida 
}

try {

let stock = 36;

throw "stock tiene un block scoped ";

} catch(e) {

console.log("Catch realizada");

console.log(stock); // Devuelve 'Reference a is no defined' o La referencia no esta definida

}

Ahora si declaro la variable stock usando var, esta variable estará disponible para ser usada en catch, esto es porque var tiene un function scoped (alcance de función).


try {
   
    var stock = 36;
    throw "stock es un function scoped ";
} catch(e) {
    
    console.log("Catch realizada");
    console.log(stock); // Devuelve 36 
}

try {

var stock = 36;

throw "stock es un function scoped ";

} catch(e) {

console.log("Catch realizada");

console.log(stock); // Devuelve 36

}

try – catch no funciona con el método setTimeOut()

Cuando estas usando el método setTimeOut() de JavaScript y ocurre una excepción, pues try-catch no la detectará.


function miFuncion1() {
    // Código de error 
}
function miFuncion2() {
   try {
      setTimeout( miFuncion1 , 3000);
   } catch (e) {
      // Devuelvo en la consola el mensaje 'No ejecutado' para verificar 
      console.log( "No ejecutado" );
   }
}

function miFuncion1() {

// Código de error

}

function miFuncion2() {

try {

setTimeout( miFuncion1 , 3000);

} catch (e) {

// Devuelvo en la consola el mensaje 'No ejecutado' para verificar

console.log( "No ejecutado" );

}

Una solución es mover try-catch a la función miFuncion1:


function miFuncion1() {
   try {
     // Código de error 
   }catch
     console.log("Error recibido") ;
   }
}
function test() {
      setTimeout(miFuncion1, 3000);
}

function miFuncion1() {

try {

// Código de error

}catch

console.log("Error recibido") ;

}

function test() {

setTimeout(miFuncion1, 3000);

}

try o catch no pueden ejecutarse si hay un finally

Por ejemplo si tenemos una instrucción return dentro de un finally y también en un try, solo se ejecutará la instrucción del finally, el try no podrá ejecutarse:


function miFuncion() {
    try {
        return 46;
    } finally {
        console.log("Ejecuto el finally");
        return 23;
    }
}
console.log(miFuncion()); // La consola devuelve 23

function miFuncion() {

try {

return 46;

} finally {

console.log("Ejecuto el finally");

return 23;

}

console.log(miFuncion()); // La consola devuelve 23

Lo mismo pasa si agregamos catch:


function miFuncion() {
    try {
        return 46;
        throw "error"; // Esto no se ejecuta, se salta al 'finally' 
    } catch {
        console.log("catch");
        return 30;
    } finally {
        console.log("Ejecuto el finally");
        return 23;
    }
}
console.log(miFuncion()); // La consola devuelve 23

function miFuncion() {

try {

return 46;

throw "error"; // Esto no se ejecuta, se salta al 'finally'

} catch {

console.log("catch");

return 30;

} finally {

console.log("Ejecuto el finally");

return 23;

}

console.log(miFuncion()); // La consola devuelve 23

Agregar un controlador de error Global

Si colocamos un detector de eventos con window.onerror el cual se ejecutará en caso que un error sea detectado, pues esto no manejará el error, solamente lo detectará, veamos los siguientes casos:


window.onerror = function(e) {
   console.log("error obtenido", e);
}

function miFuncionConError() {
    //Escribo 'a': 
    a; 

    // Devuelve a is not defined (a no esta definido):
    console.log(a) 
}

function miOtraFuncion() {
    miFuncionConError();
    console.log("Hola Nube Colectiva"); // Esto no se ejecuta 
}
miOtraFuncion();

window.onerror = function(e) {

console.log("error obtenido", e);

}

function miFuncionConError() {

//Escribo 'a':

// Devuelve a is not defined (a no esta definido):

console.log(a)

}

function miOtraFuncion() {

miFuncionConError();

console.log("Hola Nube Colectiva"); // Esto no se ejecuta

}

miOtraFuncion();

Si queremos manejar los errores necesitamos crear nuestro try – catch para manejar el error:


window.onerror = function(e) {
    console.log("error obtenido", e);
}

function miFuncionConError() {

    a;
    console.log(a)

}

function miOtraFuncion() {

    // El try -catch Si ejecuta: 
    miFuncionConError();
    
    // El try -catch No ejecuta: 
    console.log("Hola Nube Colectiva");    
}

miOtraFuncion();

// Le paso try - catch a mi función 'miOtraFuncion' 
// Y obtengo 'a is not defined at miFuncionConError'  
try {
    throw new Error(miOtraFuncion);
} catch (e) {
    alert(e.message)
}

window.onerror = function(e) {

console.log("error obtenido", e);

}

function miFuncionConError() {

console.log(a)

}

function miOtraFuncion() {

// El try -catch Si ejecuta:

miFuncionConError();

// El try -catch No ejecuta:

console.log("Hola Nube Colectiva");

}

miOtraFuncion();

// Le paso try - catch a mi función 'miOtraFuncion'

// Y obtengo 'a is not defined at miFuncionConError'

try {

throw new Error(miOtraFuncion);

} catch (e) {

alert(e.message)

}

Capturar sin detalles de error

En ECMAScript 2019 el argumento para el catch es opcional:


try {
   // Código con error 
} catch { // // Opcional en ECMAScript 2019 
   // Código del catch 
}

try {

// Código con error

} catch { // // Opcional en ECMAScript 2019

// Código del catch

}

Conclusión

Puedes ver cosas interesante con try – catch, la mayoría de Desarrolladores ya conocen el punto cuatro de esta lista, porque es común su uso para manejar los errores. Hay otras cosas que podemos hacer con try – catch, si tu conoces algo que no esta en este Post, puedes compartirlo en los comentarios.

Nota

Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a JavaScript.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos