Mastering Fundamentals: JavaScript & Browser Internals

Whether you're building real-time dashboards or debugging a UI bug, JavaScript is where everything begins. Let's look at the JavaScript fundamentals useful in daily development and even in technical interviews.

📚 Table of Contents:

1. Hoisting, Scoping & Closures
2. Promises, Async/Await & The Event Loop
3. Understanding this, call, apply, and bind
4. Browser & Memory management
5. Performance Tuning

💎 Hoisting, Scoping & Closures

👇 Intro: Why Did That Variable Show as undefined?

You write a function, declare a variable halfway down, but it somehow exists at the top - even if it’s undefined. Or maybe you accidentally created a global variable without realising it. Sound familiar?

These weird behaviours come down to hoisting, scoping, and closures - three foundational JavaScript concepts that control how and when variables are available. Knowing how they interact helps you write safer, clearer code.

🧠 What Is a Closure?

A closure is a function that remembers the variables from its lexical (surrounding) scope - even after that outer function has finished running.

🧪 How Does Closure Preserve State?

A closure retains access to variables in its original scope. This allows private variables and functions - like in counters, debounce utilities, or React hooks.

❓Interview:

Q: Write a function that returns a counter. Each call to the function should return the next number.

💻 Example:

>>> createCounter Function

💬 Gotcha to Watch For:

• Closures can sometimes cause memory leaks if you accidentally retain large DOM elements or objects in the closed-over scope.

🧠 What Is Hoisting?

Hoisting means that JavaScript moves declarations (not assignments) to the top of their scope during the compile phase, before any code is executed.

🔍 Hoisting Scenarios

Var:

The declaration is hoisted and assignment happens later, so a variable can be used before it has been declared with undefined.

Let & Const:

The declaration is hoisted. In case of Let, it’s not initialised until the engine reaches that line. So accessing it before that is illegal → Reference Error (not undefined!) Same for const, with the added rule: it must be initialised at the time of declaration otherwise the code will not run.

❓Interview:

Q: Why does calling a function expression before its definition cause an error?

💻 Example: Hoisting

 >>> Var, Let, Const & function Hoisting

🧠 What is Scope?

Scope defines where a variable lives and whether you can access it. 

var → Function scope, let & const → Block scope {}, all the variable (local) declared inside a Function → Function scope, Variable outside of all Functions →Global scope

💻 Example:

>>> Variable availability

💬 Gotcha to Watch For:

• Always use let or const unless you need function-level scoping. 
• var does not respect { } blocks like if, for, or while — unless they're inside a function. 
• Use const by default and only use let when you know the value will change.

⏳Coming up next: Async programming in JavaScript >>>