Olá, Cod3rs! Tudo tranquilo? Como deve ter visto pelo título, hoje falaremos sobre as mensagens de erro mais comuns e JavaScript e o que você pode fazer para solucionar.

É super normal, quando se está iniciando, e até mesmo quando já programa há um tempinho, receber aquelas mensagens no seu output. E, por mais frustrante que seja, ao entender um pouco sobre, passa a fazer parte e você não trava mais.

Vamos separar os tópicos pelos tipos de erro, sendo o primeiro:

SyntaxError: Unexpected token

É um erro bem comum em JavaScript, e ele ocorre quando o interpretador encontra um “token” inesperado em seu código, dai, unexpected token. Isso pode ser causado por vários problemas, como um ponto e vírgula ausente, um colchete mal colocado ou um erro de sintaxe.

Sendo assim, a primeira coisa que você deve fazer ao perceber esse erro é verificar se há erros de sintaxe. Certifique-se de que todos os colchetes, parênteses e outros elementos de sintaxe estejam nos devidos lugares e que você não tenha digitado incorretamente nenhuma palavra-chave.

Adicione os pontos e vírgulas se tem o hábito de não adicionar. O que rola é que a linguagem faz a adição automaticamente no fim das sentenças, sem que você tenha que se preocupar colocando manualmente. Para isso, o JavaScript tem algumas regras, sobre quando adicionar e quando não adicionar, e, como toda regra tem uma exceção, pode ser que, dessa vez, tenha sido uma exceção. Por isso, você deverá então adicionar manualmente.

Você também deve  ter certeza se há colchetes no lugar errado. Um colchete mal colocado também pode gerar essa mensagem de erro. Tenha certeza de que todos os colchetes estejam devidamente combinados e fechando no seu código.

Para evitar esse erro, você também deve sempre atualizar sua versão do JavaScript. Pode ocorrer de alguns elementos de sintaxe não estarem disponíveis em versões mais antigas do JavaScript, e, ao tentar usá-los você acaba recebendo a mensagem de Unexpected token.

ReferenceError

Outro erro bem comum em JavaScript. Ele ocorre quando você tenta fazer referência a uma variável ou uma função que não existe ou não foi definida. Isso pode acontecer em forma de uma variável ou função que, mesmo que você tenha declarado, você escreveu errado na hora de chamar. 

Vejamos um exemplo no código:

const saudacao = 'Olá, mundo!'

aqui temos nossa const saudacao,

console.log(Saudacao)

Usamos o console.log para exibir no output a mensagem de saudação, mas, ao invés, recebemos o erro:

ReferenceError: Saudacao is not defined

O que rolou foi que a variável saudacao começa com letra minúscula mas na hora de chamar usamos a primeira letra maiúscula.

Esses pequenos detalhes muitas vezes passam despercebidos e acabam gerando esse erro. Para resolver, é bem simples:

  •  Verifique se tudo está escrito da forma correta.
  • Tenha certeza que sua variável ou função realmente foi declarada.
  • E faça questão também de verificar o escopo, por vezes, você não irá conseguir acessar uma variável pois ela foi declarada em um escopo diferente do qual você está chamando.

TypeError: Cannot read properties of undefined (nome da propriedade)

Esse erro ocorre quando você tenta acessar a propriedade de uma variável ou de um objeto que não foi definido. Vejamos um exemplo abaixo:

let meuObj = {
    nome: "João Pedro",
    idade: 19
};
 
console.log(meuObj.endereco.rua);

Aqui temos o meuObj e dentro dele temos as propriedades: nome e idade.  Na linha 5, tentamos acessar o endereço e a rua, propriedades que não foram definidas e, portanto, o meu output exibirá a mensagem:

TypeError: Cannot read properties of undefined (reading 'rua')

Para consertar isso, eu posso simplesmente adicionar as propriedades que eu estou tentando acessar e que ainda não existem:

let meuObj = {
    nome: "João Pedro",
    idade: 19,
    endereco:{
        rua: "Avenida 1",
        bairro: "Santa Rosa"
    }
};


console.log(meuObj.endereco.rua);

E agora, o output exibirá:

Avenida 1

Vamos dar uma olhada em outro exemplo, mas agora, no contexto de função.

function calcularArea(retangulo) {
    return retangulo.largura * retangulo.altura;
}


console.log(calcularArea());

Aqui temos a função calcularArea, que, ao ser chamada, exibe a seguinte mensagem no console:

TypeError: Cannot read properties of undefined (reading 'largura')

Isso acontece porque estamos chamando a função calcularArea sem passar nenhum parâmetro. Portanto, o parâmetro retângulo é indefinido e, quando tentamos acessar suas propriedades de largura e altura, obtemos esse erro.

A solução para isso é definir as propriedades: .

function calcularArea(retangulo) {
    return retangulo.largura * retangulo.altura;
}
 
let meuRetangulo = {
    largura: 10,
    altura: 15
}
console.log(calcularArea(meuRetangulo));

Aqui criamos o objeto meuRetangulo que tem as propriedades largura e altura, dessa forma, ao chamar a função e passar meuRetangulo como parâmetro, a função será executada sem erros.

Sempre verifique se tudo foi escrito corretamente e se o escopo está correto.

TypeError: undefined is not a function

Outro tipo de TypeError. Esse erro geralmente ocorre quando você tenta chamar uma função em um valor que é indefinido ou não é uma função. Por exemplo:

let meuNumero = 10;
console.log(meuNumero())

aqui, o output exibe:

TypeError: meuNumero is not a function

Isso ocorre porque a variável meuNumero realmente não é uma função, é sempre importante se atentar aos detalhes e verificar os tipos de dados com o qual se está trabalhando.

Solucionando esse erro, criamos uma função que utiliza como parâmetro esse número que tinhamos.

function quadrado(numero){
    return numero * numero
}


let meuNumero = 10;
console.log(quadrado(meuNumero))

E seu output:

100

Sem erros.

Conclusão

No decorrer deste artigo, vimos quais são os tipos de erros mais comuns em JavaScript, vimos seus exemplos e entendemos como solucioná-los.