{"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\/en\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: debugging common errors in JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nSometimes writing JavaScript code can be challenging, and for many developers, it can even be intimidating. Throughout the development process, errors inevitably arise, and some of them tend to repeat frequently. This article is aimed at beginner developers and discusses these errors and their solutions. To illustrate, the names of functions, properties, and objects are taken from a popular song<\/a><\/noindex>. All of this helps to quickly remember how to fix common mistakes.
\n<\/a><\/noindex><\/p>\n

Reminder:<\/b> for all readers of 'Habr' - a discount of 10,000 rubles when enrolling in any Skillbox course with the promo code 'Habr'.<\/i><\/p>\n

Skillbox recommends:<\/b> Practical Course \"Mobile Developer PRO\"<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: property is undefined<\/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
\nThe above code sample throws the error Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. The problem is that the girl object does not have a named property, although it does have a name property. And since the girl.named property is undefined, it cannot be accessed, as it formally does not exist. However, if we replace girl.named.lucky with girl.name, everything will work and the program will return Lucky.<\/p>\n
Learn more about properties read here<\/a><\/noindex>.<\/p>\n
Ways to fix TypeError errors<\/h3>\n
\nTypeError errors occur when a programmer attempts to perform actions with data that do not match a specified type. For example, this can happen when using .bold(), accessing an undefined property, or calling a function that is actually not a function.<\/p>\n
So, if you try to call girl (), you will encounter the error Uncaught TypeError: yourVariable.bold is not a function and girl is not a function, since an object is actually being called, not a function.<\/p>\n
To resolve errors, you need to study the variables. So, what is girl? And what is girl.named? You can find out by analyzing the code, outputting the variables using console.log, the debugger command, or by calling the variable name in the console. You need to ensure that you can operate with the data type contained in the variable. If it doesn't fit, modify it, for example, by adding a condition or using a try..catch block \u2014 and you will gain control over the execution of the operation.<\/p>\n
Stack overflow<\/h3>\n
\nIf we believe the authors of the song Baby One More Time (that's Britney Spears, yes), the word hit in this context means the singer's desire to be called again (this provides clarification about the song's context, \u2014 translator's note). It's quite possible that this desire will lead to an increased number of calls in real life. However, in programming, this refers to recursion, which can cause an error in case of a stack overflow.<\/p>\n
Errors appear as follows:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nA stack overflow occurs if the developer did not account for the base case in recursion or if the code does not handle the intended case.<\/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
\nIn this case, stillBelieve can never be false, so oneMoreTime will be called every time, but the function will never complete.<\/p>\n
If you start hoping for two friends, it will reduce loneliness, and the call may not be needed.<\/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
\nAn example can be made with infinite loops, where the system does not provide an error message, and the page running the JavaScript simply hangs. This happens if the while loop does not have a termination condition.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nThe problem can be solved as follows:<\/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
Debugging Infinite Loops and Recursion<\/h3>\n
\nIf there is a problem with an infinite loop, in Chrome or Edge, you need to close the tab, and in Firefox \u2014 the browser window. After that, carefully analyze the code. If you cannot find the problem, it's advisable to add the debugger command in the loop or function and check the values of the variables. If the result does not match what is expected, replace it, which can be easily done.<\/p>\n
In the example mentioned above, the debugger should be added as the first line of a function or loop. Then, you need to open the debug tab in Chrome and analyze the variables in the scope. Using the next button allows you to track their changes during each iteration. It's all quite simple, and in most cases, the problem is found.<\/p>\n
You can read more about all this here (for Chrome<\/a><\/noindex>) and here (for Firefox<\/a><\/noindex>).<\/p>\n
Syntax error<\/h3>\n
\nOne of the most common errors in JavaScript is SyntaxError. You can avoid them with text editor extensions. For example, Bracket Pair Colorizer highlights brackets in the code with different colors, while Prettier or a similar analysis tool allows you to quickly find errors. The best way to reduce the likelihood of encountering SyntaxError is minimal nesting.<\/p>\n
Share in the comments: what do you do to avoid making mistakes or to quickly detect and fix them?<\/p>\n
Skillbox recommends:<\/b><\/p>\n