Execution Context in JavaScript at Five Levels

Level 1 (Child):

Imagine you’re playing with different toy sets in your room. When you’re playing with one toy set, you bring out all the toys related to that set and put them around you. That’s like an “execution context” in JavaScript. When JavaScript runs a piece of code, it brings everything it needs for that code into an execution context.

Level 2 (Teenager):

Think of the execution context as the environment in which JavaScript code runs. When you run a function, JavaScript creates a new execution context. It’s like opening up a new workspace for that function, where it has all the variables and functions it needs.

Level 3 (Undergraduate):

In JavaScript, when code runs, it runs within an execution context. This includes a variable environment (local memory for variables and functions) and a reference to the outer environment in the case of nested functions. There are two types of execution context, global and function. When a script starts, it begins with a global execution context. When a function is invoked, a new function execution context is created.

Level 4 (Grad Student):

Furthering the concept, each execution context in JavaScript is composed of two components: the Variable Object (VO) which contains the function parameters, variable declarations, and function declarations, and the Scope Chain, which provides ordered access to all variables and functions that an execution context has access to. When a function creates a new execution context, that context’s scope chain is built by taking the new Variable Object and putting it onto the scope chain of the parent execution context.

Level 5 (Colleague):

In the JavaScript runtime model, there’s a stack of execution contexts called the execution stack or call stack. Each time a function is called, a new execution context is pushed onto the stack. As the function completes its execution, its context is popped from the stack. The EC includes everything the JavaScript engine needs to track the progress of a function execution, such as the value of ’this’, the code that’s being executed, the Variable Object, and the Scope Chain. In ECMAScript 2015 (ES6) and beyond, the introduction of ’let’ and ‘const’ brought about the concept of block-level execution contexts as well, adding another layer of complexity to how the JavaScript engine manages execution.

Richard Feynman Explanation

Alright, let’s put on our Feynman caps and dive into the concept of Execution Context.

Let’s say you’re the director of a play. The whole production is your script, but you can only enact one scene at a time. Each scene has its own set of characters, its props, and its lines. When you’re working on a scene, that’s the one you’re focused on - it’s your current context. Now, if a scene has a flashback, that flashback becomes the new scene you’re working on. But once the flashback ends, you come back to the original scene.

In JavaScript, or any other programming language, when your program runs, it’s like putting on a play. The whole script is your code, and each function or block of code is a scene. Now, just like you can only focus on one scene at a time, the JavaScript engine can only execute one piece of code at a time. This piece of code that’s being executed is what we call the Execution Context.

Within an Execution Context, we have all the variables, functions, and objects that the piece of code needs to do its job - these are like the characters and props of our scene. The Execution Context also keeps track of where the execution is in the code - like the current line in the script.

If a function calls another function, it’s like a scene with a flashback. The JavaScript engine creates a new Execution Context for that called function and starts executing it. But once it’s done, the engine comes back to the original Execution Context - just like you return to the original scene after a flashback.

So in a nutshell, Execution Context is the current ‘scene’ of your code’s ‘play’ that the JavaScript ‘director’ is focusing on. And just like a play, at any given moment, there’s only one scene, or Execution Context, in the spotlight.