JavaScript Hoisting: Understanding Variable and Function Behavior

🚨 Confused about Hoisting in JavaScript? You’re not alone. 💡 It’s one of those concepts that feels strange at first — but once you get it, your understanding of JavaScript becomes much stronger. 🔹 Hoisting • JavaScript moves declarations to the top of their scope • Happens during the compilation phase • Allows variables and functions to be used before declaration 🔹 var vs let vs const • var → hoisted and initialized with undefined • let & const → hoisted but NOT initialized (Temporal Dead Zone) • Accessing them before declaration throws an error 🔹 Functions • Function declarations → fully hoisted • Function expressions → behave like variables (not fully hoisted) ⚡ Quick rule many developers follow: • var → hoisted safely (but can cause bugs) • let/const → safer, but respect TDZ • Functions → declarations hoisted, expressions not 📌 Hoisting doesn’t move your code — JavaScript just changes how it reads it internally. #JavaScript #WebDevelopment #FrontendDevelopment #Coding #LearnToCode #100DaysOfCode

🚫 Stop writing ugly numbers in JavaScript. There's a better way. Instead of squinting at 1000000, you can write 1_000_000 — same value, way more readable. const price = 1_000_000; // same as 1000000 const users = 10_000; // same as 10000 const interval = 4_500; // 4.5 seconds No performance cost. No runtime difference. Just cleaner code. The underscore is just a visual separator — JavaScript ignores it completely. Yet somehow it makes your code feel 10× more professional. Small trick. Big difference. 🚀 #JavaScript #TypeScript #CleanCode #WebDev

Just published a new blog on JavaScript Execution Context, Hoisting, TDZ, and Call Stack. While learning these concepts, I realized how important it is to understand how JavaScript actually executes code behind the scenes. It helps explain a lot of behaviors that otherwise feel confusing. In this blog, I’ve tried to break down these concepts simply and clearly. If you’re learning JavaScript or revisiting the fundamentals, feel free to check it out: https://lnkd.in/d6S5HGPy Open to feedback and suggestions. #JavaScript #LearningInPublic #WebDevelopment #BuildInPublic #ChaiCode #Hoisting

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗠𝘆𝘀𝘁𝗲𝗿𝘆 𝗦𝗼𝗹𝘃𝗲𝗱: 𝗧𝗵𝗲 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲 (𝗧𝗗𝗭) 🚫 Ever tried to use a variable before you've actually created it and been met with a frustrating ReferenceError? You've just met the Temporal Dead Zone, a classic JavaScript confusing point! Here's a simple breakdown of what it is and why it matters: What is it? It's the region in your code from the start of a scope until a variable is declared using let or const. During this "temporal" time, you absolutely cannot access that variable. ⏳ Why does it exist? JavaScript wants to prevent you from using uninitialized values, which can lead to buggy, unpredictable code. The TDZ is a safety net that catches these errors early. 🧱 Wait, isn't it the same as hoisting? No! Hoisting moves declarations to the top of the scope, but only let and const create this mandatory TDZ before initialization. For var, you can access it (and get undefined). The TDZ makes your code much safer and more readable. ✨ What's the best way to handle it? 𝗘𝗮𝘀𝘆: always declare your variables at the very top of their scope! This makes your intentions clear to both the engine and other developers. This is a crucial step for writing efficient, professional-grade JavaScript code. 🤩 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #TemporalDeadZone #Hoisting #Let #Const #LearningToCode #ProgrammingConcepts

𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐭𝐫𝐞𝐚𝐭𝐬 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐚𝐬 𝐯𝐚𝐥𝐮𝐞𝐬 — 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭 𝐜𝐡𝐚𝐧𝐠𝐞𝐬 𝐡𝐨𝐰 𝐰𝐞 𝐰𝐫𝐢𝐭𝐞 𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐬. While revisiting some fundamentals today, I explored how 𝐟𝐢𝐫𝐬𝐭-𝐜𝐥𝐚𝐬𝐬 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 shape the way JavaScript handles behavior and logic. In JavaScript, functions are not just blocks of code. They can be 𝐚𝐬𝐬𝐢𝐠𝐧𝐞𝐝 𝐭𝐨 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬, 𝐩𝐚𝐬𝐬𝐞𝐝 𝐚𝐬 𝐚𝐫𝐠𝐮𝐦𝐞𝐧𝐭𝐬, and even 𝐫𝐞𝐭𝐮𝐫𝐧𝐞𝐝 𝐟𝐫𝐨𝐦 𝐨𝐭𝐡𝐞𝐫 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬. This ability is what makes functions first-class citizens in the language. This also led me to understand the difference between 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐝𝐞𝐜𝐥𝐚𝐫𝐚𝐭𝐢𝐨𝐧𝐬 and 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐞𝐱𝐩𝐫𝐞𝐬𝐬𝐢𝐨𝐧𝐬. A function declaration is fully hoisted, meaning the function can be invoked even before it appears in the code. But with a function expression, only the variable is hoisted — not the function value itself. Until the assignment happens, the variable holds undefined, which is why calling it early leads to a 𝐓𝐲𝐩𝐞𝐄𝐫𝐫𝐨𝐫. Another interesting concept is 𝐚𝐧𝐨𝐧𝐲𝐦𝐨𝐮𝐬 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬. These are functions𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐚 𝐧𝐚𝐦𝐞, typically used when functions are treated as values. When a function expression includes a name, it becomes a 𝐧𝐚𝐦𝐞𝐝 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐞𝐱𝐩𝐫𝐞𝐬𝐬𝐢𝐨𝐧, where the name is accessible only inside the function body. Finally, revisiting 𝐩𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫𝐬 𝐯𝐬 𝐚𝐫𝐠𝐮𝐦𝐞𝐧𝐭𝐬 clarified how parameters act as 𝐥𝐨𝐜𝐚𝐥 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 𝐢𝐧𝐬𝐢𝐝𝐞 𝐚 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐬𝐜𝐨𝐩𝐞, receiving the values passed during invocation. Understanding these fundamentals makes it much easier to reason about patterns like callbacks, closures, and asynchronous JavaScript. #JavaScript #SoftwareEngineering #DeveloperJourney #LearningInPublic

5 JavaScript concepts that make everything else click. Learn these deeply and frameworks stop being magic. 1. Closures A function that remembers the scope it was created in. This is how callbacks, event listeners, and setTimeout actually work. Not understanding closures = constant bugs you can't explain. 2. The Event Loop JavaScript is single-threaded. The event loop is how async code doesn't block everything else. If you've ever wondered why setTimeout(fn, 0) still runs after synchronous code — this is why. 3. Prototypal Inheritance Every object in JS has a prototype chain. Classes are just syntax sugar over this. Knowing this means you understand how methods are shared and where "cannot read properties of undefined" is actually coming from. 4. this - and how it changes 'this' is not fixed. It depends on how a function is called, not where it's defined. Arrow functions inherit 'this' from their enclosing scope. Regular functions create their own. This one trips up everyone. 5. Promises and the microtask queue Promises don't just "make async code cleaner." They run in the microtask queue, which runs before the next macrotask (setTimeout). Understanding this makes async debugging dramatically easier. Which of these gave you the biggest headache? 👇 #webdeveloper #coding #javascript

Why == and === Are Not Just Syntax—They're Mindset Shifts! In the world of JavaScript, the difference between == and === is more than just about comparing values. 🙌 When you use ==, you're inviting implicit type conversion into the conversation. This can lead to unexpected results, like comparing a number with a string and getting true. On the other hand, === is the strict operator that doesn’t mess around. It checks both value and type, ensuring your comparisons are as reliable as your coffee maker on a Monday morning. ☕️ Using === is like setting clear boundaries in your code. It prevents those sneaky bugs from creeping in and keeps your logic crystal clear. Why risk confusion when you can make your intentions explicit? 🔍 So, next time you're coding, remember: clarity is key! Which operator do you prefer and why? Let's discuss! 💬 #JavaScript #CodingBestPractices #WebDevelopment #TechTips

I ran a small JavaScript experiment today, and it was a good reminder that performance often hides inside simple concepts. I used the same function twice with the same inputs. The first call took noticeable time. The second call returned almost instantly. Nothing changed in the inputs. Nothing changed in the output. The only difference was that the second time, JavaScript didn’t need to do the work again. That’s the beauty of memoization. Instead of recalculating, it remembers the previous result and returns it from cache. What looks like a small optimization in code can make a big difference in how efficiently an application behaves. The deeper I go into JavaScript, the more I realize: the real power is not just in writing code — it’s in understanding how to make code smarter. #JavaScript #WebDevelopment #FrontendDevelopment #Memoization #Closures

🚀 JavaScript Fundamentals Series — Part 4 Functions are where JavaScript becomes powerful and reusable. Instead of repeating code, functions let you create reusable logic blocks. In this guide you'll learn: • What functions actually are • Parameters vs arguments • Return values • Function declarations vs expressions • How functions organize your code Functions are the foundation of almost everything in JavaScript. Full guide 👇 https://lnkd.in/dtgFaW2r #javascript #webdevelopment #coding

𝐋𝐞𝐭'𝐬 𝐞𝐱𝐩𝐥𝐨𝐫𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐚 𝐛𝐢𝐭😉 This question caught my attention with how simple it is, based on inference from my experience with JavaScript, and I thought to explain 𝗜𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗮 𝗱𝘆𝗻𝗮𝗺𝗶𝗰𝗮𝗹𝗹𝘆 𝘁𝘆𝗽𝗲𝗱 𝗼𝗿 𝘀𝘁𝗮𝘁𝗶𝗰𝗮𝗹𝗹𝘆 𝘁𝘆𝗽𝗲𝗱 𝗹𝗮𝗻𝗴𝘂𝗮𝗴𝗲? 𝐓𝐡𝐞 𝐚𝐧𝐬𝐰𝐞𝐫: JavaScript is dynamically typed. In dynamically typed languages, all type checks are performed at runtime, that is, when the program is executing. So this means you can assign anything to the variable and it will work. This is because types are associated with values, not variables. This flexibility is one of the reasons JavaScript became so popular. It allows developers to move quickly and write readable code. But it also introduces trade-offs. (Nothing really is for free😔) Because types are checked only at execution, certain mistakes only appear when the code runs. Some of which include: ☑ Unexpected type coercion ☑ Runtime errors ☑ Harder-to-maintain large codebases This is one of the reasons TypeScript gained popularity. Unlike JavaScript, TypeScript, a statically typed language, insists on all checks being performed during compile/build run before we execute our program. This allows developers to catch many type-related errors before the code runs. In the end, understanding JavaScript’s dynamic nature helps you: ☑ Write safer code ☑ Avoid subtle bugs ☑ Appreciate when tools like TypeScript are helpful #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #FrontendDevelopment