JavaScript Hoisting Explained: Var, Let, Const, and Function

✨ 𝗗𝗮𝘆 𝟭𝟳 𝗼𝗳 𝗠𝘆 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 🚀 Today I explored one of the most important concepts in JavaScript: the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽. I learned why 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝘀𝗶𝗻𝗴𝗹𝗲-𝘁𝗵𝗿𝗲𝗮𝗱𝗲𝗱 𝗮𝗻𝗱 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀, yet still capable of handling asynchronous tasks efficiently. Key ideas I understood: 🔹 𝗦𝗶𝗻𝗴𝗹𝗲-𝘁𝗵𝗿𝗲𝗮𝗱𝗲𝗱 𝗻𝗮𝘁𝘂𝗿𝗲 – JavaScript runs one task at a time on a single call stack. 🔹 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗲𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 – code runs line by line by default. 🔹 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 – manages asynchronous operations by coordinating the 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸, 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀, 𝗮𝗻𝗱 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲. This concept finally helped me understand how JavaScript handles things like 𝘁𝗶𝗺𝗲𝗿𝘀, 𝗲𝘃𝗲𝗻𝘁𝘀, 𝗮𝗻𝗱 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝘀 without blocking the main thread. #JavaScript #100DaysOfCode #WebDevelopment #LearningJourney #FrontendDevelopment #EventLoop

🚀 Today’s JavaScript Practice: Merging Two Arrays Using a For Loop Today I practiced how to merge two arrays in JavaScript using a for loop instead of built-in methods. This helped me better understand how array indexing and loops work internally. 🔹 First, I created two arrays with some numbers. 🔹 Then I used a for loop to copy elements from the first array into a new array. 🔹 After that, I used another for loop to add elements of the second array after the first array’s elements. 💻 Example idea: data1 = [10,20,30,40,50] data2 = [60,70,80,90,100] ✅ Result → [10,20,30,40,50,60,70,80,90,100] You can also check my GitHub profile for more practice projects and code. #DSA #JavaScript #WebDevelopment #CodingPractice 😊

Ever wondered how JavaScript actually finds variables 🤔 Think of it like Russian nesting dolls or rooms inside rooms: 🏠 Global Scope → The Big House 🛏️ Outer Scope → The Bedroom 🚪 Local Scope → The Closet Here’s the rule 👇 You can always look outward, but never inward. When JavaScript searches for a variable, it follows a simple path: 👉 Check local 👉 Move outward 👉 Keep searching… 👉 Still not found? 💥 Reference Error This is Lexical Scoping + Scope Chain — the reason your code stays organized, predictable, and safe. Where did Lexical Scoping finally click for you — tutorials, projects, or debugging pain? 😄 Drop your experience below 👇 Let’s help beginners understand this faster. #JavaScript #WebDevelopment #Frontend #ProgrammingConcepts #100DaysOfCode #LearnToCode #DevCommunity

🚀 JavaScript Fundamentals Series — Part 8 Objects are one of the most important concepts in JavaScript. Almost everything in JavaScript is built around objects. This guide covers: • What objects really are • Properties and methods • How JavaScript structures data • Why objects are everywhere in JS If you want to truly understand JavaScript, you must understand objects. Full guide 👇 https://lnkd.in/dGHh7weZ #javascript #coding #webdev

🚀 Day 82 of My #100DaysOfCode Challenge Today I learned about a very useful JavaScript feature — Optional Chaining ("?."). When working with deeply nested objects, accessing properties can sometimes cause errors if a value is "undefined" or "null". Optional chaining helps solve this problem by allowing us to safely access nested properties without breaking the code. Example without Optional Chaining const user = { profile: { name: "Tejal" } }; console.log(user.profile.name); If "profile" doesn’t exist, this code would throw an error. Example with Optional Chaining const user = { profile: { name: "Tejal" } }; console.log(user?.profile?.name); Output Tejal If a property doesn't exist, JavaScript simply returns undefined instead of throwing an error. Why this is useful • Prevents runtime errors • Makes code cleaner and shorter • Helpful when working with APIs and complex objects Small modern features like this make JavaScript development much smoother. Continuing to explore deeper concepts and improving step by step. 💻✨ #Day82 #100DaysOfCode #JavaScript #OptionalChaining #WebDevelopment #LearningInPublic

Just watched this eye-opening video on Asynchronous JavaScript and the Event Loop by Akshay Saini (Namaste JavaScript Ep. 15)! 🚀 If you're into JS, this is a must-watch. Key takeaways: ✅ Call Stack Magic: Handles synchronous code like a boss – push, execute, pop. But for async? It delegates to Browser Web APIs. Web APIs in Action: Think setTimeout, fetch, or event listeners. They schedule callbacks without blocking the main thread. ✅ Event Loop – The Gatekeeper: Constantly checks if the call stack is empty, then pushes tasks from Callback Queue (macrotasks like timers) or Microtask Queue (higher priority for Promises, etc.). ✅ Micro vs. Macro: Microtasks (e.g., .then()) run before macrotasks, explaining why fetch might resolve before a setTimeout(0). ✅ Watch Out for Starvation: If sync code hogs the stack, async callbacks wait forever. And don't forget to remove unused event listeners to avoid memory leaks! This cleared up so many confusions for me on how JS fakes concurrency in a single-threaded world. Highly recommend – full of code examples and deep dives. What's your biggest JS async gotcha? Share below! 👇 Watch here: https://lnkd.in/d6PWjBGj #JavaScript #EventLoop #WebDevelopment #NamasteJS #CodingTips

Today JavaScript humbled me again 😭 I thought I understood async JS… but then the Event Loop said “bro sit down.” We explored the chaotic squad behind the scenes: 🧵 Call Stack – the overworked intern running the code 🌀 Event Loop – the manager deciding who gets attention ⚡ Microtask Queue – the VIP lane (Promises, queueMicrotask, process.nextTick) ⏳ Macrotask Queue – the waiting room (setTimeout, setInterval, setImmediate) Biggest plot twist of the day 👇 You write: setTimeout(fn, 0) and think: “Nice… this will run immediately.” JavaScript: “Haha… no.” Because JS first clears the Call Stack, then executes Microtasks, and only then checks Macrotasks. So the real priority is: Call Stack → Microtasks → Macrotasks Which explains why JavaScript sometimes feels like it's gaslighting you during console.log outputs 💀 Huge thanks to Devendra Dhote Bhaiya for explaining this so clearly. Really fun session and lots of brain upgrades today 🧠⚡ JavaScript is basically: “Single-threaded… but emotionally multi-threaded.” #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #LearningInPublic

Understanding Hoisting in JavaScript 🚀 Many developers get confused between var, let, and const when it comes to hoisting. Here’s the clear difference: • var → Hoisted and initialized with undefined • let → Hoisted but stays in Temporal Dead Zone (TDZ) • const → Hoisted, stays in TDZ, and must be initialized immediately Trying to access let or const before declaration results in a ReferenceError, while var returns undefined. Mastering hoisting helps you avoid hidden bugs and write predictable JavaScript code.

Learn in Public – Day 8 🚀 Today I learned about Callback Functions and Schedulers in JavaScript. Explored: • Passing functions as arguments • Function expressions as callbacks • setInterval() & clearInterval() • setTimeout() & clearTimeout() Understanding how JavaScript handles delayed and repeated execution is really interesting. This is where JS starts feeling powerful...! Improving step by step 💪 #JavaScript #WebDevelopment #LearnInPublic #100DaysOfCode

🚀Day 3/100 #100DaysOfCode — JavaScript Core Foundations Today, I revised the fundamentals that actually control how JavaScript behaves under the hood. 🔹 Execution Context JavaScript runs in two phases inside the Global Execution Context: 1️⃣ Creation Phase Memory allocated var → initialized as undefined let & const → hoisted but placed in the Temporal Dead Zone (TDZ) 2️⃣ Execution Phase Code executes line by line Variables receive real values 🔹 var vs let vs const var is hoisted with undefined let & const are hoisted but inaccessible before declaration (TDZ) var allows re-declaration let & const do not var & let allow reassignment const does not var is function-scoped let & const are block-scoped 🔹 Arrow Functions Not hoisted like traditional functions No own this (inherits lexically) Cleaner implicit return const sum = (a, b) => a + b; 🔹 Rest & Spread Rest → collects remaining parameters into an array Spread → expands array elements 🔹 Destructuring Cleaner extraction from arrays & objects: let { name: myName, address: { city } } = person; Understanding execution context + scope is the foundation for closures, async JS, and advanced patterns. No shortcuts. Just depth. Day 4 tomorrow. #JavaScript #WebDev #IntermediateJS #CodingChallenge #Frontend #SoftwareEngineering #MERNStack #LearningEveryday