Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

A call stack is a structure that is used internally by the JavaScript engine to keep track of the piece of code that is currently executing. The call stack is simply a 

 data structure that aids in the execution of the JavaScript code by keeping track of currently executing code. You can also think of a call stack in JavaScript as a collection of execution contexts.

Before executing any JavaScript code, a global execution context is created and pushed on the call stack. This can be easily visualized using the debugger in the browser developer tools.

 keyword simply creates a breakpoint, forcing the debugger to stop at the line containing the 

 keyword. We will cover debugging in a later chapter.

Note that in the above image, before the execution of the 

 statement, there is something named "global" in the call stack. This is a global execution context that is created and pushed on the call stack before executing the code.

The label "global" is not important, and different browsers may use different labels to represent the global execution context in the call stack. For example, the debugger in the Google Chrome browser shows "(anonymous)" instead of "global." The above screenshot was taken using the Firefox browser.

After pushing the global execution context on the call stack, any function calls encountered during the execution of the code will lead to more entries in the call stack. For every function call, a new entry is added to the call stack before that function starts executing, and as soon as the function execution ends, that entry is popped off the stack.
Consider the following code:

function bar() {
  console.log("hello world");
}

function baz() {
  bar();
}

function foo() {
  baz();
}

foo();

Before the execution of the above code, the global execution context is pushed on the call stack.

 function is called, a new entry is added to the call stack for the execution of the 

 function. So, another entry is pushed on the call stack for the 

Note that the top element in the call stack represents the currently executing piece of code. As soon as the 

 function execution ends, its entry in the call stack is removed. Ultimately, the code execution completes, and the call stack becomes empty.

You can run the code above in the Replit below to see the call stack in action:

The term "stack overflow" is a familiar term for every software developer, either because of every software developer's favorite website 

 or because of the stack overflow error due to infinite recursion.

We will be discussing the term "stack overflow" in the context of the call stack. The call stack has a fixed size and can contain a limited number of entries.

So what happens if we create a function that just calls itself?

Remember what happens when a function is called? A new entry is added to the call stack. In the case of the above function that just calls itself and never finishes executing, we are just adding the new entries in the call stack without ever removing any entries. This is infinite recursion, and this leads to an error known as 

. This error is thrown when the call stack gets filled up to its limit and can no longer hold more entries.

---
title: Callstack
description: Explanation of what is a callstack and how it is used in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_01/lesson_01.10/Lesson-9-callstack
---

A call stack is a structure that is used internally by the JavaScript engine to keep track of the piece of code that is currently executing. The call stack is simply a [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)) data structure that aids in the execution of the JavaScript code by keeping track of currently executing code. You can also think of a call stack in JavaScript as a collection of execution contexts.

Before executing any JavaScript code, a global execution context is created and pushed on the call stack. This can be easily visualized using the debugger in the browser developer tools.

![global execution context pushed on the callstack](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.10/public/assets/global-execution-context.png)

:::note

The `debugger` keyword simply creates a breakpoint, forcing the debugger to stop at the line containing the `debugger` keyword. We will cover debugging in a later chapter.

:::

Note that in the above image, before the execution of the `console.log` statement, there is something named "global" in the call stack. This is a global execution context that is created and pushed on the call stack before executing the code.

:::note

The label "global" is not important, and different browsers may use different labels to represent the global execution context in the call stack. For example, the debugger in the Google Chrome browser shows "(anonymous)" instead of "global." The above screenshot was taken using the Firefox browser.

:::

After pushing the global execution context on the call stack, any function calls encountered during the execution of the code will lead to more entries in the call stack. For every function call, a new entry is added to the call stack before that function starts executing, and as soon as the function execution ends, that entry is popped off the stack.
Consider the following code:

Consider the following code:

```js
function bar() {
  console.log("hello world");
}

function baz() {
  bar();
}

function foo() {
  baz();
}

foo();
```

Before the execution of the above code, the global execution context is pushed on the call stack.

![callstack](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.10/public/assets/callstack-1.png)

As soon as the `foo` function is called, a new entry is added to the call stack for the execution of the `foo` function.

![callstack](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.10/public/assets/callstack-2.png)

The `foo` function contains a call to the `baz` function. So, another entry is pushed on the call stack for the `baz` function call.

![callstack](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.10/public/assets/callstack-3.png)

The `baz` function contains a call to the `bar` function. So, another entry is pushed on the call stack for the `bar` function call.

![callstack](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.10/public/assets/callstack-4.png)

Note that the top element in the call stack represents the currently executing piece of code. As soon as the `bar` function execution ends, its entry in the call stack is removed. Ultimately, the code execution completes, and the call stack becomes empty.

You can run the code above in the Replit below to see the call stack in action:

<ReplitEmbed src="https://replit.com/@newlineauthors/Lesson-9-callstack" />

## Stack overflow

The term "stack overflow" is a familiar term for every software developer, either because of every software developer's favorite website [stackoverflow](https://stackoverflow.com/) or because of the stack overflow error due to infinite recursion.

We will be discussing the term "stack overflow" in the context of the call stack. The call stack has a fixed size and can contain a limited number of entries.

So what happens if we create a function that just calls itself?

```js
function foo() {
  foo();
}
```

Remember what happens when a function is called? A new entry is added to the call stack. In the case of the above function that just calls itself and never finishes executing, we are just adding the new entries in the call stack without ever removing any entries. This is infinite recursion, and this leads to an error known as **stack overflow**. This error is thrown when the call stack gets filled up to its limit and can no longer hold more entries.
