reading-notes

Reading notes for Code Fellows!

---

Project maintained by William-Moreno Hosted on GitHub Pages — Theme by mattgraham

JS Debugging

---

Order of Execution

To find the source of an error, it helps to know how scripts are processed. The order in which statements are executed can be complex; some tasks cannot complete until another statement or function has been run:

2

function greetUser() {
 return 'Hello ' + getName();
}

3

function getName() {
 var name = 'Molly';
 return name;
}

1

var greeting = greetUser();

4

alert(greeting);

In the case above, the oder of execution is really :

• 1 - The greeting variable gets its value from the greetUser() function.
• 2 - greetUser() creates the message by combining the string 'Hello ' with the result of getName().
• 3 - getName() returns the name to greetUser().
• 2 - greetUser() now knows the name, and combines it with the string. It then returns the message to the statements that called it in step 1.
• 1 - The value of the greeting is stored in memory.
• 4 - This greeting variable is written to an alert box.

Execution Contexts

The JavaScript interpreter uses the concept of execution contexts. There is one global execution context. Each function creates a new execution context and these coorespond to variable scope.

Execution Context

Every script statement exists in one of three execution contexts:

1. Global Context - Code that is in the script, but not in a function. There is ony one global context in any page.
2. Function Context - Code that is being run within a function. Each function has its own function context.
3. Eval Context - Text is executed like code in an internal function called eval().

Variable Scope

The first two execution contexts correspond with the notion of scope:

1. Global Scope - If a variable is declared outside of a function, it can be used anywhere because it has global scope. If you do not use the var keyword when creating a variable, it is placed in global scope ( let, const ) 1 Function-Level Scope - When a variable is declared within a function, it can only be used within that function. This is because it has function-level scope.

The Stack

The JavaScript interpreter processes one line of code at a time. When a statement needs data from another function, it stacks (or piles) the new function on top of the current task.

Execution Context & Hoisting

Each time a script enter a new execution context, there are two phases of activity:

1. Prepare

   • The new scope is created
   • Variables, functions, and arguments are created

2. Execute

   • Now it can assign values to variables
   • Reference functions and run their code
   • Execute statements

Understanding these two phases helps to understanding the concept of hoisting which is what lets us:

-Call functions before they have been declared (if they were created using function declarations - not function expressions)

• Assign a value to a variable that has not yet been declared.

Understanding Scope

In the interpreter, each execution context has its own variables object. It holds the variables, functions, and parameters available within it. Each execution context can also access its parent’s variables object.

Understanding Errors and Error Objects

If a JavaScript statement generates an error, then it *throws an exception*. At that point, the interpreter stops and looks for exception-handling code. If it reaches the global context without finding any , it will have to terminate the script and create an Error object. Error objects can help us find where our mistakes are and browsers have tools to help us read them.

When an Error object is created, it will contain the following properties:

• name
• message
• fileNumber
• lineNumber

There are seven types of built-in error objects in JavaScript:

OBJECT	DESCRIPTION
Error	Generic error - the other errors are all based upon this error
SyntaxError	Syntax has not been followed
ReferenceError	Tried to reference a variable that is not declared/within scope
TypeError	An unexpected data type that cannot be coerced
RangeError	Numbers not in acceptable range
URIError	encodeURI(), decodeURI() and similar methods used incorrectly
EvalError	eval() function used incorrectly

JavaScript’s 7 Different Types of Errors Examples

1. Error
   • Generic error object
2. SyntaxError
   • Syntax is not correct
     • Mismatching or unclosed quotes
     • Missing closing bracket
     • Missing common in array
     • Malformed property name
3. ReferenceError Variable does not exist
   • Variable is undeclared
   • Named function is undefined
4. TypeError Value is unexpected data type
   • Incorrect case for document object
   • Incorrect case for write() method
   • Method does not exist
   • DOM node does not exist
5. RangeError
   • Number outside of range
     • Cannot create array with -1 items
     • Number of digits after decimal in toFixed() can only be 0-20
     • Number of digits in toPrecision() can only be 1-21
6. EvalError
   • Incorrect use of eval() function
7. URIError
   • Incorrect use of URI functions
     • Characters are not escaped.

Now that we know what an error is and how the browser treats them, there are two things we can do with the errors.

1. Debug the script to fix errors -If we come across an error while writing a script, we will need to debug the code, track down the source of the error, and fix it.
2. Handle the errors gracefully
   • We can handle errors gracefully using try, catch, throw, and finally statements.

Debugging is about deduction: eliminating potential causes of an error. Try to narrow down where the problem might be, then look for clues.

Where is the problem?

1. Look at the error message to see the type of error and which line number it happened in
2. Check how far the script is running
3. Use breakpoints where things are going wrong

What exactly is the problem?

1. When we have set breakpoints, we can see if the variables around them have the values we would expect them to. If not, we look earlier in the script
2. Break down / break out parts of the code to test smaller pieces of the functionality
3. Check the number of parameters for a function, or the number of items in an array.

Back to Main