Às vezes, escrever código JavaScript pode ser desafiador e, em outras ocasiões, até mesmo assustador, algo familiar para muitos desenvolvedores. Durante o trabalho, erros inevitavelmente surgem, e alguns deles ocorrem com frequência. Este artigo, voltado para desenvolvedores iniciantes, aborda esses erros e como resolvê-los. Para melhor clareza, os nomes das funções, propriedades e objetos foram extraídos de . Tudo isso ajuda a memorizar rapidamente como corrigir erros comuns.
Lembramos: para todos os leitores do «Habr» — desconto de 10.000 rublos na inscrição em qualquer curso Skillbox com o código promocional «Habr».
A Skillbox recomenda: Curso Prático .
TypeError: propriedade indefinida
let girl = {
name: "Lucky",
location: "Hollywood",
profession: "star",
thingsMissingInHerLife: true,
lovely: true,
cry: function() {
return "chora, chora, chora em seu coração solitário"
}
}
console.log(girl.named.lucky)O exemplo de código acima gera o erro Uncaught TypeError: Cannot read property ‘lucky’ of undefined. O problema é que o objeto girl não possui a propriedade named, embora tenha a propriedade name. E como a propriedade girl.named não está definida, não é possível acessá-la, uma vez que formalmente não existe. Mas se você substituir girl.named.lucky por girl.name, tudo funcionará e o programa retornará Lucky.
Mais informações sobre propriedades podem ser .
Formas de corrigir erros TypeError
Os erros TypeError ocorrem quando um programador tenta realizar ações com dados que não correspondem a um tipo especificado. Um exemplo disso é a utilização de .bold(), a solicitação de uma propriedade undefined ou a chamada de uma função que, na verdade, não é uma função.
Assim, se você tentar chamar girl (), aparecerá o erro Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, pois na verdade você está chamando um objeto e não uma função.
Para corrigir os erros, é necessário estudar as variáveis. Assim, o que é girl? E o que é girl.named? Você pode descobrir isso analisando o código, exibindo variáveis com console.log, usando o comando debugger ou chamando o nome da variável no console. É preciso ter certeza de que é possível operar o tipo de dados contido na variável. Se não for adequado, altere-o; por exemplo, adicione uma condição ou um bloco try..catch — e você terá controle sobre a execução da operação.
Transbordamento de pilha
Se acreditarmos nos autores da canção Baby One More Time (sim, é Britney Spears), a palavra hit neste contexto significa o desejo da cantora de receber um telefonema novamente (aqui uma explicação sobre o contexto da canção, 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, isso é recursão, que pode levar a um erro em caso de estouro da pilha de chamadas.
Os erros aparecem da seguinte forma:
Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)
O estouro da pilha ocorre se o desenvolvedor não considerar o caso base na recursão ou se o código não fizer referência ao caso previsto.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}Neste caso, stillBelieve nunca pode assumir o valor false, portanto, a função oneMoreTime será chamada a cada vez, mas a execução da função nunca será concluída.
Se começarmos a contar com dois amigos, isso reduzirá a loneliness (solidão), e a ligação pode não ser mais esperada.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Um exemplo pode ser casos com loops infinitos, onde o sistema não gera uma mensagem de erro, e a página em que o código JavaScript está sendo executado simplesmente congela. Isso acontece se o loop while não tiver uma condição de término.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}O problema pode ser resolvido da seguinte forma:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Depuração de loops infinitos e recursões
Se você encontrar um problema com um loop infinito, no Chrome ou Edge, feche a aba, enquanto no Firefox, feche a janela do navegador. Depois disso, é necessário analisar o código com atenção. Se não conseguir encontrar o problema, adicione o comando debugger ao loop ou função e verifique o valor das variáveis. Se o resultado não corresponder ao esperado, substitua-o, o que pode ser feito facilmente.
No exemplo acima, o debugger deve ser adicionado como a primeira linha da função ou do loop. Depois, é necessário abrir a aba de depuração no Chrome e analisar as variáveis no escopo. Com o botão next, é possível rastrear as mudanças a cada iteração. Fazer tudo isso é simples, e na maioria das vezes o problema está localizado.
Você pode ler mais sobre tudo isso aqui () e aqui ().
Erro de sintaxe
Um dos erros mais comuns em JavaScript é o SyntaxError. Extensões do editor de texto podem ajudar a evitá-los. Por exemplo, o Bracket Pair Colorizer destaca os parênteses no código com diferentes cores, e o Prettier ou ferramentas de análise semelhantes permitem localizar rapidamente os erros. A melhor estratégia para reduzir a probabilidade de SyntaxError é minimizar a complexidade da aninhagem.
Compartilhe nos comentários: o que você faz para evitar cometer erros ou detectá-los e corrigi-los rapidamente?
A Skillbox recomenda:
- Curso Prático de Dois Anos .
- Curso online .
- Curso prático de um ano .
Fonte: habr.com
