Web Development - HTML, CSS & JavaScript

💻 JavaScript Roadmap 2026 — Part 9 🟡 Scope, Hoisting & Execution Context Now we're moving from basic JavaScript syntax into concepts that explain how JavaScript actually executes your code. These concepts are extremely important because they explain things like: • Why some variables are accessible in certain places but not others • Why functions can sometimes be called before they are written • Why "let" and "const" behave differently from "var" • How JavaScript manages function calls • How nested functions access variables from outer functions 1️⃣ What Is Scope? Scope determines where a variable can be accessed in your program. For example: let name = "Rahul"; console.log(name); The variable "name" is accessible here because it was declared in the outer scope. But: function greet() { let message = "Hello"; console.log(message); } greet(); "message" is available inside "greet()". Trying to access it outside: console.log(message); causes an error because "message" belongs to the function's local scope. 2️⃣ Global Scope A variable declared outside functions and blocks is generally in the global/module scope depending on how your JavaScript is executed. Example: const appName = "My App"; function showAppName() { console.log(appName); } showAppName(); Output: My App The function can access "appName" because the variable exists in an outer scope. 3️⃣ Function Scope Variables declared inside a function are accessible within that function. function calculate() { const price = 1000; console.log(price); } calculate(); This works. But: console.log(price); doesn't work because "price" exists only inside "calculate()". 4️⃣ Block Scope A block is code surrounded by "{}". For example: if (true) { let message = "Hello"; console.log(message); } "message" exists inside that block. But: console.log(message); causes an error. Variables declared using: • let • const are block-scoped. 5️⃣ "var" and Block S… Ganz lesen →

When "inner()" looks for: name it finds it in its own scope. For: city JavaScript looks in the outer scope. For: country it goes one level further outward. Conceptually: inner scope ↓ outer scope ↓ global/module scope This is the scope chain. 8️⃣ What Is Hoisting? Hoisting describes how JavaScript's execution process makes certain declarations available before their position in the source code is reached. But different declarations behave differently. This is why you should avoid thinking of hoisting as simply: "JavaScript moves all code to the top." That's not an accurate mental model. 9️⃣ Function Declaration Hoisting Function declarations can be called before their declaration in the same scope. greet(); function greet() { console.log("Hello"); } Output: Hello The function declaration is available when execution begins. 🔟 "var" Hoisting Consider: console.log(age); var age = 25; The result is: undefined Conceptually, you can think of the declaration being initialized early: var age; console.log(age); age = 25; The important point is: var declaration → initialized as undefined before normal execution reaches the assignment. 1️⃣1️⃣ "let" and "const" Hoisting Now consider: console.log(age); let age = 25; This produces a ReferenceError. The same applies to: console.log(age); const age = 25; Why? "let" and "const" declarations are created during the setup phase, but they aren't initialized until execution reaches their declaration. The period between entering the scope and initialization is called the: Temporal Dead Zone (TDZ) 1️⃣2️⃣ Temporal Dead Zone Example: { console.log(name); let name = "Rahul"; } The variable "name" exists in the scope, but accessing it before initialization causes an error. Conceptually: Block begins ↓ name exists but is uninitialized ↓ Temporal Dead Zone ↓ let name = "Rahul" ↓ name becomes initialized So: console.log(name); let name = "Rahul"; … Ganz lesen →