5 erros fatais de iniciantes em JavaScript (e como evitá-los)

Por que o JavaScript confunde a mente, mas não deve arruinar a carreira

JavaScript é, ao mesmo tempo, a linguagem de programação mais amigável e a mais traiçoeira. Por um lado, você escreve console.log('Hello') — e o resultado aparece imediatamente no navegador. Por outro, esse mesmo código pode de repente retornar undefined, NaN ou algo pior, e você passará uma hora procurando um erro que se esconde em uma única linha.

No pythonlib.ru, sabemos como é importante aprender com os erros dos outros. Neste artigo, analisaremos 5 erros típicos de iniciantes em JavaScript que transformam o código em abóbora. E o principal: mostraremos como corrigi-los. Vamos lá!

Erro nº1: O mágico "var" e a falta de compreensão do escopo

Muitos desenvolvedores iniciantes que estudam JavaScript usam var para declarar variáveis. Isso é um legado do antigo padrão ES5, que ainda vive em livros didáticos de dez anos atrás. Mas var é como um carro velho sem airbags: dá para dirigir, mas no primeiro acidente (leia-se: bug), você se machuca feio.

Qual é o problema?

var tem escopo de função, e não escopo de bloco. Isso significa que uma variável declarada dentro de um if ou for estará acessível fora deles.

// Exemplo: Erro com var\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — funciona, embora x tenha sido declarado dentro do if\n}\n\ntestVar();

Agora imagine que você tem 1000 linhas de código no seu projeto. Você declarou var i em um loop e, mais tarde, acidentalmente usa a mesma variável — você obtém um bug impossível de rastrear.

Como fazer corretamente?

Use let e const. Eles têm escopo de bloco e se comportam de forma previsível.

// Correto: let e const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

Dica: sempre use const por padrão. Apenas se a variável for reatribuída, use let. Deixe o var no passado, como os disquetes.

Erro nº2: A chave esquecida "this" — o contexto que se perde

A palavra-chave this em JavaScript é como uma surpresa em um ovo de chocolate: você nunca sabe o que vai sair. Iniciantes frequentemente pensam que this sempre se refere ao objeto atual. Mas não é assim. this depende de como a função é chamada, e não de onde ela é declarada.

Exemplo clássico: perda de contexto em um callback

const user = {\n  name: 'Ana',\n  greet: function() {\n    console.log('Olá, ' + this.name);\n  }\n};\n\nuser.greet(); // Olá, Ana — funciona\n\nsetTimeout(user.greet, 1000); // Olá, undefined — contexto perdido!

Por que isso acontece? Porque setTimeout chama a função como uma função comum, e não como um método do objeto. this, neste caso, refere-se ao objeto global (no navegador, window), que não possui name.

Como corrigir?

Três maneiras:

\n
• Função arrow — ela não cria seu próprio this, mas o pega do contexto externo.
\n
• Método .bind() — vincula o contexto permanentemente.
\n
• Armazenar uma referência a this (método antigo, é melhor não usar).
\n

// Correção: função arrow\nconst user = {\n  name: 'Ana',\n  greet: function() {\n    console.log('Olá, ' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // Olá, Ana\n\n// Ou com bind\nsetTimeout(user.greet.bind(user), 1000); // Olá, Ana

Erro nº3: Assincronicidade — "