# 5.2: Errors
## Introduction
{% embed url="https://youtu.be/ySlMcE14Jvg" caption="" %}
Our programs will have errors. Errors are an intrinsic part of software development for everyone, not just beginners. What differentiates beginners from more-experienced engineers is the speed with which more-experienced engineers can triage and resolve errors.
Errors in our programs for Coding Basics will appear in the Chrome Dev Tools console. Access the console by going to the Chrome menu bar and selecting View &gt; Developer &gt; JavaScript Console. Open the console before loading our webpages, and keep the console open when running code in the browser to catch errors as early as possible.
There are 2 broad categories of errors: syntax and logical errors. We can use the console to fix both kinds.
## Syntax errors
These are errors where we will see red text in the console. Syntax errors can be divided into 2 kinds: compile-time and run-time errors.
### Compile-Time Syntax Errors
Compile-time syntax errors are errors that can be detected before our code runs. VSCode will point out these errors in VSCode before we run our programs by highlighting the error code with red squiggly lines. If we try to run programs with compile-time errors, the programs will not run and we will see the errors in the Chrome console.
In some other programming languages such as Java, C++, and C there is a specific compilation step before our code runs to translate human code to machine code. Languages such as JavaScript and Python are interpreted programs where there isn't a dedicated compilation step, but the terminology compile-time can still be used to refer to time after the program is written but before it is executed.
Let's introduce a syntax error into our program. Replace our `kilometersToMiles` function with the one below.
```javascript
var kilometersToMiles = function distanceInKilometers) {
  var distanceInMiles = distanceInKilometers * 0.62;
  return distanceInMiles;
};
```
You'll get the error: `Uncaught SyntaxError: Unexpected token ')'`. This may look cryptic, but once you see this error a few times \(and you likely will\) you'll understand what it is trying to tell you.
First of all, the console is helpfully telling us which line of our code the error is occurring on.
Specifically in this case the error was a missing parenthesis. Javascript knew because of the `function` keyword that a function was about to be defined. It was waiting for an opening left parenthesis. When it found a right parenthesis it knew that something was wrong.
There are specific rules why JavaScript might not detect that a left parenthesis \(`(`\) is missing instead of detecting that a right parenthesis \(`)`\) is incorrect. These rules are outside the scope of this course, but in practice, unfortunately, we as programmers will have to know that "I didn't expect a right parenthesis" implies we are missing a left parenthesis.
A significant amount of the feedback we will get from the computer will be these semi-cryptic messages about why our code is wrong.
### Run-Time Syntax Errors
Run-time syntax errors are syntax errors that are only detected _during_ when our programs are running. These types of errors are not possible in compiled languages because the entire program runs through a compiler before it can be executed. Because JavaScript is an interpreted language and code may only be read by the computer when it is executed, run-time syntax errors are common in JavaScript. Fortunately, we have VSCode to help us detect these errors before we run our programs.
Let's create a run-time syntax error.
```javascript
var myOutputValue = 'hello world'();
```
1. Replace the relevant line in the starter code with the line above.
2. Refresh the starter code page in the browser. Observe that there is no red text in the console.
3. Click the Submit button. We should see the error `Uncaught TypeError: "hello world" is not a function` in the browser console.
This error happens because there is a set of parentheses \(`()`\) instead of a semi-colon \(`;`\) after our `'hello world'` string. JavaScript interprets parentheses to mean we want to run a function. This error isn't too common, but notice that for this type of error, JavaScript didn't let us know until it tried to run the code.
## Logical errors
Logical errors are errors that arise from syntactically-valid code that does not _behave_ the way we want. These errors may not produce red console output because the program code does not have syntax errors.
### Debugging
Debugging is the process of diagnosing and fixing errors in our programs. The debugging process can be relatively straightforward. For syntax errors, our browser consoles output red error text. We can view the referenced line of code, interpret the error text, and fix our syntax. Debugging can become more complicated when diagnosing logical errors. Our code may run without errors, but its behaviour may be incorrect.
Here are 2 strategies to diagnose and correct errors.
1. Control-flow checking: Is our code running?
2. Value checking: Do the values in our variables match what we expect?
### console.log
`console.log` is a a crucial debugging tool in JavaScript that we will use for both control-flow checking and value checking. It is a function we can run to make text appear in the browser console. We pass the text we want to appear as a parameter to `console.log` like this: `console.log('bananas!')`.
Try adding `console.log` statements to different parts of your code. Each `console.log` should indicate where in the code it is. Try not to indicate the `console.log` position incorrectly!
### Control-Flow Checking: Is Our Code Running?
Control-flow checking means checking if relevant parts of our code are being executed. Function syntax allows us to execute code in a specific order, or not at all. If our programs seem incomplete or wrong even though we have coded relevant logic into the program, it's possible we forgot to execute the relevant function, or our conditional logic \(which we will learn in Module 6\) failed to trigger the relevant code.
We can use `console.log` statements verify whether our browser is executing the relevant code. If our `console.log` statements appear in the browser console, we know our browser is executing that code.
Replace our starter code with the following and verify that we are running the `kmToMiles` function.
```javascript
var kilometersToMiles = function (distanceInKilometers) {
  console.log('running km to miles function');
  var distanceInMiles = distanceInKilometers * 0.62;
};
var main = function (input) {
  var myOutputValue = kilometersToMiles(input);
  return myOutputValue;
};
```
### Value Checking: Are the Values Correct?
Value checking means verifying that the intermediate variable values in our program match our expectations. Another way we can use `console.log` is to pass it the variable values we wish to verify.
Replace our starter code with the following. Are the values in our program the ones we expect?
```javascript
var kilometersToMiles = function (distanceInKilometers) {
  var distanceInMiles = distanceInKilometers * 0.62;
  return distanceInMiles;
};
var main = function (input) {
  var myOutputValue = kilometersToMiles(input);
  console.log('myOutputValue');
  console.log(myOutputValue);
  return myOutputValue;
};
```
### **`console.log` Formatting**
Formatting our console output can help make it more visible and decipherable to ourselves.
A few tips:
1. Precisely describe each output by labelling our `console.log` statements, especially when we are `console.log`-ing variable values. Avoid generic labels like `number` or `output` and avoid repeating labels, which can obfuscate which variables are being logged.
2. Format output differently for visibility, using any formatting that helps you read output quickly and clearly. Special characters like `===`, `***`, or `###` can help output stand out. `=== DISTANCE IN KM ===` stands out more than `distance in km`.