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.
My Coding Books
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:
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.