Summary

The web content provides an in-depth explanation of JavaScript's Execution Context and the Call Stack, using visual illustrations and analogies to a slice of chocolate cake for easier understanding.

Abstract

The article on the undefined website delves into the concept of Execution Context in JavaScript, illustrating how the Global Scope is automatically created by JavaScript as the first Execution Context when a webpage is loaded. It explains the role of the this object within different Execution Contexts and how a new context is created with each function call, forming a Last In First Out (LIFO) stack known as The Call Stack. The author emphasizes that this stacking mechanism is crucial for understanding how JavaScript manages function calls and object instantiation, which are essentially constructor function calls. The article also clarifies that stacking only occurs with nested function calls across different scopes, not within the same Lexical Environment. Enhanced with visual aids and sponsored by Learning Curve, the article aims to provide a clear and engaging tutorial on the subject, supplemented by additional resources such as a video tutorial on JavaScript Execution Context.

Opinions

The author believes that understanding the Execution Context and the Call Stack is fundamental for web developers to grasp how JavaScript handles code execution.
The use of visual diagrams and the chocolate cake analogy suggests the author's pedagogical approach to making complex concepts more accessible and engaging.
By providing a list of their best web development tutorials, the author positions themselves as an experienced educator in the field of web development.
The mention of the author's books, "My Coding Books" and "JavaScript Grammar," indicates a self-promotional aspect, suggesting that the author values their work as a resource for learning JavaScript.
The article's sponsorship by Learning Curve implies a partnership with an independent book publishing company, which may reflect the author's support for independent educational resources.
The inclusion of a video tutorial at the end of the article shows the author's commitment to multimodal learning, catering to different learning preferences among readers.

Execution Context & the Call Stack — Visually Illustrated by a Slice of Tasty Chocolate Cake

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

My Coding Books

CSS Visual Dictionary contains visual diagrams for every single CSS property in common use. JavaScript Grammar contains…

jstutorial.medium.com

Global Scope created internally by JavaScript as var window = Window() (rough equivalent) behind the veil. Global Scope acts as the 1ST automatically created Execution Context roughly at the time when browser opens a URL:

**Global Scope** is the first **Execution Context** on **The Call Stack.**

A new Execution Context is spawned from a scope containing variable definition and the binding of the this object. Essentially the this object in a given EC is the link to the object context under which it operates:

The binding of the **this** object across Execution Contexts on The Call Stack.

A new Execution Context is caused by a function call. This new Execution Context is then placed on top of Execution Stack (or The Call Stack.)

A new Execution Context can also be created when an object is instantiated but its only because object instantiation is a constructor function call.

From then on, whatever functions you call or whatever objects you instantiate will cause a new execution context created & pushed onto the stack. This process repeats while maintaining a this object chain all the way up to the currently executing context (the topmost one):

There is always one currently executing context. The rest are stacked below.

After the function is finished executing the stack is removed from the top and the code control flow returns to the previous / uppermost execution context.

In other words its a LIFO (Last In First Out) order.

Noteworthy: This “stacking” occurs only when you call a function from the scope of another function. And that function, yet calls another one from its own scope. Thus, creating not only a stack of, but also a chain of contexts tied by the this object — related to the scope in which function was executed.

Stacking will not happen no matter how many function calls are made in the same Lexical Environment / scope. They all just push and pop within the same environment.

Hope this article was helpful. . . and the 🍰 cake’splanations delightful!

Sponsored by Learning Curve — independent book publishing company that provided these amazing illustrations for free.

You may want to also see this JavaScript Execution Context video tutorial: