reading-notes

           Welcome to Read: 10

The Call Stack and Debugging

In this Read: 10, I will talk about those topics:

• Call stack.
• Debugging.
  

Call stack
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

• What It Is and Why It’s Necessary
  

  • An understanding of the call stack will give clarity to how “function hierarchy and execution order” works in the JavaScript engine. The call stack is primarily used for function invocation (call). Since the call stack is single, function(s) execution, is done, one at a time, from top to bottom. It means the call stack is synchronous.
    
    In Asynchronous JavaScript, we have a callback function, an event loop, and a task queue. The callback function is acted upon by the call stack during execution after the call back function has been pushed to the stack by the event loop.
    

• Temporarily store
  

  • When a function is invoked (called), the function, its parameters, and variables are pushed into the call stack to form a stack frame. This stack frame is a memory location in the stack. The memory is cleared when the function returns as it is pop out of the stack.
    

• In summary
  

  • The key takeaways from the call stack are:
    
    • It is single-threaded. Meaning it can only do one thing at a time.
      
    • Code execution is synchronous.
      
    • A function invocation creates a stack frame that occupies a temporary memory.
      
    • It works as a LIFO — Last In, First Out data structure.
      

Debugging
Debugging is the process of detecting and removing of existing and potential errors (also called as ‘bugs’) in a software code that can cause it to behave unexpectedly or crash.Sometimes it takes more time to debug a program than to code it.

• Types of error messages
  

  • Reference errors
    
    • This is as simple as when you try to use a variable that is not yet declared you get this type os errors.
      console.log(foo) // Uncaught ReferenceError: foo is not defined
    • This is also a common thing when using const and let, they are hoisted like var and function but there is a time between the hoisting and being declared so when you try to access them a reference error occurs, the fact that this happens to let and const is called Temporal Dead Zone (TDZ).
      foo = 'Hello' // Uncaught ReferenceError: foo is not defined let foo
  • Syntax errors
    
    • This occurs when you have something that cannot be parsed in terms of syntax, like when you try to parse an invalid object using JSON.parse.
      JSON.parse( {'foo': 'bar'} ) // Uncaught SyntaxError: Unexpected token o in JSON at position 1
  • Range errors
    
    • Try to manipulate an object with some kind of length and give it an invalid length and this kind of errors will show up..
      

        var foo= []
        foo.length = foo.length -1
        // Uncaught RangeError: Invalid array length
      

  • Type errors
    
    • This types of errors show up when the types (number, string and so on) you are trying to use or access are incompatible, like accessing a property in an undefined type of variable.
      

        var foo = {}
        foo.bar // undefined
        foo.bar.baz 
        // Uncaught TypeError: Cannot read property
         'baz' of undefined
      

• Debugging
  

  • To debug your JS code, the easiest and maybe the most common way its to simply console.log() the variables you want to check or, by using chrome developer tools, open your page with your JS code (press cmd+o in macOS or Ctrl+o in Windows) and choose your file to debug, click the line you wanna debug and refresh your page again (F5).
    If the line you selected was run you will be able to see what has happened before that point and you can try and evaluate the next lines to check if everything is outputting what you are expecting.
    The breakpoint can also be achieved by putting a debugger statement in your code in the line you want to break.
    

For further infromation about Call Stack please click here Or here.

For further infromation about Debugging please click here.

Read	Title	ToGo
Read: 01	SMACSS and Responsive Web Design
Read: 02	jQuery, Events, and The DOM
Read: 03	Flexbox and Templating
Read: 04	Responsive Web Design and Regular Expressions
Read: 05	Heroku Deployment
Read: 06	Node, Express, and APIs
Read: 07	APIs continued
Read: 08	SQL
Read: 09	Refactoring
Read: 10	The Call Stack and Debugging
Read: 11	EJS
Read: 12	Components
Read: 13	Update/Delete
Read: 14a	DB Normalization
Read: 15	Diversity and Inclusion