How JavaScript Code is executed? ❤️& Call Stack | Namaste JavaScript Ep. 2

Akshay Saini

5 chapters6 takeaways10 key terms5 questions

Overview

This video explains the fundamental process of how JavaScript code is executed within the JavaScript engine. It details the creation and lifecycle of Execution Contexts, which are essential for running any JavaScript code. The explanation covers the two main phases of Execution Context creation: the Memory Creation Phase (where variables and functions are allocated memory) and the Code Execution Phase (where the code is actually run and values are assigned). It further elaborates on how function invocations lead to the creation of new, nested Execution Contexts and how the Call Stack is used to manage these contexts, ensuring the correct order of execution and deletion.

How was this?

Save this permanently with flashcards, quizzes, and AI chat

Chapters

Every JavaScript program runs within an Execution Context.
An Execution Context is like a container that holds information about the environment in which JavaScript code is evaluated.
It is crucial for understanding how JavaScript code behaves.
The global scope of a JavaScript program has a Global Execution Context.

Understanding Execution Contexts is the first step to demystifying how JavaScript code actually runs, moving beyond just writing code to understanding its underlying mechanics.

When you run a JavaScript program, a Global Execution Context is created.

Execution Contexts are created in two distinct phases: Memory Creation (or Creation Phase) and Code Execution Phase.
During the Memory Creation Phase, JavaScript scans the code and allocates memory for all variables and functions. Variables are assigned a placeholder value of `undefined`, while functions have their entire code stored.
During the Code Execution Phase, JavaScript runs the code line by line, assigning actual values to variables and executing functions.

Knowing these two phases helps explain why variables might be `undefined` before they are assigned a value and how functions are available even before their definition in some cases.

In the Memory Creation Phase, a variable `n` is allocated memory and assigned `undefined`. In the Code Execution Phase, `n` is later assigned the value `2`.

When a function is invoked, a new, separate Execution Context is created specifically for that function call.
This new context also goes through the same two phases: Memory Creation and Code Execution.
Parameters passed to a function are handled during the Memory Creation Phase of the new context, and arguments are passed from the calling context.
Upon function completion, its Execution Context is deleted, and control returns to the calling context.

This explains how JavaScript handles multiple functions running simultaneously or sequentially, managing their own scopes and variables independently.

When `square(n)` is called, a new Execution Context is created for `square`, with its own memory for `num` and `ans`.

JavaScript uses a Call Stack to manage the order of Execution Contexts.
The Global Execution Context is at the bottom of the stack when the program starts.
Each time a function is invoked, its Execution Context is pushed onto the top of the stack.
When a function finishes executing, its context is popped off the stack, and control returns to the context below it.
The Call Stack ensures that functions are executed and completed in the correct order.

The Call Stack is fundamental to understanding program flow, error handling (like stack overflow errors), and how asynchronous operations are managed in JavaScript.

When `square(2)` is called, its Execution Context is pushed onto the Call Stack above the Global Execution Context. When it returns, its context is popped off.

The Call Stack is known by several other names, including Execution Context Stack, Program Stack, Control Stack, and Runtime Stack.
Once all functions have finished executing and their contexts have been popped off the stack, the Call Stack becomes empty.
The JavaScript program then terminates.

Recognizing these different names helps learners avoid confusion when encountering various resources and documentation about JavaScript execution.

After `square4` returns its value and its context is popped, the Call Stack is empty, signifying the end of the JavaScript program.

Key takeaways

1JavaScript code execution is managed by Execution Contexts, which are created for global code and each function call.
2The two-phase creation process (Memory Creation and Code Execution) is key to understanding variable initialization and code running.
3Function invocations create new, nested Execution Contexts, each with its own memory and code execution scope.
4The Call Stack is the mechanism JavaScript uses to keep track of and manage the order of these nested Execution Contexts.
5When a function completes, its Execution Context is removed from the Call Stack, returning control to the previous context.
6Understanding the Call Stack helps in debugging and comprehending JavaScript's execution flow, especially with complex or asynchronous code.

Key terms

Execution ContextGlobal Execution ContextMemory Creation PhaseCode Execution PhaseUndefinedFunction InvocationCall StackExecution Context StackPopPush

Test your understanding

1What are the two main phases involved in the creation of a JavaScript Execution Context, and what happens in each phase?
2How does JavaScript manage the creation and deletion of Execution Contexts when functions are called within other functions?
3What is the primary role of the Call Stack in JavaScript execution?
4Why is it important to understand the concept of `undefined` during the Memory Creation Phase of an Execution Context?
5How does the Call Stack ensure that code is executed in the correct order, especially when multiple functions are involved?