Os erros são uma parte essencial do aprendizado e do uso de qualquer linguagem de programação. As mensagens de erro costumam ajudar a entender o que deu errado em algum lugar do seu código..

Embora algumas mensagens de erro sejam diretas e fáceis de entender, outras podem ser um pouco confusas quando você as vê.

Neste tutorial, vamos falar sobre um dos erros mais comuns do JavaScript – o erro “uncaught typeerror: cannot read property”.

No final deste tutorial, você deverá entender o que significa “uncaught typeerror: cannot read property”, as causas comuns desse erro e como corrigi-las.

O que significa “uncaught typeerror: cannot read property” no JavaScript?

O erro “uncaught typeerror: cannot read property” ocorre principalmente quando você tenta usar ou acessar uma variável undefined. Esse erro pode ocorrer tanto ao usar JavaScript vanilla quanto ao utilizar algum framework Javascript.

Você pode facilmente detectar erros enquanto codifica usando várias ferramentas de desenvolvimento como as ferramentas Chrome dev, e a ferramenta de teste da Kinsta com um clique para interceptar erros, testar seu código e muito mais.

Como corrigir o erro “uncaught typeerror: cannot read property” Erro no JavaScript

Nas seções a seguir, destacaremos algumas das causas do erro “uncaught typeerror: cannot read property” e como corrigi-las usando exemplos de código.

Como acessar uma propriedade de objeto com um valor indefinido

Nesta seção, discutiremos uma das possíveis causas do erro “uncaught typeerror: cannot read property” no JavaScript. Isso tem a ver com o acesso a uma propriedade objeto que ainda não está indefinida.

Aqui está um exemplo:

let person;

No código acima, criamos uma variável chamada person. A intenção é fazer desta variável um objeto com propriedades como name, age, hobby.

Supondo que você tenha se esquecido de criar essas propriedades, você receberá um erro quando tentar acessá-las. Será exibido o seguinte erro:

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Como pode ser visto acima, tentamos acessar a propriedade “name “, que não existe, e, portanto, recebemos um erro dizendo: “Uncaught TypeError: Cannot read properties of undefined (reading ‘name’)”.

Isso pode acontecer com qualquer pessoa, pois você pode esquecer de criar/adicionar propriedades ao seu objeto.

Vamos continuar e adicionar algumas propriedades ao objeto para corrigir o erro:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

No código acima, adicionamos a propriedade name, então, quando você tentar acessá-la, obterá o valor “John” retornado.

Acessando um elemento que não existe em um Array

Assim como observamos na última seção com objetos, você também receberá o erro “uncaught typeerror: cannot read property” se tentar acessar um elemento em um array que ainda não foi inicializado.

Aqui está um exemplo:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

No exemplo acima, tentamos acessar o primeiro elemento de um array chamado arr.

A array foi declarada, mas não inicializada – isso significa que nenhum elemento foi atribuído a ela ainda.

Para corrigir isso, adicionaremos elementos ao array antes de acessá-los. Ficaria assim:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Acesso a um Elemento DOM que não existe

Ao trabalhar com o Document Object Model (DOM) no JavaScript, você pode encontrar o erro “uncaught typeerror: cannot read property”.

Isso pode acontecer por diferentes razões, como erros ortográficos enquanto se refere ao elemento DOM, acessando um elemento que não existe, ou acessando um elemento antes que o DOM tenha sido carregado (falaremos sobre isso na próxima seção).

Nesta seção, você verá um exemplo que gera o erro “uncaught typeerror: cannot read property” ao acessar um elemento DOM inexistente.

Aqui está o código HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

No código acima, criamos um documento HTML básico com um elemento h1 com um ID de “content”.

Aqui está o código JavaScript:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

O código acima gera o erro “uncaught typeerror: cannot read property”, mesmo que pareça que fizemos tudo certo.

É bastante fácil perder o que está causando esse erro. Ele é gerado porque digitamos “constent” em vez de “content” ao fazer referência ao ID do elemento h1.

Ou seja, document.getElementById("constent"); ao invés de document.getElementById("content");.

O mesmo erro será gerado se você tentar fazer referência a um ID ou nome de classe que ainda não foi criado no DOM.

Para corrigir isso, você pode simplesmente verificar erros de digitação ou garantir que o elemento referenciado realmente exista no DOM.

Colocando o Elemento Script Above Other DOM Elements Within the Body Tag

Colocando o elemento script acima de outros elementos do DOM dentro da tag Body

Se você colocar o elemento script acima de qualquer outro elemento no corpo do seu documento HTML, o código JavaScript será executado antes do DOM ter sido carregado.

Isso significa que o JavaScript não terá nenhuma referência aos elementos do DOM porque ele não esperou que eles fossem carregados antes de executar.

Aqui está um exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

No código acima, colocamos o elemento script acima do elemento h1.

Aqui está o código JavaScript onde tentamos fazer referência ao elemento h1 usando seu ID:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Conforme esperado, o erro “uncaught typeerror: cannot read property” foi lançado porque o código JavaScript foi executado antes que o elemento h1 pudesse ser registrado no DOM.

Para corrigir esse problema, coloque sempre o elemento script antes da tag de fechamento body, ou seja, abaixo de todos os outros elementos do DOM no corpo do documento. Dessa forma, o script começará a ser executado após todos os elementos no DOM terem sido carregados.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Resumo

Erros são uma parte inevitável de um desenvolvedor. Embora possam causar frustração durante a codificação, eles também podem ser uma oportunidade de aprendizado e ajudar a dominar a linguagem de programação que você está utilizando.

Quando confrontado com um erro, é importante tentar compreender a mensagem de erro, pois fornecerá informações sobre por onde começar e o que corrigir. Além disso, entender esse tipo de erro específico poderá ajudá-lo a lidar com outras situações semelhantes no futuro.

Se você está construindo um site, há uma variedade de habilidades para aprender e muita prática necessária para usar essas habilidades de forma eficiente. O DevKinsta facilita o processo de design, desenvolvimento e implantação, tudo em sua máquina local. O DevKinsta é usado por mais de 25.000 desenvolvedores, web designers e freelancers. Experimente gratuitamente hoje mesmo.