Welcome to Day 5 of our JavaScript learning journey!

If you’ve been writing JS code like let name = "John"; or calling functions like greet(), and you’re now curious how JavaScript actually works behind the scenes — this is the perfect place to be.

In this article, you’ll learn how JavaScript runs your code internally — from parsing and compiling to execution and memory management.

⚙️ The JavaScript Engine: The Brain Behind JS

JavaScript code runs inside something called a JavaScript Engine (like V8 used in Chrome and Node.js). This engine is responsible for:

  • Reading your code (Parsing)
  • Compiling it into executable instructions
  • Running it line-by-line (Execution)

Key Point: JavaScript is interpreted, compiled, and single-threaded — meaning it runs one command at a time in order.

📚 How JavaScript Executes Code

Every time a JavaScript file runs, two core phases take place:

  1. Memory Allocation Phase (aka Hoisting)
  2. Code Execution Phase

Let’s break it down with an example:

console.log(myName); // undefined (because of hoisting)
var myName = "Dhanian";

function greet() {
  console.log("Hello " + myName);
}

greet(); // Output: Hello Dhanian

🧠 What's Happening Behind the Scenes:

  • During the memory phase:

    • var myName is hoisted and assigned undefined
    • greet() is fully hoisted as a function

  • During the execution phase:

    • console.log(myName) logs undefined
    • Then "Dhanian" is assigned to myName
    • greet() is executed and logs Hello Dhanian

🧱 Execution Contexts Explained

When any JS code runs, it does so inside an Execution Context.

There are two main types:

  • Global Execution Context → created when your script starts
  • Function Execution Context → created whenever a function runs

Each context goes through both the memory and execution phases.

Example:

function sayHello() {
  console.log("Hello world!");
}

sayHello(); // Creates a new Function Execution Context

🧩 Understanding the Call Stack

The Call Stack is where JavaScript keeps track of function execution. It works like a pile of plates — the last one added is the first one removed (LIFO: Last In, First Out).

Example:

function first() {
  console.log("First");
  second();
}

function second() {
  console.log("Second");
  third();
}

function third() {
  console.log("Third");
}

first();

🔍 Call Stack Flow:

  • Global() context is created
  • first() is called → added to the stack
  • second() is called → added to the stack
  • third() is called → added to the stack
  • third() finishes → removed
  • second() finishes → removed
  • first() finishes → removed

The call stack ensures one function executes at a time.

✨ Recap

Let’s quickly summarize what you’ve learned today:

  • JavaScript code runs in two phases: Memory and Execution
  • Variables and functions are hoisted before running
  • Each block of code runs in an Execution Context
  • Function calls are tracked in the Call Stack
  • JavaScript is single-threaded — one line at a time!

📘 Continue Learning

Want to master JavaScript fundamentals and beyond?

Check out this beginner-to-advanced JavaScript ebook:

Take this JavaScript Ebook

You'll learn:

  • Execution flow
  • Core concepts
  • 200+ real practice projects

Stay tuned for Day 6 → JavaScript Data Types Cheatsheet!

Drop a follow if you want more of these daily guides!

Let me know when you're ready for **Day 6** and I’ll write it up!