JavaScript Hoisting Explained with Example

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts

JavaScript Internals: What Actually Happens with var vs let? Most explanations stop at: • var is function-scoped • let is block-scoped But internally, the difference is deeper. 🔹 Execution Context Creation Phase When JS runs, it creates an Execution Context with: 1️⃣ Variable Environment 2️⃣ Lexical Environment 🔴 How var Works Internally • Stored inside the Variable Environment • Hoisted and initialized with undefined • In global scope, attached to the global object (window in browser) Example: console.log(a); // undefined var a = 10; During memory phase: var a = undefined; 🟢 How let Works Internally • Stored inside the Lexical Environment • Hoisted but NOT initialized • Placed inside the Temporal Dead Zone (TDZ) • Not attached to the global object Example: console.log(b); // ReferenceError let b = 20; Memory is allocated, but access before initialization throws error. 🔥 Key Engine-Level Difference var → Accessible before assignment (value: undefined) → Attached to global object → No block scope let → Hoisted but inaccessible (TDZ) → Block scoped → Not part of global object Understanding this helps in: • Avoiding accidental globals • Preventing hoisting bugs • Writing predictable async code • Debugging production issues JavaScript behavior is not “magic” — it’s execution context design. #JavaScript #FrontendDevelopment #ReactNative #WebDevelopment #ProgrammingInternals

🚀 JavaScript Tip: var vs let vs const — Explained Simply Understanding how variables work in JavaScript can save you from hard-to-debug issues later. Think of variables as containers that hold values ☕ 🔹 var – Old Style (Not Recommended) ➡️ Function scoped ➡️ Can be re-declared & reassigned ➡️ Gets hoisted → may cause unexpected bugs 👉 Use only if maintaining legacy code 🔹 let – Modern & Safe ➡️ Block scoped {} ➡️ Cannot be re-declared ➡️ Can be reassigned ➡️ Hoisted but protected by Temporal Dead Zone 👉 Best for values that change over time 🔹 const – Locked & Reliable ➡️ Block scoped {} ➡️ Cannot be re-declared or reassigned ➡️ Must be initialized immediately 👉 Best for fixed values and cleaner code ✅ Best Practice Use const by default, switch to let only when reassignment is needed, and avoid var 🚫 💡 Small fundamentals like these make a big difference in writing clean, scalable JavaScript. #JavaScript #WebDevelopment #FrontendDevelopment #ProgrammingTips #LearnJavaScript #CodingBestPractices #DeveloperLearning #SoftwareEngineering #100DaysOfCode

Most developers reach for IDs, classes, or extra state before remembering this: JavaScript already gives you a clean way to attach structured metadata directly to DOM elements. If you have ever used data-* attributes in HTML, you can access them in JavaScript through the dataset property. No parsing. No brittle string manipulation. No unnecessary DOM lookups. It is simple, readable, and surprisingly underused. This pattern is especially useful for event delegation, lightweight UI state, dynamic lists, and keeping behaviour close to the element it belongs to. Small details like this make frontend systems cleaner and easier to reason about without introducing extra abstractions. Not everything needs global state. Sometimes the platform already solved the problem. In the example attached, notice how `data-user-id` becomes `dataset.userId`. Hyphenated attributes automatically convert to camelCase. It is a small feature, but small features compound into cleaner, more maintainable frontend code. What is one underrated JavaScript feature you think more developers should use? Github Gist: https://lnkd.in/d6pjMP7J #webdevelopment #javascript #cleancode

🧠Mastering JavaScript — One Concept at a Time (2/32) Today I am very happy because my understanding of hoisting, scope, and sharing with you is now complete. 🔥Scope in Real Life Scope simply means: Where can I access this variable? Block Scope → Code inside {} like in loops, if , etc. Function Scope → Code inside a function let and const follow block scope. var ignores block scope — which leads to bugs. 🧨Hoisting JavaScript prepares memory before running code. It moves all declarations to the top — this is called hoisting. But: var is hoisted and set to undefined let and const are hoisted but not initialised — so accessing them early gives ReferenceError ⚠Common Confusions (JS Reality Checks) const doesn't make things fully constant. It protects the variable, not the value. var is outdated — it's better to use let and const let and const behave similarly, but const gives more safety use it when you're not planning to reassign. 🧠 Mindset Rule Use const by default. Use let only when you plan to change the value. Avoid var — it belongs to the past. Revisiting these fundamentals makes JavaScript feel less “magical” and more predictable. In the next post, I’ll go deeper into how the Data Type and Type System. How long did it take you to understand scope and hoisting truly? #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment #MasteringJavaScript

Day 61 – JavaScript Variables (var, let & const) Today I focused on understanding JavaScript variables and how different keywords affect scope, reusability, and reassignment while storing and managing data in programs. Topics covered: JavaScript Variables Variables as containers used to store data/values Understanding keywords as reserved words with special meaning Displaying output using document.writeln() var Globally scoped and accessible anywhere Allows re-declaration and re-assignment Last assigned value is retained during execution let Block-level scoped Does not allow re-declaration within the same scope Allows re-assignment Helps avoid unexpected behavior in larger programs const Block-level scoped Does not allow re-declaration or re-assignment Used for values that should remain constant throughout execution Understanding these differences is essential for writing clean, predictable, and error-free JavaScript code, especially when working on real-world applications. Continuing the learning journey with consistency and focus. #JavaScript #Variables #WebDevelopment #FrontendDevelopment

🚀 JavaScript Magic: Why "Undefined" is actually a Feature, not a Bug! I just had a "Wow" moment diving into the JavaScript Execution Context, and it changed how I look at my code. Ever wondered why you can console.log a variable before you even declare it, and JavaScript doesn't lose its mind? 🤯 🧠 The Secret: Two-Phase Execution When your code runs, JavaScript doesn't just start at line 1. It takes two passes: 1.Memory Creation Phase: JS scans your code and allocates space for all variables and functions. 2. Execution Phase: It runs the code line-by-line. ⚡ The var Behavior (Hoisting) If you use var, JavaScript initializes it as undefined during the memory phase. Result: You can log it early. No error, just a quiet undefined. It’s like the variable is there, but its "suit" hasn't arrived yet. 🛑 The let & const Twist (TDZ) Try the same thing with let or const, and the engine throws a ReferenceError. Why? The Temporal Dead Zone (TDZ). While let and const are also "hoisted," they aren't initialized. They stay in a "dead zone" from the start of the block until the moment the code actually hits the declaration. The Lesson: JavaScript isn't just reading your code; it's preparing for it. Understanding the Execution Context makes debugging feel like having X-ray vision. 🦸♂️ Have you ever been bitten by the Temporal Dead Zone, or do you still find yourself reaching for var out of habit? Let’s discuss! 👇 #JavaScript #WebDevelopment #CodingTips #Frontend #Programming101

💡 Hoisting happens before code execution. ❓ Why are function declarations hoisted but arrow functions are not? In JavaScript, hoisting means the JS engine moves declarations to the top of the file before running the code. ✅ Function declarations are fully hoisted. That means both the function name and its body are stored in memory during the creation phase. So you can call a function declaration even before writing it in the code. ❌ Arrow functions are not hoisted the same way because they are treated like variables. If an arrow function is assigned to const or let, only the variable name is hoisted—not its value. Until the code reaches that line, the arrow function doesn’t exist yet. 👉 So if you try to call an arrow function before it’s defined, JavaScript throws an error. #engineer #webdevelopment #javascript #mernstackdeveloper #fullstackdeveloper #learnwithisnaan

🗓️ Day 61/100 – Understanding the JavaScript Scope Chain Today I finally understood why sometimes variables work… and sometimes they suddenly don’t. The answer = Scope Chain At first I thought JavaScript just “searches everywhere” for a variable. But no — it actually follows a very specific path. JavaScript looks for variables in this order: 1️⃣ Current function scope 2️⃣ Parent function scope 3️⃣ Global scope It climbs upward step-by-step until it finds the variable. This is called the scope chain. --- Example idea: A function inside a function inside a function… The inner function can access outer variables But the outer function cannot access inner variables So access flows inside → outside Never outside → inside --- Big realization today 💡 Most bugs I faced earlier were not logic mistakes… They were scope mistakes. If you understand scope chain: • Closures make sense • Hoisting becomes clearer • Debugging becomes easier JavaScript stops feeling random — It starts feeling predictable. Slowly the language is revealing its rules, not magic. #100DaysOfCode #JavaScript #Scope #WebDevelopment #Frontend #LearningInPublic

Day 56/100 – JavaScript Closures (Mind = Blown 🤯) Today I finally understood something that used to scare me: 👉 Closures in JavaScript At first, the word itself sounded complicated. But when I broke it down… it actually made sense. Here’s what I learned: A closure happens when a function remembers the variables from its outer scope, even after the outer function has finished executing. Read that again slowly. It means JavaScript doesn’t “forget” everything when a function ends. Example mindset: One function creates a variable. Another function inside it uses that variable. Even after the outer function is done… the inner function still remembers it. That’s powerful. Why this matters: ✔️ Helps in data privacy ✔️ Useful in counters ✔️ Important for callbacks ✔️ Used heavily in real-world applications Big realization today: JavaScript isn’t just about writing code. It’s about understanding how memory and scope actually work. Some concepts take time. But once it clicks… it feels amazing. Slowly becoming more confident with the fundamentals 💙 #100DaysOfCode #JavaScript #Closures #WebDevelopment #LearningInPublic #FrontendJourney