reading-notes

The Call Stack and Debugging

Source: The Call Stack defined on MDN
Source: The JavaScript Call Stack - What It Is and Why It’s Necessary
Source: JavaScript error messages && debugging

Call stack

• Mechanism for an interpreter (browser / server) to keep track of its place when running code that calls multiple functions.

• Single threaded and syncronous

How it operates

Begin with empty call stack. When a function is invoked, its added. After it executed it’s removed. End with empty call stack.

LIFO (Last in, first out)

1. Function called
2. Added to call stack and operate
3. Nested functions added further up
4. When function completes, removed from stack and resume last
5. If stack takes up more space than assigned -> “Stack Overflow” (recursion issue)

Example

function greeting() {
   // [1] Some codes here
   sayHi();
   // [2] Some codes here
}
function sayHi() {
   return "Hi!";
}

// Invoke the `greeting` function
greeting();

// [3] Some codes here

Call stack

1. Reach greeting()
2. Add greeting() to call stack

    greeting
   

3. Execute greeting()
4. Reach sayHi() invocaton
5. Add sayHi() to call stack

    sayHi
    greeting
   

6. Execute sayHi()
7. Return to line that invoked sayHi() and compelete execution of greeting()
8. Delete sayHi() from call stack

    greeting
   

9. Return to line invoking greeting()
10. Delete greeting() from call stack

    EMPTY
    

Types of errors

• Reference error
  • Using a vairable thats not declared
• Syntax error
  • cannot be parsed with given sytax (e.g. bad JSON)
• Range error
  • Access / manipulate beyond array range
• Type error
  • Undefined, incompatiable type

Debugging

• Use console.log()
• Use dev tools in chrome
  • Use debugger: statement to see history
• VS Code debug
• Handle errors w/ try...catch