Vaia, volvín facelo: depurando erros comúns en JavaScript

Escribir código JavaScript pode ser un reto e ás veces francamente intimidante, xa que moitos desenvolvedores están familiarizados. No proceso de traballo, xorden inevitablemente erros, e algúns deles repítense con frecuencia. Este artigo, dirixido a desenvolvedores novatos, fala sobre estes erros e como resolvelos. Para claridade, os nomes de funcións, propiedades e obxectos son tomados de canción popular. Todo isto axúdache a lembrar rapidamente como corrixir erros comúns.

Recordámolo: para todos os lectores de "Habr" - un desconto de 10 rublos ao inscribirse en calquera curso de Skillbox usando o código promocional "Habr".

Skillbox recomenda: Curso práctico "Desenvolvedor móbil PRO".

TypeError: a propiedade non 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 anterior mostra o erro TipoError non detectado: non se pode ler a propiedade 'lucky' de undefined. O problema é que o obxecto nena non ten unha propiedade nomeada, aínda que si ten unha propiedade nome. E como a propiedade girl.named non está definida, non pode acceder a ela, porque formalmente non existe. Pero se substitúes girl.named.lucky por girl.name, todo funcionará e o programa devolverá Lucky.

Podes aprender máis sobre as propiedades ler aquí.

Como resolver TypeErrors

Os erros de tipo ocorren cando un programador intenta realizar accións sobre datos que non coinciden cun tipo específico. Os exemplos inclúen usar .bold(), pedir unha propiedade indefinida ou chamar a unha función que non é realmente unha función.

Entón, se tentas chamar girl(), obterás o erro Uncaught TypeError: yourVariable.bold non é unha función e girl non é unha función, porque en realidade é un obxecto que se chama, non unha función.

Para eliminar erros, cómpre estudar as variables. Entón, que é unha nena? Como se chama nena? Podes descubrilo analizando o código, mostrando variables usando console.log, o comando depurador ou chamando ao nome da variable na consola. Debe asegurarse de que é posible operar co tipo de datos contido na variable. Se non encaixa, cámbiao, por exemplo, engade unha condición ou try..catch block - e obtén control sobre a execución da operación.

Desbordamento da pila

Se cres que os autores da letra da canción Baby One More Time (esta é Britney Spears, si), entón a palabra hit neste contexto significa o desexo da cantante de ser chamada de novo (aquí tes unha explicación do propio contexto do canción - nota do tradutor). Ben pode ser que este desexo leve a un aumento do número de chamadas na vida real. Pero na programación, esta é unha recursividade que pode causar un erro se a pila de chamadas se desborda.

Os erros teñen o seguinte aspecto:

Erro: sen espazo de pila (Edge)
InternalError: demasiada recursividade (Firefox)
RangeError: superouse o tamaño máximo da pila de chamadas (Chrome)

Prodúcese un desbordamento de pila se o programador non considera o caso base na recursividade ou se o código non aborda o caso previsto.

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

Neste caso, stillBelieve nunca pode ser falso, polo que se chamará oneMoreTime cada vez, pero a función nunca se completará.

Se comezas a confiar en dous amigos, isto reducirá a soidade e non terás que esperar unha chamada.

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

Un exemplo son os casos con bucles infinitos, cando o sistema non xera unha mensaxe de erro, pero a páxina na que se executa o código JavaScript simplemente se conxela. Isto ocorre se o bucle while non ten unha condición de terminación.

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

Podes resolver o problema do seguinte xeito:

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

Depurando bucles infinitos e recursividades

Se tes un problema de bucle infinito, debes pechar a pestana en Chrome ou Edge e pechar a xanela do navegador en Firefox. Despois diso, cómpre analizar coidadosamente o código. Se non atopa o problema, paga a pena engadir un comando depurador ao seu bucle ou función e comprobar os valores das variables. Se o resultado non se corresponde co esperado, entón substituímolo, isto pódese facer facilmente.

No exemplo anterior, debería engadirse o depurador como primeira liña da función ou do bucle. A continuación, cómpre abrir a pestana de depuración en Chrome, analizando as variables no ámbito. Usando o botón seguinte pode seguir os seus cambios en cada iteración. Todo isto é fácil de facer, e na maioría dos casos atópase o problema.

Podes ler máis sobre todo isto aquí (para cromo) e aquí (para Firefox).

Erro de sintaxe

Un dos erros máis comúns en JavaScript é SyntaxError. As extensións do editor de texto axudaranche a evitalas. Por exemplo, Bracket Pair Colorizer marca os corchetes no código con cores diferentes e Prettier ou unha ferramenta de análise similar permite atopar erros rapidamente. A mellor opción para reducir a probabilidade dun SyntaxError é o aniñamento mínimo.

Comparte nos comentarios: que fas para evitar erros ou detectalos e eliminalos rapidamente?

Skillbox recomenda:

• Curso práctico de dous anos "Son un programador web PRO".
• Curso en liña "Desenvolvedor C# desde 0".
• Curso práctico anual "Desenvolvedor PHP de 0 a PRO".

Fonte: www.habr.com