The JavaScript Basics I’m Glad I Learned Before Going Back to React

Source: Dev.to

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.”

Big mistake 😄. Java and JavaScript are completely different languages with different use cases, syntax, and 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?

Memory Component (Variable Environment)

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

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 ⚙️

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:

1. A new execution context is created
2. Memory is allocated for num and ans
3. num = 2, ans = 4
4. return ans sends control back

The same steps repeat for square(4). Once everything finishes, the global execution context is destroyed.

Call Stack: The Manager Behind the Scenes 📚

JavaScript keeps track of all execution contexts with the Call Stack:

• 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 the following 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, respected JavaScript, and 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.