How JavaScript Works: Understanding Execution Context (Simplified for Beginners)

JavaScript is one of the most popular programming languages in the world. But how does it work under the hood? Let’s break it down step by step, using simple concepts and pseudocode, so anyone beginner can understand.

What Is JavaScript?

JavaScript is a programming language that runs in a browser (like Chrome, Firefox, or Safari) or on a server (using tools like Node.js). It is used to make websites interactive. When you see animations, buttons doing cool things, or games in a browser, JavaScript is doing the magic.

To understand how JavaScript works, we need to understand two things:

1. Execution Context
2. Call Stack

What Is an Execution Context?

An execution context is like a box where JavaScript keeps everything it needs to run your code. This includes:

1. Variables (data you store, like x = 5)
2. Functions (pieces of code that do something, like showMessage())
3. Code to Execute (the actual instructions you write)

There are two main types of execution contexts:

1. Global Execution Context (GEC): This is the default box where JavaScript starts running your code. It's like the main stage.
2. Function Execution Context (FEC): This is a new box created whenever a function is called. It works for that function only.

Step-by-Step Example

Imagine you wrote this simple pseudocode:

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

Here’s what JavaScript does step-by-step:

1. Create a Global Execution Context

When the program starts, JavaScript automatically creates a Global Execution Context (GEC).

• Memory (Variable Environment):

  • name = undefined (placeholder for now)
  • greet = function definition (stores the code for greet())

• Code Execution Phase:

  • It runs the global code line by line:
  • var name = "Alex"; → Updates memory: name = "Alex"
  • Encounters greet(); → Calls the greet function.

2. Create a Function Execution Context

When greet() is called, JavaScript creates a new Function Execution Context (FEC) specifically for greet.

• Memory (Variable Environment):

  • message = undefined (placeholder for the variable inside greet)

• Code Execution Phase:

  • Runs the greet function:
  • var message = "Hello, " + name; → Combines "Hello, " with name ("Alex"), so message = "Hello, Alex".
  • return message; → Sends "Hello, Alex" back.

3. Clean Up and Return

Once the greet function finishes, its Function Execution Context is removed (deleted). The program returns to the Global Execution Context.

What Happens to Execution Contexts?

JavaScript keeps track of all these execution contexts using a call stack.

What’s a Call Stack?

The call stack is like a stack of plates:

1. The Global Execution Context is at the bottom (the first plate).
2. Every time a function is called, a Function Execution Context is added on top (a new plate).
3. When the function finishes, its context is removed (plate is taken off).

Visualizing with Pseudocode

Here’s how JavaScript processes our code:

1. Initial Global Code (Create GEC):
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

2. Global Execution Updates (Run Code):
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

3. Call greet() (Create FEC):
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

4. Run greet() and Return:
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

5. Finish Execution:
   

   Call Stack:
     Empty (Program Ends)
   

Key Things to Remember

1. Execution Contexts are like containers where JavaScript runs code. Every program starts with a Global Execution Context, and each function gets its own Function Execution Context.
2. The Call Stack keeps track of what’s running. The last thing added is the first thing removed (LIFO: Last In, First Out).
3. JavaScript cleans up when a function is done. That’s why memory from a function doesn’t stay around forever.

Why Does This Matter?

Understanding execution contexts helps you write better programs:

• You’ll know why variables are available in some places and not others (scope).
• You’ll understand errors like “undefined” variables.
• You’ll see how functions interact and why they return values.

Challenge Yourself

Try running this pseudocode in your mind:

var x = 10;
function multiply(y) {
    return x * y;
}
var result = multiply(5);

Ask yourself:

1. What’s in the Global Execution Context?
2. What happens when multiply() is called?
3. What’s the final value of result?

By mastering execution contexts, you’ll have a solid foundation to tackle even the trickiest JavaScript problems!