{"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\/es\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, lo hice otra vez: depurando errores comunes en JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nA veces, escribir c\u00f3digo en JavaScript es complicado, y otras veces puede resultar intimidante, algo que muchos desarrolladores conocen bien. Durante el proceso de trabajo, inevitablemente surgen errores, y algunos de ellos ocurren con frecuencia. Este art\u00edculo, dirigido a desarrolladores principiantes, aborda estos errores y las formas de solucionarlos. Para mayor claridad, los nombres de funciones, propiedades y objetos se han tomado de una canci\u00f3n popular<\/a><\/noindex>. Todo esto ayuda a recordar r\u00e1pidamente c\u00f3mo corregir errores comunes.
\n<\/a><\/noindex><\/p>\n

Recordamos:<\/b> para todos los lectores de \u00abHabr\u00bb \u2014 un descuento de 10,000 rublos al registrarse en cualquier curso de Skillbox usando el c\u00f3digo promocional \u00abHabr\u00bb.<\/i><\/p>\n

Skillbox recomienda:<\/b> Curso pr\u00e1ctico \u00abDesarrollador M\u00f3vil PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: propiedad no definida<\/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 \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nEl ejemplo de c\u00f3digo mencionado anteriormente genera el error Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. El problema es que el objeto girl no tiene la propiedad named, aunque s\u00ed tiene la propiedad name. Dado que la propiedad girl.named no est\u00e1 definida, no se puede acceder a ella, ya que formalmente no existe. Pero si se reemplaza girl.named.lucky por girl.name, funcionar\u00e1 y el programa devolver\u00e1 Lucky.<\/p>\n
M\u00e1s sobre las propiedades se puede leer aqu\u00ed<\/a><\/noindex>.<\/p>\n
M\u00e9todos para resolver errores TypeError<\/h3>\n
\nLos errores TypeError ocurren cuando un programador intenta realizar acciones con datos que no corresponden al tipo definido. Como ejemplo, se puede considerar el uso de .bold(), solicitar una propiedad undefined o llamar a una funci\u00f3n que en realidad no es una funci\u00f3n.<\/p>\n
As\u00ed, si se intenta llamar a girl (), aparecer\u00e1 el error Uncaught TypeError: yourVariable.bold is not a function y girl is not a function, ya que en realidad se est\u00e1 llamando a un objeto y no a una funci\u00f3n.<\/p>\n
Para solucionar errores, es necesario examinar las variables. As\u00ed, \u00bfqu\u00e9 es girl? \u00bfY qu\u00e9 es girl.named? Esto se puede averiguar analizando el c\u00f3digo, imprimiendo las variables usando console.log con el comando debugger o llamando el nombre de la variable en la consola. Debe asegurarse de que se puede operar con el tipo de dato que contiene la variable. Si no es adecuado, c\u00e1mbielo, por ejemplo, a\u00f1adiendo una condici\u00f3n o un bloque try..catch \u2014 y obtendr\u00e1 control sobre la ejecuci\u00f3n de la operaci\u00f3n.<\/p>\n
Desbordamiento de pila<\/h3>\n
\nSi creemos a los autores de la canci\u00f3n Baby One More Time (es Britney Spears, \u00bfverdad?), la palabra hit en este contexto significa el deseo de la cantante de que le llamen una vez m\u00e1s (esto es una aclaraci\u00f3n del contexto de la canci\u00f3n, nota del traductor). Es muy posible que este deseo provoque un aumento en la cantidad de llamadas en la vida real. Pero en programaci\u00f3n, esto es recursi\u00f3n, que puede provocar un error en caso de desbordamiento de la pila de llamadas.<\/p>\n
Los errores aparecen de la siguiente manera:<\/p>\n
Error: Fuera del espacio de la pila (Edge)
\nInternalError: demasiada recursi\u00f3n (Firefox)
\nRangeError: Se excedi\u00f3 el tama\u00f1o m\u00e1ximo de la pila de llamadas (Chrome)
\n <\/i>
\nEl desbordamiento de la pila ocurre si el desarrollador no tom\u00f3 en cuenta el caso base en la recursi\u00f3n o si el c\u00f3digo no se refiere al 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
\nEn este caso, stillBelieve nunca puede ser false, por lo que cada vez se llamar\u00e1 a oneMoreTime, pero la ejecuci\u00f3n de la funci\u00f3n nunca se completar\u00e1.<\/p>\n
Sin embargo, si comenzamos a confiar en dos amigos, esto reducir\u00e1 la soledad, y la llamada podr\u00eda no ser necesaria.<\/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
\nComo ejemplo, se pueden dar casos de bucles infinitos, cuando el sistema no muestra un mensaje de error y la p\u00e1gina donde se ejecuta el c\u00f3digo JavaScript simplemente se congela. Esto ocurre si un bucle while no tiene una condici\u00f3n de salida.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Sigue bailando hasta que el mundo acabe\")\n}<\/code><\/pre>\n
\nLa soluci\u00f3n al problema se puede hacer de la siguiente manera:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Sigue bailando hasta que el mundo acabe\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Depuraci\u00f3n de bucles infinitos y recursiones<\/h3>\n
\nSi hay un problema con un bucle infinito, en Chrome o Edge es necesario cerrar la pesta\u00f1a, y en Firefox, la ventana del navegador. Despu\u00e9s de esto, se debe analizar minuciosamente el c\u00f3digo. Si no se logra encontrar el problema, se recomienda agregar el comando debugger en el bucle o funci\u00f3n y verificar el valor de las variables. Si el resultado no coincide con lo esperado, se reemplaza; esto se puede hacer f\u00e1cilmente.<\/p>\n
En el ejemplo mencionado anteriormente, el depurador debe a\u00f1adirse como la primera l\u00ednea de la funci\u00f3n o el ciclo. Luego, hay que abrir la pesta\u00f1a de depuraci\u00f3n en Chrome y analizar las variables en el \u00e1mbito. Con el bot\u00f3n 'next', se pueden rastrear sus cambios en cada iteraci\u00f3n. Hacer todo esto es sencillo y, en la mayor\u00eda de los casos, el problema se encuentra.<\/p>\n
Para leer m\u00e1s sobre todo esto, puedes consultar aqu\u00ed (para Chrome<\/a><\/noindex>) y aqu\u00ed (para Firefox<\/a><\/noindex>).<\/p>\n
Error de sintaxis<\/h3>\n
\nUno de los errores m\u00e1s comunes en JavaScript es el SyntaxError. Las extensiones del editor de texto pueden ayudar a evitarlos. Por ejemplo, Bracket Pair Colorizer resalta los par\u00e9ntesis en el c\u00f3digo de diferentes colores, mientras que Prettier o una herramienta de an\u00e1lisis similar permite encontrar errores r\u00e1pidamente. La mejor opci\u00f3n para reducir la probabilidad de un SyntaxError es mantener una m\u00ednima profundidad de anidamiento.<\/p>\n
Comparte en los comentarios: \u00bfqu\u00e9 haces para evitar errores o detectarlos y solucionarlos r\u00e1pidamente?<\/p>\n
Skillbox recomienda:<\/b><\/p>\n