As mensagens de erro mais comuns em JavaScript e como resolvê-las

Texto de: Cristina Leandro

Introdução

Uma coisa a qual nenhum programador está imune são os erros. Eles acontecem de várias maneiras diferentes, por vários motivos diferentes, em todas as linguagens de programação e em todos os sistemas operacionais. Por isso, este artigo não só aborda alguns erros comuns em JavaScript como também traz soluções práticas para eles.

SyntaxError: Unexpected token

Esse erro ocorre quando o interpretador encontra um token inesperado em seu código, dai, unexpected token. Token é o nome dado para a menor unidade de texto que o JavaScript entende como parte do código, como parênteses, chaves, vírgulas, etc. e normalmente esse erro tem como causa algo como um colchete mal colocado ou um erro de sintaxe. Exemplo:

function calcularMedia(notas) {  //Essa função calcula a média de um array de notas.
// A linha abaixo chama a função soma() para pegar a soma das notas e dividir pelo número de notas.
    return soma(notas) / notas.length; 
}

// Aqui é exibido a média das notas fornecidas como um array.
console.log(calcularMedia([8, 9, 7])));

Neste exemplo, ao fechar os parênteses na chamada da função console.log, foi “fechado” um parêntese a mais. Isso gera um erro “SyntaxError: Unexpected token” devido ao parêntese inesperado.

Sendo assim, a solução para 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 a digitação do código esteja correta.

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

ReferenceError

Not Defined

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 foi declarado uma constante 'saudacao' com o valor 'Olá, mundo!'

aqui temos nossa const saudacao,

//Exibindo a saudação no console
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 aconteceu foi que a variável saudacao começa com letra minúscula, mas na hora de chamar usamos a primeira letra maiúscula. Esses 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 foi realmente declarada.

Not Defined com erro de escopo

Esse erro também pode aparecer devido a conflitos no escopo:

function funcaoUm() {
    const variavelUm = "Variável 01";
}

function funcaoDois() {
    // Tentativa incorreta de acessar uma variável declarada em outro escopo.
    console.log(variavelUm); // Isso vai gerar um erro ReferenceError.
}

funcaoUm();
funcaoDois(); 

Nesse exemplo, a função funcaoUm declara a variável variavelUm, mas a função funcaoDois tenta acessar ela fora do escopo em que ela foi definida. Isso também resulta em um “ReferenceError” porque a variável não é acessível a partir do escopo da função funcaoDois.

Ponto e vírgula

Além disso, se você já verificou erros de, sintaxe, declaração e escopo, e a mensagem persistir, adicione os pontos e vírgulas se tem o hábito de não adicionar. Exemplo:

let a = 2 //Declarada variável "a"
let b = 4 //Declarada variável "b"

//troca de valores para que a variável "a" tenha o valor de "b" e vice versa
[a, b] = [b, a]

//exibindo no console
console.log(a, b) 

Executando o código acima o output mostra um erro de referência:

ReferenceError: Cannot access 'b' before initialization

Isso acontece porque o uso de ponto e vírgula é opcional em JavaScript, pois a linguagem faz a inserção automática do ponto e vírgula, mas para isso ela segue algumas regras. O erro do código está na falta do ponto e vírgula que não foi adicionado automaticamente pela linguagem. Corrigindo:

let a = 2;
let b = 4;

[a, b] = [b, a];

console.log(a, b);

//output: 4 2 

Por isso, mesmo que o JavaScript não exija, é uma boa prática fazer o uso correto de ponto e vírgula. Dessa forma você não tem nenhuma “surpresa”.

TypeError

cannot read properties of undefined (reading <nome>)

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 função console.log, é feita uma tentativa de acessar o endereço e a rua, propriedades que não foram definidas e, portanto, o output exibirá a mensagem:

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

Para consertar isso, basta simplesmente adicionar as propriedades que deseja 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

Outro exemplo do mesmo erro, mas agora, no contexto de função:

// Definindo uma função chamada 'calcularArea' que recebe um objeto 'retangulo' como parâmetro.
function calcularArea(retangulo) { 
    // A função calcula a área multiplicando a largura pelo comprimento e retorna o resultado.
    return retangulo.largura * retangulo.altura;
}

// Chamando a função calcularAread e a exibindo no console
console.log(calcularArea()); 

Ao chamar a função calcularArea a seguinte mensagem é mostrada no console:

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

Isso acontece porque a função calcularArea está sendo chamada sem receber nenhum parâmetro. Portanto, o parâmetro retângulo é indefinido e quando é feita a tentativa de acessar suas propriedades de largura e altura, a mensagem de erro aparece. 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.

<nome> 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; //Declarando a variavel meuNumero
console.log(meuNumero()) //Chamando a variavel 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, é criada uma função que utiliza como parâmetro a variável meuNumero.

//implementando a função quadrado que recebe um número como parâmetro
function quadrado(numero){
    return numero * numero  //retornando o número multiplicado por ele mesmo
}

let meuNumero = 10;  //declarando  variável meuNumero

console.log(quadrado(meuNumero))  
//chamando a função quadrado usando meuNumero como parâmetro e exibindo no console 

E seu output:

100

Conclusão

Em resumo, compreender e saber lidar com as mensagens de erro em qualquer linguagem é fundamental para quem programa. Esses erros são uma parte comum da programação, e à medida que você ganha experiência, eles se tornam menos intimidantes.