In my last blog, I talked about the mistakes I made while learning React—especially how skipping JavaScript fundamentals made everything harder. This time, I want to share what I did differently when I decided to learn JavaScript properly. And trust me, this decision changed everything.

My First (Funny) JavaScript Misunderstanding 😅

When I first heard about JavaScript, I honestly thought:

“Java and JavaScript are probably the same… just add script at the end.”

Yeah. Big mistake 😄 Turns out, Java and JavaScript are completely different languages. Different use cases, different syntax, different worlds.

Once I got past that assumption, I decided:

This time, I won’t rush. I’ll start from the absolute basics.

Everything in JavaScript Happens Inside an Execution Context 🧠

One of the first (and most important) concepts I learned was the Execution Context.

Think of it like a sealed container where JavaScript runs your code.

This container holds:

• Information about variables
• Functions
• The order in which code is executed

Every time JavaScript runs a program, it creates an execution context.

What’s Inside the Execution Context?

The execution context has two main components:

1️⃣ Memory Component (Variable Environment)

• Stores variables and functions
• Keeps them in key-value pairs
• Variables are initially stored as undefined

2️⃣ Code Component (Thread of Execution)

• Executes code one line at a time
• Follows a strict order

Because of this, JavaScript is:

• Synchronous → One command at a time
• Single-threaded → Executes code in a specific sequence

JavaScript Runs in Two Phases ⚙️

Whenever a JS program runs, the execution context is created in two phases:

Phase 1: Memory Creation Phase

• Memory is allocated to all variables and functions
• Variables get undefined
• Functions get stored entirely in memory

Phase 2: Code Execution Phase

• Code is executed line by line
• Actual values are assigned
• Functions are invoked

Let’s Understand This with a Simple Example 👇

var n = 2;

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

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

🧠 Memory Creation Phase

JavaScript first scans the whole code and allocates memory:

• n → undefined
• square → function definition
• square2 → undefined
• square4 → undefined

Nothing is executed yet.

▶️ Code Execution Phase

Now JavaScript starts executing:

• n gets the value 2

Function square is skipped for now When square(n) is called:

A new execution context is created

Memory is allocated for num and ans

num = 2, ans = 4

return ans sends control back

Same steps repeat for square(4).

Once everything finishes, the global execution context is destroyed.

Call Stack: The Manager Behind the Scenes 📚

So how does JavaScript keep track of all this?

👉 With the Call Stack

• It keeps track of execution contexts
• Follows Last In, First Out (LIFO)
• When a function finishes, its execution context is removed

The call stack is also known as:

• Execution Context Stack
• Program Stack
• Runtime Stack

Why This Matters (Especially for React) 💡

When I finally understood:

• Execution context
• Memory allocation
• Call stack

Things like this started making sense:

• Hoisting
• Closures
• useEffect
• State updates
• Unexpected behavior in React

React didn’t feel “magical” anymore—it felt logical.

Final Thoughts 🙌

This time, I didn’t rush into React.

I slowed down. I respected JavaScript. I learned how it actually works behind the scenes.

And honestly? That made me a much better React learner.

If you’re about to start React, or feeling stuck: Don’t skip JavaScript fundamentals. They’re not optional—they’re the foundation.