Ops, fiz de novo: depurando erros comuns em JavaScript

Escrever código JavaScript pode ser desafiador e às vezes totalmente intimidante, como muitos desenvolvedores estão familiarizados. No processo de trabalho surgem inevitavelmente erros, e alguns deles se repetem com frequência. Este artigo, voltado para desenvolvedores iniciantes, fala sobre esses erros e como resolvê-los. Para maior clareza, os nomes das funções, propriedades e objetos são retirados de música popular. Tudo isso ajuda você a lembrar rapidamente como corrigir erros comuns.

Lembramos: para todos os leitores de "Habr" - um desconto de 10 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".

A Skillbox recomenda: curso prático "Desenvolvedor móvel PRO".

TypeError: propriedade não está definida

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

O código de exemplo acima gera o erro Uncaught TypeError: Cannot read property 'lucky' of undefined. O problema é que o objeto girl não possui uma propriedade nomeada, embora possua uma propriedade nome. E como a propriedade girl.named não está definida, você não pode acessá-la, pois formalmente ela não existe. Mas se você substituir girl.named.lucky por girl.name, tudo funcionará e o programa retornará Lucky.

Você pode aprender mais sobre as propriedades leia aqui.

Como resolver erros de tipo

TypeErrors ocorrem quando um programador tenta executar ações em dados que não correspondem a um tipo específico. Os exemplos incluem usar .bold(), solicitar uma propriedade indefinida ou chamar uma função que não é realmente uma função.

Portanto, se você tentar chamar girl(), receberá o erro Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, porque na verdade é um objeto sendo chamado, não uma função.

Para eliminar erros, é preciso estudar as variáveis. Então, o que é uma garota? O que é garota.nomeada? Você pode descobrir analisando o código, exibindo variáveis ​​usando console.log, o comando do depurador ou chamando o nome da variável no console. Você precisa ter certeza de que é possível operar no tipo de dados contido na variável. Se não couber, altere-o, por exemplo, adicione uma condição ou bloco try..catch - e obtenha controle sobre a execução da operação.

Estouro de pilha

Se você acredita nos autores da letra da música Baby One More Time (esta é Britney Spears, sim), então a palavra hit neste contexto significa o desejo da cantora de ser chamada novamente (aqui está uma explicação do próprio contexto da música - nota do tradutor). É bem possível que esse desejo leve a um aumento no número de ligações na vida real. Mas na programação, esta é uma recursão que pode causar um erro se a pilha de chamadas estourar.

Os erros são assim:

Erro: Sem espaço de pilha (Edge)
InternalError: muita recursão (Firefox)
RangeError: tamanho máximo da pilha de chamadas excedido (Chrome)

Um estouro de pilha ocorre se o desenvolvedor não considerar o caso base na recursão ou se o código não abordar o caso pretendido.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Nesse caso, stillBelieve nunca pode ser falso, então oneMoreTime será chamado todas as vezes, mas a função nunca será concluída.

Se você começar a contar com dois amigos, isso reduzirá a solidão e você não terá que esperar uma ligação.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Um exemplo são os casos de loops infinitos, quando o sistema não gera mensagem de erro, mas a página na qual o código JavaScript é executado simplesmente congela. Isso acontece se o loop while não tiver uma condição de encerramento.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Você pode resolver o problema da seguinte maneira:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Depurando loops infinitos e recursões

Se você tiver um problema de loop infinito, será necessário fechar a guia no Chrome ou Edge e fechar a janela do navegador no Firefox. Depois disso, você precisa analisar cuidadosamente o código. Se você não conseguir encontrar o problema, vale a pena adicionar um comando de depurador ao seu loop ou função e verificar os valores das variáveis. Se o resultado não corresponder ao esperado, então substituímos, isso pode ser feito facilmente.

No exemplo acima, o depurador deve ser adicionado como a primeira linha da função ou loop. Então você precisa abrir a aba de depuração no Chrome, analisando as variáveis ​​no escopo. Usando o próximo botão você pode acompanhar suas alterações em cada iteração. Tudo isso é fácil de fazer e na maioria dos casos o problema é encontrado.

Você pode ler mais sobre tudo isso aqui (para cromo) e aqui (para Firefox).

Erro de sintaxe

Um dos erros mais comuns em JavaScript é SyntaxError. As extensões do editor de texto ajudarão você a evitá-las. Por exemplo, o Bracket Pair Colorizer marca os colchetes no código com cores diferentes, e o Prettier ou uma ferramenta de análise semelhante torna possível encontrar erros rapidamente. A melhor opção para reduzir a probabilidade de um SyntaxError é o aninhamento mínimo.

Compartilhe nos comentários: o que você faz para evitar erros ou detectá-los e eliminá-los rapidamente?

A Skillbox recomenda:

• Curso prático de dois anos "Eu sou um desenvolvedor web PRO".
• Curso online "Desenvolvedor C# de 0".
• curso de ano prático "Desenvolvedor PHP do 0 ao PRO".

Fonte: habr.com