The JavaScript Call Stack - What It Is and Why It’s Necessary

What is a ‘call’?

The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter comprising of a heap and a single call stack. The browser provides web APIs like the DOM, AJAX, and Timers.

How many ‘calls’ can happen at once?

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.

What does LIFO mean?

When we say that the call stack, operates by the data structure principle of Last In, First Out, it means that the last function that gets pushed into the stack is the first to be pop out, when the function returns.

Draw an example of a call stack and the functions that would need to be invoked to generate that call stack.

[function firstFunction(){ throw new Error(‘Stack Trace Error’); }

function secondFunction(){ firstFunction(); }

function thirdFunction(){ secondFunction(); }

thirdFunction();]

When the code is run, we get an error. A stack is printed showing how the functions are stack on top each other. Take a look at the diagram.

What causes a Stack Overflow?

A stack overflow occurs when there is a recursive function (a function that calls itself) without an exit point. The browser (hosting environment) has a maximum stack call that it can accomodate before throwing a stack error.

JavaScript error messages

What is a ‘refrence error’?

This is as simple as when you try to use a variable that is not yet declared you get this type os errors.

What is a ‘syntax error’?

I know it’s in the name of the errors, but like it says itself, 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.

What is a ‘range error’?

Try to manipulate an object with some kind of length and give it an invalid length and this kind of errors will show up.

What is a ‘tyep error’?

Like the name indicates, 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.

What is a breakpoint?

The breakpoint can also be achieved by putting a debugger statement in your code in the line you want to break.

What does the word ‘debugger’ do in your code?

debugger statement and when running the code above you can see the “history” before reaching that breakpoint.