{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pt\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, eu fiz de novo: depura\u00e7\u00e3o de erros comuns em JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\n\u00c0s vezes, escrever c\u00f3digo JavaScript pode ser desafiador e, em outras ocasi\u00f5es, at\u00e9 mesmo assustador, algo familiar para muitos desenvolvedores. Durante o trabalho, erros inevitavelmente surgem, e alguns deles ocorrem com frequ\u00eancia. Este artigo, voltado para desenvolvedores iniciantes, aborda esses erros e como resolv\u00ea-los. Para melhor clareza, os nomes das fun\u00e7\u00f5es, propriedades e objetos foram extra\u00eddos de uma can\u00e7\u00e3o popular<\/a><\/noindex>. Tudo isso ajuda a memorizar rapidamente como corrigir erros comuns.
\n<\/a><\/noindex><\/p>\n

Lembramos:<\/b> para todos os leitores do \u00abHabr\u00bb \u2014 desconto de 10.000 rublos na inscri\u00e7\u00e3o em qualquer curso Skillbox com o c\u00f3digo promocional \u00abHabr\u00bb.<\/i><\/p>\n

A Skillbox recomenda:<\/b> Curso Pr\u00e1tico \u2018Desenvolvedor M\u00f3vel PRO\u2019<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: propriedade indefinida<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"chora, chora, chora em seu cora\u00e7\u00e3o solit\u00e1rio\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nO exemplo de c\u00f3digo acima gera o erro Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. O problema \u00e9 que o objeto girl n\u00e3o possui a propriedade named, embora tenha a propriedade name. E como a propriedade girl.named n\u00e3o est\u00e1 definida, n\u00e3o \u00e9 poss\u00edvel acess\u00e1-la, uma vez que formalmente n\u00e3o existe. Mas se voc\u00ea substituir girl.named.lucky por girl.name, tudo funcionar\u00e1 e o programa retornar\u00e1 Lucky.<\/p>\n
Mais informa\u00e7\u00f5es sobre propriedades podem ser lidos aqui<\/a><\/noindex>.<\/p>\n
Formas de corrigir erros TypeError<\/h3>\n
\nOs erros TypeError ocorrem quando um programador tenta realizar a\u00e7\u00f5es com dados que n\u00e3o correspondem a um tipo especificado. Um exemplo disso \u00e9 a utiliza\u00e7\u00e3o de .bold(), a solicita\u00e7\u00e3o de uma propriedade undefined ou a chamada de uma fun\u00e7\u00e3o que, na verdade, n\u00e3o \u00e9 uma fun\u00e7\u00e3o.<\/p>\n
Assim, se voc\u00ea tentar chamar girl (), aparecer\u00e1 o erro Uncaught TypeError: yourVariable.bold is not a function e girl is not a function, pois na verdade voc\u00ea est\u00e1 chamando um objeto e n\u00e3o uma fun\u00e7\u00e3o.<\/p>\n
Para corrigir os erros, \u00e9 necess\u00e1rio estudar as vari\u00e1veis. Assim, o que \u00e9 girl? E o que \u00e9 girl.named? Voc\u00ea pode descobrir isso analisando o c\u00f3digo, exibindo vari\u00e1veis com console.log, usando o comando debugger ou chamando o nome da vari\u00e1vel no console. \u00c9 preciso ter certeza de que \u00e9 poss\u00edvel operar o tipo de dados contido na vari\u00e1vel. Se n\u00e3o for adequado, altere-o; por exemplo, adicione uma condi\u00e7\u00e3o ou um bloco try..catch \u2014 e voc\u00ea ter\u00e1 controle sobre a execu\u00e7\u00e3o da opera\u00e7\u00e3o.<\/p>\n
Transbordamento de pilha<\/h3>\n
\nSe acreditarmos nos autores da can\u00e7\u00e3o Baby One More Time (sim, \u00e9 Britney Spears), a palavra hit neste contexto significa o desejo da cantora de receber um telefonema novamente (aqui uma explica\u00e7\u00e3o sobre o contexto da can\u00e7\u00e3o, nota do tradutor). \u00c9 bem poss\u00edvel que esse desejo leve a um aumento no n\u00famero de liga\u00e7\u00f5es na vida real. Mas na programa\u00e7\u00e3o, isso \u00e9 recurs\u00e3o, que pode levar a um erro em caso de estouro da pilha de chamadas.<\/p>\n
Os erros aparecem da seguinte forma:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nO estouro da pilha ocorre se o desenvolvedor n\u00e3o considerar o caso base na recurs\u00e3o ou se o c\u00f3digo n\u00e3o fizer refer\u00eancia ao caso previsto.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nNeste caso, stillBelieve nunca pode assumir o valor false, portanto, a fun\u00e7\u00e3o oneMoreTime ser\u00e1 chamada a cada vez, mas a execu\u00e7\u00e3o da fun\u00e7\u00e3o nunca ser\u00e1 conclu\u00edda.<\/p>\n
Se come\u00e7armos a contar com dois amigos, isso reduzir\u00e1 a loneliness (solid\u00e3o), e a liga\u00e7\u00e3o pode n\u00e3o ser mais esperada.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nUm exemplo pode ser casos com loops infinitos, onde o sistema n\u00e3o gera uma mensagem de erro, e a p\u00e1gina em que o c\u00f3digo JavaScript est\u00e1 sendo executado simplesmente congela. Isso acontece se o loop while n\u00e3o tiver uma condi\u00e7\u00e3o de t\u00e9rmino.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nO problema pode ser resolvido da seguinte forma:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Depura\u00e7\u00e3o de loops infinitos e recurs\u00f5es<\/h3>\n
\nSe voc\u00ea encontrar um problema com um loop infinito, no Chrome ou Edge, feche a aba, enquanto no Firefox, feche a janela do navegador. Depois disso, \u00e9 necess\u00e1rio analisar o c\u00f3digo com aten\u00e7\u00e3o. Se n\u00e3o conseguir encontrar o problema, adicione o comando debugger ao loop ou fun\u00e7\u00e3o e verifique o valor das vari\u00e1veis. Se o resultado n\u00e3o corresponder ao esperado, substitua-o, o que pode ser feito facilmente.<\/p>\n
No exemplo acima, o debugger deve ser adicionado como a primeira linha da fun\u00e7\u00e3o ou do loop. Depois, \u00e9 necess\u00e1rio abrir a aba de depura\u00e7\u00e3o no Chrome e analisar as vari\u00e1veis no escopo. Com o bot\u00e3o next, \u00e9 poss\u00edvel rastrear as mudan\u00e7as a cada itera\u00e7\u00e3o. Fazer tudo isso \u00e9 simples, e na maioria das vezes o problema est\u00e1 localizado.<\/p>\n
Voc\u00ea pode ler mais sobre tudo isso aqui (para Chrome<\/a><\/noindex>) e aqui (para Firefox<\/a><\/noindex>).<\/p>\n
Erro de sintaxe<\/h3>\n
\nUm dos erros mais comuns em JavaScript \u00e9 o SyntaxError. Extens\u00f5es do editor de texto podem ajudar a evit\u00e1-los. Por exemplo, o Bracket Pair Colorizer destaca os par\u00eanteses no c\u00f3digo com diferentes cores, e o Prettier ou ferramentas de an\u00e1lise semelhantes permitem localizar rapidamente os erros. A melhor estrat\u00e9gia para reduzir a probabilidade de SyntaxError \u00e9 minimizar a complexidade da aninhagem.<\/p>\n
Compartilhe nos coment\u00e1rios: o que voc\u00ea faz para evitar cometer erros ou detect\u00e1-los e corrigi-los rapidamente?<\/p>\n
A Skillbox recomenda:<\/b><\/p>\n