Execution Contexts and Lexical Environments

Execution Context Execution Context is created every time, the JS engine calls a function. They stays in the call stack. Lexical Environment The lexical environment includes the scopes that are present at a certain point in time. Every execution context has its own lexical environment.

In this piece I want to talk about three advanced JavaScript concepts: execution context, lexical environment, and closure.

This will be a long post. If you want to skip to the summary, scroll to the bottom of the page.

What is an Execution Context?
So, what is an execution context? Whenever you write some code, your code is in a space — that space is called the “execution context”. Imagine you wrote a simple calculator:

In JavaScript, whenever a function is invoked, a new execution context is created on the execution context currently running. A newly created one is stored in the stack for execution contexts.

So, if we call cal(), the new context will be created and it will be pushed to the context stack. But, by default, there’s an already existing context in the stack — a global execution context.

First the function cal is called and run so the new execution context is created. Then it is stored in the context stack. Then the control of the current execution context is transferred to the newly created one from, in this case, the global context.

An execution context is created whenever you call a function. When developing in JavaScript, you might have seen this error:
The function a keeps calling itself recursively. Every time a calls itself, a new execution context about a will be created and stored in the stack. Since the memory stack’s storage space isn’t infinite, it overflows.

Now you know what an execution context is, but there is more to learn. We’ll talk about it further shortly.