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.

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:

Image for post
Image for post
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:

Image for post
Image for post
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):

Image for post
Image for post

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:

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store