Clear Blue Sky

Your mind is now clear like a blue sky.

We are ready to start.

Place, Storage, Servant

Run this code in your head. What is logged first? "Batman" or "Joker"?

let hero = 'Batman';
let villiant = 'Joker';
 
console.log(hero);
console.log(villiant);

Yes! Did you get it right? This example is super easy, but it’s great to introduce how JavaScript interacts with code.

1. JavaScript reads the first line. It finds the let keyword followed by an identifier and an equal sign and knows we want to save the value on the right with the identifier on the left.

But where is it going to save it? Actually, where are we? Is this the first thing JavaScript really does?

When we run code, we are always somewhere. We need a context, a place for things to happen—calculate an operation, save a variable, call a function, etc. It’s like in the real world. A meadow is needed for goats to graze. Dolphins need a sea to swim. We, as humans, need earth under our feet in order to walk or run. But what about JavaScript? What does it need to read and execute code? How do we call this place?

• Well, it's called Global Execution Context.

JavaScript needs to create an environment -a place- in order to read and execute code. It's like the water for the dolphins or land for the humans.

The very first time JavaScript starts running code, it is inside the Global Execution Context. We call it with this ominous name because it’s the top-level environment where all global code runs.

• So, to start working with code JavaScript creates a place called the Global Execution Context.

Okay, we know the place now. But what about saving variables and values? Where do we store them?

Right, we do that in the Global Memory, which is the storage area of our place.

Nice! We got the place where things happen, we got the storage were things are saved but... How does JavaScript read and run the lines of code? Two at a time? Three, seven, twenty at a time? And who does it?

Well JavaScript has a Servant​ that operates over the Execution Contexts. He is responsible for reading and running the code line by line; saving variables in memory, evaluating expressions, invoking functions, etc.

This Servant can only do one thing at a time, which is why JavaScript is called a single-threaded language. It represents what we commonly call the Thread of Execution.

Notice that we said that JavaScript creates the Global Execution Context to start running code. But it also destroys it when there is no more code to read or run for the Thread of Execution. When the context it's destroyed also removes the Global Memory attached to it.

These three concepts are all we need to correctly break down the Batman example—this time with all the tools in hand.

Mental Model

When we talk about the Place, the Servant, or the Storage, we are creating an analogy to explain JavaScript in grandma words. These are not the technical names used in the JavaScript specification.

We use them to build a mental image that helps us visualize and understand these technical concepts more easily.

Back to Batman

Let’s walk through this code line by line, just like JavaScript does.

let hero = 'Batman';
let villiant = 'Joker';
 
console.log(hero);
console.log(villiant);

1. A new place is created to run our code. So JavaScript creates the Global Execution Context.
2. The Servant starts reading and running our code. The Thread of Execution reads the first line, finds the let keyword followed by an identifier and an equal sign, and knows it has to save the value on the right with the identifier on the left. The identifier hero is saved in the Global Memory with the string value 'Batman'.
3. After it is done, the Servant starts reading and running the second line: let villiant = "Joker"; and repeats the process described in step 2, but this time with the identifier villiant and the string value 'Joker'.
4. For now, we are not going to enter into the details of the execution of console.log(hero). We are simply going to say that the Servant finds the identifier hero in the Global Memory and sends the string value 'Batman' to console.log, resulting in 'Batman' being printed in the console.
5. Then the same happens with console.log(villiant). It logs 'Joker' as well.
6. Since there is no more code for the Servant to read, the place is destroyed with all the things in it. In other words, JavaScript destroys the Global Execution Context along with all the things stored in the Global Memory, and the program ends.

You’ve probably noticed that many things are happening under the hood even when a simple piece of code like this is executed. Did you know these things already? If you do, great job! If you didn’t, don’t worry—it means you are going to get the most out of this journey.

We are preparing the terrain for what’s coming next.

We talked about the Global Execution Context, but what if I tell you that it’s not the only Execution Context that JavaScript can create? We are going to see this —and more— in the next episode of our journey!

Recap

• For JavaScript to run code, it is necessary to do it somewhere: a place technically known as the Global Execution Context. It is created each time JavaScript runs a program and destroyed when there is no more code to run.
• The Storage is attached to the Global Execution Context, and it’s where things needed during the execution of the program are stored. It’s known as the Global Memory.
• To read and execute code, JavaScript uses the Servant, also known as the Thread of Execution, which goes line by line reading and running the code. The Thread of Execution performs one task at a time, which is the reason why JavaScript is called a single-threaded language.