Module 1: Introduction & Execution Context

1. What is JavaScript?

JavaScript is a high-level, interpreted (or JIT-compiled), and multi-paradigm language.

• High-level: You don’t have to manage memory (like in C++). JS handles it for you.
• Single-Threaded: It can only do one thing at a time.
• Non-blocking: It uses an “Event Loop” to handle heavy tasks without freezing the website.

2. The JavaScript Engine

Every browser has an engine (Chrome has V8, Firefox has SpiderMonkey). The engine’s job is to take your code and turn it into machine code that the computer understands.

The Workflow:

1. Parsing: The engine reads your code and creates an AST (Abstract Syntax Tree).
2. Compilation: It uses JIT (Just-In-Time) compilation to convert the tree into machine code.
3. Execution: It runs the code in the Execution Context.

3. The Execution Context (The “Environment”)

Everything in JavaScript happens inside an Execution Context. Think of it as a container that holds the variables, functions, and the value of this for the code currently running.

There are two types:

1. Global Execution Context (GEC): Created by default. It creates the window object (in browsers) and the this keyword.
2. Function Execution Context (FEC): Created whenever a function is invoked (called).

The Two Phases of Execution:

This is the “Secret Sauce” of JavaScript. When you run code, the engine goes through it twice.

Phase A: Memory Creation Phase

The engine scans the code for variable and function declarations.

• It allocates memory for variables and sets them to undefined.
• It stores the entire function code for function declarations.

Phase B: Code Execution Phase

The engine reads the code line-by-line and assigns actual values to the variables.

4. Hoisting

Hoisting is a result of the Memory Creation Phase. It allows you to use functions and variables before they are actually declared in the code.

Variable Hoisting (var)

JavaScript

console.log(greet); // Output: undefined
var greet = "Hello World";
console.log(greet); // Output: "Hello World"

Why? Because in the Memory Phase, greet was set to undefined.

Function Hoisting

JavaScript

sayHi(); // Output: "Hi there!"

function sayHi() {
    console.log("Hi there!");
}

Why? Because the entire function body is stored in memory before the code runs.

Note: let and const are also hoisted, but they are stored in a “Temporal Dead Zone” (TDZ). You cannot access them until the line where they are defined, or you will get a ReferenceError.

5. The Call Stack

The Call Stack is how JavaScript keeps track of its place in a script that calls multiple functions. It follows the LIFO principle (Last In, First Out).

1. GEC is pushed to the bottom of the stack.
2. When a function is called, its FEC is pushed on top.
3. When the function finishes, it is popped off the stack.

Technical Code Example: Putting it all together

JavaScript

var n = 2;

function square(num) {
  var ans = num * num;
  return ans;
}

var square2 = square(n);
var square4 = square(4);

What happens behind the scenes?

1. Global Execution Context is created.
2. Memory Phase:
   • n: undefined
   • square: { … function code … }
   • square2: undefined
   • square4: undefined
3. Execution Phase:
   • n becomes 2.
   • square(n) is called. A New Execution Context is created for the function.
   • Inside the function, ans is calculated and returned.
   • The function context is deleted (popped from Call Stack).
   • square2 becomes 4.
   • The same happens for square4.