Try Catch no JavaScript e a Programação Defensiva

Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Try Catch no JavaScript e a Programação Defensiva

Nesta aula, eu quero te ensinar como utilizar Try Catch no JavaScript para melhorar a programação defensiva!

O bloco Try Catch nada mais é do que uma estrutura que nos permite tentar executar um bloco de código e, caso não consiga, podemos inserir uma informação ou outro bloco de código para rodar. Essa prática é importante para que você, além de entender que ocorreu um erro, saiba qual foi o erro ocorrido.

Vou te mostrar o passo a passo de como implementar essa estrutura no JavaScript e como ela pode ajudar a melhorar sua programação defensiva. Então, faça o download do material disponível e vem comigo!

Apresentação do Projeto e do Código

Para visualizarmos como a estrutura Try Catch funciona no JavaScript, vamos utilizar o nosso projeto com a tabela de classificação dos pilotos da Fórmula 1 de 2023, o qual viemos trabalhando nas últimas aulas.

Caso você não tenha acompanhado essas aulas, pode voltar para conferir como construímos esse projeto do zero, ou fazer o download do material disponível nessa aula e utilizá-lo para compreender como o try catch no JavaScript funciona.

Dentro desse projeto, temos nosso código front-end que faz uma requisição para o nosso back-end e obtém as informações dos pilotos através de uma API utilizando a biblioteca Axios.

async function popularTabelaComDadosLista(idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);
  const listaDeDadosPilotos = (
    await axios.get('http://localhost:3000/api/v1/drivers')
  ).data;
  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr class='${
      numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
    }'>
        <td class="text-center py-4">${numeroElemento + 1}</td>
        <td class="text-center py-4">${dadosPiloto.name}</td>
        <td class="text-center py-4">${dadosPiloto.team}</td>
        <td class="text-center py-4">${dadosPiloto.points}</td>
      </tr>`;
    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

popularTabelaComDadosLista('corpo-tabela');

Acontece que dentro do nosso código estamos lidando como se a requisição para obter os dados estivesse garantida, como se nada de errado pudesse acontecer.

Na prática, isso não é assim; precisamos estar sempre preparados para lidar com erros e falhas que possam estar surgindo dentro do nosso código. Para isso, utilizamos a programação defensiva.

Programação Defensiva

A programação defensiva tem como objetivo antecipar e lidar com esses possíveis erros e falhas que possam ocorrer.

Através da programação defensiva, criamos estruturas capazes de capturar, informar e lidar com os erros que possam vir a acontecer durante a execução do código. Isso torna nosso programa mais confiável.

Estrutura Try Catch

O try catch é uma estrutura que utilizamos para envolver um bloco de código que pode apresentar um possível erro, adicionando a essa estrutura uma maneira de capturar e lidar com esse erro.

Essa é uma estrutura bastante intuitiva, pois seus nomes indicam exatamente o que elas podem fazer: o bloco try vem do inglês “tentar“, e o catch vem de “capturar“.

Então, no exemplo do nosso projeto, vamos utilizar o bloco try para envolver toda a estrutura dentro da função popularTabelaComDadosLista, que é onde podemos ter uma falha.

Caso ele tente executar e não consiga, ou seja, caso haja algum erro, vamos capturar esse erro através do bloco catch e vamos visualizar esse erro através da função console.log.

async function popularTabelaComDadosLista(idCorpoTabela) {
  try{
    const corpoTabela = document.getElementById(idCorpoTabela);
    const listaDeDadosPilotos = (
      await axios.get('http://localhost:3000/api/v1/drivers')
    ).data;
    listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
      const novaLinhaTabela = `<tr class='${
        numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
      }'>
          <td class="text-center py-4">${numeroElemento + 1}</td>
          <td class="text-center py-4">${dadosPiloto.name}</td>
          <td class="text-center py-4">${dadosPiloto.team}</td>
          <td class="text-center py-4">${dadosPiloto.points}</td>
        </tr>`;
      corpoTabela.innerHTML += novaLinhaTabela;
    });
  } catch(erro){
    console.log(erro);
  }
}

popularTabelaComDadosLista('corpo-tabela');

Por exemplo, executando nosso código com a execução do back-end interrompida, a nossa tabela não será carregada.

E acessando a guia de desenvolvedor do navegador (pressionando F12), podemos visualizar no console o erro que ocasionou esse problema.

Dessa forma, é possível utilizar essas informações para tratar e solucionar esse erro.

Bloco Finally

Por fim, também podemos implementar em nossos códigos o bloco finally. Essa é uma estrutura que será executada independentemente do sucesso ou falha das operações no bloco try.

async function popularTabelaComDadosLista(idCorpoTabela) {
  try{
    const corpoTabela = document.getElementById(idCorpoTabela);
    const listaDeDadosPilotos = (
      await axios.get('http://localhost:3000/api/v1/drivers')
    ).data;
    listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
      const novaLinhaTabela = `<tr class='${
        numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
      }'>
          <td class="text-center py-4">${numeroElemento + 1}</td>
          <td class="text-center py-4">${dadosPiloto.name}</td>
          <td class="text-center py-4">${dadosPiloto.team}</td>
          <td class="text-center py-4">${dadosPiloto.points}</td>
        </tr>`;
      corpoTabela.innerHTML += novaLinhaTabela;
    });
  } catch(erro){
    console.log(erro);
  } finally {
    console.log('Função acabou de ser executada');
  }
}

popularTabelaComDadosLista('corpo-tabela');

Dessa forma, a mensagem “Função acabou de ser executada” será exibida no nosso log independentemente se o bloco try catch apresentou ou não erro.

O bloco finally é a parte final e também muito importante para uma boa programação defensiva.

Conclusão – Try Catch no JavaScript e a Programação Defensiva

Na aula de hoje, eu te mostrei como realizar programação defensiva no JavaScript e qual a importância dela para identificar erros e manter o bom funcionamento do seu código.

Vimos como implementar a estrutura Try Catch no JavaScript, como essa estrutura funciona e de que modo ela auxilia na sua programação defensiva.

Desse modo, você está preparado para melhorar a escrita de seus códigos, identificar possíveis falhas e tratá-las adequadamente para ter um código completo e funcional.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.