Oops, I did it again: debug common javascript errors

Sometimes writing JavaScript code is difficult, and sometimes it just scares, which is familiar to many developers. In the course of work, errors inevitably occur, some of which recur frequently. The article, designed for novice developers, talks about these errors and how to solve them. For clarity, the names of functions, properties and objects are taken from a popular song . All this helps to quickly remember how to fix common mistakes.

We remind: for all readers of "Habr" - a discount of 10,000 rubles when writing to any Skillbox course on the promotional code "Habr".

Skillbox recommends: Practical course "Mobile Developer PRO" .

TypeError: property undefined

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) 

The sample code above gives an Uncaught TypeError error: Cannot read property 'lucky' of undefined. The problem is that the girl object has no named property, although it has a name property. And since the girl.named property is not defined, it is impossible to access it, because formally it does not exist. But if you replace girl.named.lucky with girl.name, then everything will work and the program will return Lucky.
')
Read more about the properties here .

Methods for Troubleshooting TypeError Errors

TypeError errors appear when a programmer tries to perform actions on data that does not correspond to a specific type. As an example, you can take the use of .bold (), a request for the undefined property, or a function call that is not really a function.

So, if you try to call girl (), you will get an Uncaught TypeError error: yourVariable.bold is not a function and girl is not a function, because the object is actually called, not the function.

In order to eliminate errors, you need to examine the variables. So what is a girl? What is girl.named? You can find out if you analyze the code, display variables using console.log with, using the debugger command, or calling the variable name in the console. You need to make sure that it is possible to operate with the data type that is contained in the variable. If it does not fit, change it, for example, add a condition or a try..catch block — and get control over the execution of the operation.

Stack overflow

If you believe the authors of the words of the song Baby One More Time (this is Britney Spears, aha), then the word hit in this context means the singer's desire to be called again (here the explanation of the context of the song itself - comment of the translator). It may well be that this desire will lead to an increase in the number of calls in real life. But in programming, this is a recursion that can cause an error if the call stack is full.

Errors are as follows:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

A stack overflow occurs if the developer did not consider the base case in recursion, or if the code does not address the intended case.

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

In this case, stillBelieve can never be set to false, so oneMoreTime will be called each time, but the function will not end.

If you start to hope for two friends, it will reduce loneliness (loneliness), and you will not have to wait for the call.

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

As an example, there are cases with infinite loops, when the system does not give an error message, and the page on which the JavaScript code is executed just hangs. This happens if the while loop does not have a termination condition.

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

You can solve the problem as follows:

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

Debugging infinite loops and recursions

If you have a problem with an infinite loop, in Chrome or Edge you need to close the tab, and in Firefox - the browser window. After that, you need to carefully analyze the code. If the problem cannot be found, add the debugger command to the loop or function and check the value of the variables. If the result is not as expected, then replace it, it can be done easily.

In the example above, debugger should be added with the first line of a function or loop. Then you need to open the debug tab in Chrome, analyzing the variables in the scope. Using the next button, you can track their change with each iteration. Make it all simple, and in most cases the problem lies.

More details about all this can be found here ( for Chrome ) and here ( for Firefox ).

Syntax error

One of the most common JavaScript errors is SyntaxError. Text editor extensions will help to avoid them. So, Bracket Pair Colorizer notes the brackets in the code in different colors, and Prettier or similar analysis tool allows you to quickly find errors. The best option to reduce the likelihood of a SyntaxError is minimal nesting.

Share in the comments: what do you do to avoid mistakes or quickly find and eliminate them?

Skillbox recommends:

• Two-year practical course "I am a web developer PRO" .
• Online course "C # developer with 0" .
• Practical annual course "PHP developer from 0 to PRO" .