Reading Code & Fixing Errors
Learn what different error messages mean, as well as how to read and fix code
Objective
Lecture
Strategy Guide How to fix errors
Overview
Fixing errors is a large part of software development. In fact, some development jobs are just about fixing errors . This guide is meant to assist you thought process of fixing errors, as well as expose you to common errors. Solving errors is arguable the most important part of coding.
Error Rules
DON’T GET FRUSTRATED. Errors are good. Yes, errors are good. They communicate what is wrong with our code. The worst case is when your code doesn’t work how you expect and you are not getting any errors. Be glad you have an error.
SEE RULE #1.
Start at the top of the error message. Sometimes your error message can be massive and overwhelming. Always start at the top because that first error could be a syntax error causing all the other errors.
Read the error message. Generally it will tell us what type of error we have and its location. After you read the message think what, how, and why is this error message coming up. Why would this variable be undefined? What code did I just change? How is this type of error thrown?
Lastly, google the error message. When searching for the error remove any specific variables to your case. For example in the image below remove names and search what is a reference error is not defined
A Common Error Message
In the above example, in the GREEN the Error Message is telling us we have a ReferenceError names is not defined. This line is what we would google. In this case names does not have a value when I am trying to use it. The location of the error is in YELLOW. home/unbuntu/workspace/fix-errors/lesson2.js:2:22. So the error is in the fix-errors folder and in the lesson2.js. The first number 2 is the line on the file and second number 22, is for character 22.
Error Types
Syntax Error
Syntax or format errors are a major problem for most beginning programmers. A syntax error occurs when the programmer fails to obey one of the grammar rules of the language. Typically this involves things like using the wrong case, putting punctuation where it’s not supposed to be or failing to put punctuation where it is supposed to be, etc.
Common Causes Include:
Javascript: Unclosed or not matching curly braces, brackets, quotes and parentheses { }, [ ], “ ” , ( )
HTML Unclosed or not matching element tags, <> </>
A simple typo in the middle of the code.
ReferenceError
Reference Errors simply means the program cannot access the variable.
Common Causes Include
Variable has not been created at that moment when the code reaches it.
Variable is out of scope
Type Errors
Type Errors occur when we try to access properties or methods that do not exist on a data type. An extremely common type error is “Cannot read property 'length' of undefined”. This error does not mean length is undefined, but rather that wherever we tried to use the .length property on a variable or data before it was defined. Undefined does not have any properties so trying to use .length or any property for that matter on undefined throws an error.
Common Causes Include
Variable is not defined or does not have a value yet
Trying to access a property or method that does not exist on this data type
Strategies to Fix Errors
If you are having a hard time of locating the exact location you can comment out blocks of your code until it runs. Then slowly uncomment out blocks of code. This is more useful when you have large files with lots of code.
Confirm what you believe with console.logs. Never assume your code works always check the flow of data and variables values with console.logs.
Prevention
We will never be able to fully prevent errors when we code, besides that would make coding too easy. It is very important to work slowly and confirm a function or block of code is working how you suspect before moving onto another part of the problem. Simple baby steps is the best way to prevent code errors.. We want to confirm each step mentally before moving on. It is also easier to fix your errors when you move slowly and double check your work. If you assume your function or block of code works without testing it and then you begin to write new code that uses that function or code, it can become quite difficult to track down the real errors. We want limit the amount of error possibilities to check and this can be prevented by just double checking your work before moving on.
Quiz: Errors
Challenge #2
Go over new code and be able to parse it
Review previous concepts and learn new ones
Learn how to find answers and research
Additional Resources
These resources are very helpful when you are trying to solve a problem or need to look up documentation.
Overview
Fixing errors is a large part of software development. In fact, some development jobs are just about fixing errors . This guide is meant to assist your thought process of fixing errors, as well as expose you to common errors. Solving errors is arguably the most important part of coding.
Error Rules
DON’T GET FRUSTRATED. Errors are good. Yes, errors are good. They communicate what is wrong with our code. The worst case is when your code doesn’t work how you expect and you are not getting any errors. Be glad you have an error.
SEE RULE #1.
Start at the top of the error message. Sometimes your error message can be massive and overwhelming. Always start at the top because that first error can be a syntax error causing all the other errors.
Read the error message. Generally it will tell us what type of error we have and its location. After you read the message think what, how, and why is this error message coming up. Why would this variable be undefined? What code did I just change? How is this type of error thrown?
Lastly, google the error message. The the Error Message Type.
A Common Error Message
Anatomy of the Error Message
In the above example, in the GREEN is the Error Message. The error message is communicating to us we have a: ReferenceError names is not defined. This line of our error message is what we would google but we would leave names out of the search, as that is a specific variable to our problem and we want to search for general problems and solutions. The important part is the type of error, which is listed first, in this case a ReferenceError. Other types of errors are Syntax Errors, Type Errors and Runtime Errors. The location of the error in the image above is in YELLOW. home/unbuntu/workspace/fix-errors/lesson2.js:2:22. So the error is in the fix-errors folder and in the lesson2.js file. The first number after the file location is the line there error is located in the file and the second number is the character on that line. So in this case we have an error in the fix-errors folder in the lesson2.js file on line number 2 at character number 2. The character location just means how far over in the line the error is located. The error in this case is names is not a declared variable, or not in the scope of our code when executed, so an error is thrown because the computer cannot find any variable to reference, hence the error type being a reference error.
Error Types
Syntax Error
Syntax or format errors are a major problem for most beginning programmers. A syntax error occurs when the programmer fails to obey one of the grammar rules of the language. Typically this involves things like using the wrong case, putting punctuation where it’s not supposed to be or failing to put punctuation where it is supposed to be, etc.
Common Causes Include:
Javascript: Unclosed or not matching curly braces, brackets, quotes and parentheses { }, [ ], “ ” , ( ) all of these need to be a matching pair.
HTML Unclosed or not matching element tags, <> </>
A simple typo in the middle of the code.
ReferenceError
Reference Errors simply means the program cannot find a variable or access the variable.
Common Causes Include:
Variable has not been created at that moment when the code is trying to use the variable..
Variable is out of scope
Type Errors
Type Errors occur when we try to access properties or methods that do not exist on a data type. An extremely common type error is “Cannot read property 'length' of undefined”. This error does not mean length is undefined, but rather that wherever we tried to use the .length property on a variable or data before it was defined. Undefined does not have any properties so trying to use .length or any property for that matter on undefined throws an error.
Common Causes Include
Variable is not defined or does not have a value yet
Trying to access a property or method that does not exist on this data type
Strategies to Fix Errors
If you are having a hard time of locating the exact location you can comment out blocks of your code until it runs. Then slowly uncomment out blocks of code. This is more useful when you have large files with lots of code.
Confirm what your knowledge with console.logs. Never assume your code works or a variable has a value always check the flow of data and variables values with console.logs.
Error Prevention
We will never be able to fully prevent errors when we code, besides that would make coding too easy. It is very important to work slowly and confirm a function or block of code is working how you expect before moving onto another part of the problem. Simple baby steps is the best way to prevent code errors. For example when assigning a variable a value, console.log the variable then run your code so we can confirm the following:
That code block, or function is even being executed
The variable is in scope or accessible to that function
The variable has the value you expect
Breaking problems down into the smallest possible steps. We want to confirm each step mentally using console.log() before moving on to write new code. It is also much easier to fix your errors when you move slowly and double check your work. If you assume your function or block of code works without testing it and then you begin to write new code that uses that function or code, it can become quite difficult to track down the real errors. We want limit the amount of error possibilities to check and this can be prevented by just double checking your work before moving on. Lastly write your syntax first handle the matching first before you code logic. For example all of these have matching pairs. { }, ( ), [ ] , ‘ ‘ , “ “ . Write the syntax first, then your logic. Make it a habit and you will not have to think about it and you can focus on the actual code problem and not syntax.
Last updated
