Mastering JavaScript Hoisting: A Complete Guide

#js #19 **Optional Chaining in Javascript** Optional Chaining (?.) in JavaScript is used to safely access nested properties without causing errors if something is null or undefined. 🔹 Why We Need It Without optional chaining: const user = null; console.log(user.name); // ❌ Error: Cannot read property 'name' 👉 This crashes your code. ✅ With Optional Chaining const user = null; console.log(user?.name); // undefined ✅ (no error) 👉 If user is null or undefined, it stops and returns undefined 🔹 Syntax obj?.propertyobj?.[key]obj?.method() ✅ Examples 📌 1. Nested Objects const user = { profile: { name: "Navnath" }}; console.log(user?.profile?.name); // Navnath console.log(user?.address?.city); // undefined 📌 2. Function Calls const user = { greet() { return "Hello"; }}; console.log(user.greet?.()); // Hello console.log(user.sayHi?.()); // undefined (no error) 📌 3. Arrays const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[5]); // undefined 🔥 Real Use Case (Very Common) const response = { data: { user: { name: "Navnath" } }}; const name = response?.data?.user?.name; 👉 Avoids writing multiple checks like: if (response && response.data && response.data.user) ... ⚠️ Important Points ❌ Doesn’t Work on Undeclared Variables console.log(user?.name); // ❌ if user is not defined at all ⚠️ Stops Only on null / undefined const obj = { value: 0 }; console.log(obj?.value); // 0 ✅ (not skipped) 🔥 Combine with Nullish Coalescing (??) const user = {}; const name = user?.name ?? "Guest"; console.log(name); // Guest 🧠 Easy Memory Trick ?. → "If exists, then access" Otherwise → return undefined, don’t crash #Javascript #ObjectOrientedProgramming #SoftwareDevelopment

🚀 JavaScript Event Loop “JavaScript is single-threaded…” 🧵 👉 Then how does it handle timers, API calls, promises, and user interactions so smoothly?  What is the Event Loop? 👉 The Event Loop is a mechanism that continuously checks the call stack and task queues, and executes code in the correct order without blocking the main thread. 👉 It ensures JavaScript remains non-blocking and efficient. To Understand Event Loop, You Need 5 Core Pieces: 1️⃣ Call Stack 📚 The Call Stack is a data structure that keeps track of function execution in JavaScript. It follows the Last In, First Out (LIFO) principle. ⚙️ How It Works: >> When a function is called → it is pushed onto the stack >> When the function completes → it is popped off the stack >> The stack always runs one function at a time Example: function greet() { console.log("Hello"); } greet(); 👉 Goes into stack → executes → removed 2️⃣ Web APIs 🌐 👉 Provided by the browser (not JavaScript itself) Handles async operations like: setTimeout, fetch, DOM events.... 3️⃣ Callback Queue (Macrotask Queue) 📥: The Callback Queue (also called Task Queue) is a place where callback functions wait after completing asynchronous operations, until the Call Stack is ready to execute them. ⚙️ How It Works: >> Async function (like setTimeout) runs in background >> After completion → its callback goes to Callback Queue Event Loop checks: > If Call Stack is empty → moves callback to stack > If not → waits 👉 Any callback from async operations like timers, events, or I/O goes into the Callback Queue (except Promises, which go to Microtask Queue). 4️⃣ Microtask Queue ⚡: The Microtask Queue is a special queue in JavaScript that stores high-priority callbacks, which are executed before the Callback Queue. ⚙️How It Works: Execute all synchronous code (Call Stack) Check Microtask Queue Execute ALL microtasks Then move to Callback Queue 5️⃣ Event Loop 🔁 👉 Keeps checking: 👉 “Is the call stack empty?” If YES: >> Execute all microtasks >> Then execute macrotasks Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); Promise.resolve().then(() => {  console.log("Promise"); }); console.log("End"); Output: Start End Promise Timeout 🚀 Key Takeaways: >> JS executes synchronous code first >> Then Microtasks (Promises) completely >> Then Callback Queue (setTimeout, events) >> Event Loop keeps checking and moving tasks #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #Frontend #Coding #Developers #Programming #LearnJavaScript #100DaysOfCode

Here’s something commonly asked in JavaScript interviews 👇 Shallow vs Deep Copy Shallow Copy Copies only top-level properties. Nested objects are copied by reference, so changes affect the original. 👉 Ways: Object.assign(), spread (...), Array.from() Deep Copy Creates a fully independent copy, including nested objects. A common approach: JSON.parse(JSON.stringify(obj)) ⚠️ Catch with JSON.stringify() It fails for: • functions (removed) • undefined (removed or become null if arr) • Date (becomes string) • NaN / Infinity (become null) • Map, Set, RegExp (structure lost) • circular references (error) ✅ Better approach const newObj = structuredClone(obj) ✔ Handles most cases (Map, Set, Date, circular refs) ❌ Still can’t clone functions 🔥 Advanced: Custom Deep Clone If you also want to handle functions, you need a custom solution: function deepClone(obj) { if (obj === null || typeof obj !== "object") return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (typeof obj === "function") return obj.bind({}); if (Array.isArray(obj)) { return obj.map(item => deepClone(item)); } const cloned = {}; for (let key in obj) { cloned[key] = deepClone(obj[key]); } return cloned; } ⚠️ Note: • Functions are copied by reference (true cloning isn’t really possible) 💡 Takeaway • Use shallow copy for simple cases • Use structuredClone() for most real scenarios • Use custom clone only when you need full control Don't forget to follow Mohit Sharma 🚀 for more. #JavaScript #Frontend #WebDevelopment #InterviewPrep #ReactJS

✅ Top 50 Most Asked JavaScript Interview Questions 📌 Save this list — it’s a goldmine for your prep! 1. What is Debouncing in JavaScript? 2. Understanding Promise.all() 3. What is Deep Equal? 4. Understanding Event Emitters 5. What is Array.prototype.reduce()? 6. Simplifying arrays – Flattening 7. Merging data structures 8. Selecting DOM Elements – getElementsByClassName 9. Avoiding redundant computations with memoization? 10. Safer nested property access: get (or optional chaining)? 11. Hoisting in JavaScript? 12. Differences between let, var, and const? 13. Explain the difference between == and === ? 14. Understanding the Event Loop in JavaScript? 15. What is Event Delegation in JavaScript? 16. How does this work in JavaScript? 17. What sets Cookies, sessionStorage, and localStorage apart? 18. How do <script>, <script async>, and <script defer> differ? 19. What's the difference between null, undefined, and undeclared? 20. What's the difference between .call() vs .apply()? 21. How does Function.prototype.bind work? 22. Why use arrow functions in constructors? 23. How does prototypal inheritance work? 24. Differences between: function Person(){}, const person = Person(), and const person = new Person() 25. Function declarations vs. function expressions? 26. What are the different ways to create objects in JavaScript? 27. What is a higher-order function? 28. How do ES2015 classes differ from ES5 constructor functions? 29. What is event bubbling? 30. What is event capturing? 31. How do mouseenter and mouseover differ? 32. What's the difference between synchronous and asynchronous functions? 33. What is AJAX? 34. What are the pros and cons of using AJAX? 35. What are the differences between XMLHttpRequest and fetch()? 36. What are the various data types in JavaScript? 37. How do you iterate over object properties and array items? 38. Benefits of spread syntax vs. rest syntax? 39. Differences between Map vs. plain objects? 40. Differences between Map/Set and WeakMap/WeakSet 41. Practical use cases for arrow functions? 42. What are callback functions in asynchronous operations? 43. What is debouncing and throttling? 44. How does destructuring assignment work? 45. What is function hoisting? 46. How does inheritance work in ES2015 classes? 47. What is lexical scoping? 48. What are scopes in JavaScript? 49. What is the spread operator? 50. How does this work in event handlers? ✅ Go through these, practice, and you’ll be ready for almost any JS interview! Follow Hrithik Garg 🚀 for more. #frontend #interview #opportunity #react #javascript #angular #backend #nodejs

⏱️ 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗖𝗼𝗱𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Async testing in JavaScript is one of those areas where things look correct — but fail silently if done wrong. 📞 🔙 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸-𝗕𝗮𝘀𝗲𝗱 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 When your function depends on callbacks, your test must explicitly tell the test runner when it's done. it("should fetch data (callback)", (done) => {  fetchData((err, data) => {  if (err) return done(err);  expect(data).toBe("hello");  done(); // critical!  }); }); ❯❯❯❯ If you see callbacks → use done carefully. ⏳ 𝗣𝗿𝗼𝗺𝗶𝘀𝗲-𝗕𝗮𝘀𝗲𝗱 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 Cleaner than callbacks, but still easy to mess up. You must return the promise from your test. it("should fetch data (promise)", () => {  return expect(fetchData()).resolves.toBe("hello"); }); ❯❯❯❯ Always return the promise OR use .resolves/.rejects. 🔄 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 (𝗠𝗼𝗱𝗲𝗿𝗻 𝗦𝘁𝗮𝗻𝗱𝗮𝗿𝗱) The cleanest and most readable approach. it("should fetch data (async/await)", async () => {  const data = await fetchData();  expect(data).toBe("hello"); }); Handling errors - it("should throw error", async () => {  await expect(fetchData()).rejects.toThrow("error"); }); ❯❯❯❯ If you use async, always use await where needed. ✍ 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 ♦️ Callbacks → use done() ♦️ Promises → return the promise ♦️ Async/Await → use await properly ♦️ Always test both success AND failure paths. 👉 We’ll dive deeper into 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝘀𝗲𝘀 𝗼𝗳 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 in the upcoming posts. Stay tuned!! 🔔 Follow Nitin Kumar for daily valuable insights on LLD, HLD, Distributed Systems and AI. ♻️ Repost to help others in your network. #javascript #nodejs #testing #tdd #mocha #sinon #async

Lately, I’ve been going deeper into JavaScript coercion, and the more I study it, the less random JavaScript feels. A lot of behaviour that looks strange at first starts making sense once you realise that JavaScript is following rules defined in the ECMAScript specification. Recently, I focused on the abstract operations behind conversion, especially: - ToNumber - StringToNumber - ToString - ToPrimitive - OrdinaryToPrimitive One of the biggest takeaways for me is that JavaScript does not just “guess” what to do with values. It follows a defined process depending on the operation being performed. For example: - `"5" - 1` works because subtraction expects numbers. - `Number("")` becomes `0`. - `Number(undefined)` becomes `NaN`. - `ToNumber(BigInt)` throws an error, but `ToString(BigInt)` works. - When an object is involved, JS first tries to extract a primitive value before continuing coercion The part I found especially interesting was object-to-primitive conversion. If JavaScript encounters an object in a coercion context, it first checks for `Symbol.toPrimitive`. If that is not available, it falls back to `OrdinaryToPrimitive`, where the order of calling `toString()` and `valueOf()` depends on the hint being used: - string hint → toString() first - number hint → valueOf() first I also learned more about why string-to-number conversion behaves the way it does: - Number("25") gives 25 - Number(" 25 ") also gives 25 - Number("Infinity") gives Infinity - Number("1_000") gives NaN - Number("10n") gives NaN What is changing my understanding the most is this: - Instead of memorising “weird JavaScript behaviour”, I’m now trying to ask: 1. What operation is being performed? 2. What type of value does that operation expect? 3. Which abstract operation is JavaScript using behind the scenes? That mindset makes the language much easier to reason about. I’ve also been maintaining detailed notes on what I’m learning. If anyone wants to go deeper into these topics, I’ve uploaded them here: GitHub repo: https://lnkd.in/ephuZ-w6 #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #ECMAScript #100DaysOfCode

✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️  Template Literals in JavaScript: Write Strings Like a Human ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/d_HhAEsM  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Why string concatenation becomes messy in real apps   ⇢ Template literals — the modern way to write strings   ⇢ Embedding variables & expressions using ${}   ⇢ Multi-line strings without \n headaches   ⇢ Before vs After — readability transformation   ⇢ Real-world use cases: HTML, logs, queries, error messages   ⇢ Tagged templates (advanced but powerful concept)   ⇢ How interpolation works under the hood   ⇢ Tradeoffs & common mistakes developers make   ⇢ Writing cleaner, more readable JavaScript  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Frontend #Programming #CleanCode #Hashnode

🚀 JavaScript Hoisting — Explained with Tricky Examples + Interview Points Ever wondered how JavaScript runs your code before it even reaches certain lines? That’s where hoisting comes in 👇 🔹 What is Hoisting? Hoisting is JavaScript's default behavior of moving declarations (not initializations) to the top of their scope during the compilation phase. 🔹 Simple Example console.log(a); // undefined var a = 10; 👉 Behind the scenes: var a; console.log(a); a = 10; 🔹 Tricky Cases (Very Important!) 1️⃣ var vs let vs const console.log(a); // undefined var a = 5; console.log(b); // ❌ ReferenceError let b = 10; 👉 let and const are hoisted BUT not initialized → they stay in Temporal Dead Zone (TDZ) 2️⃣ Function Declaration vs Function Expression greet(); // ✅ Works function greet() { console.log("Hello"); } greet(); // ❌ Error var greet = function() { console.log("Hello"); }; 👉 Function declarations are fully hoisted 👉 Function expressions behave like variables 3️⃣ Variable + Function Same Name var x = 10; function x() { console.log("Hello"); } console.log(x); // 10 👉 Function is hoisted first, but variable assignment overrides it 4️⃣ Inside Scope var x = 1; function test() { console.log(x); // undefined var x = 2; } test(); 👉 Local x is hoisted → shadows global x 🔹 Where & When Do We Use Hoisting? ✔ Helps understand execution flow ✔ Useful in debugging unexpected undefined values ✔ Important when working with functions before declaration ✔ Critical in interviews & writing clean code 👉 Best Practice: Always declare variables at the top Prefer let and const to avoid confusion Avoid relying on hoisting in production code 🔹 Interview Points 💡 ✔ What is hoisting? ✔ Difference between var, let, and const hoisting ✔ What is Temporal Dead Zone? ✔ Function declaration vs expression hoisting ✔ Why does undefined occur instead of error? ✔ Hoisting inside function scope ✔ Real-time debugging scenarios 🔹 Quick Tip 👉 Hoisting ≠ moving code physically 👉 It’s just how JavaScript executes code internally 💬 Mastering hoisting = Strong foundation in JavaScript 📌 Save this for interviews & teaching sessions! #JavaScript #Frontend #WebDevelopment #CodingInterview #LearnToCode

🚀 JavaScript Simplified Series — Day 26 You click a button… But nothing happens immediately 😳 Instead… it waits. Then suddenly → response comes. How does JavaScript handle this? 🤔 🔥 The Problem JavaScript runs line by line (synchronously) console.log("Start") console.log("Process") console.log("End") 👉 Output: Start Process End Everything runs one after another 😵 But Real World is Different Think about: 👉 API calls 👉 File loading 👉 Timers They take time ⏳ If JavaScript waits… everything will freeze ❌ 🔥 Solution → Asynchronous JavaScript JavaScript can handle tasks without blocking execution 🔹 Example with setTimeout console.log("Start") setTimeout(() => { console.log("Delayed Task") }, 2000) console.log("End") 👉 Output: Start End Delayed Task 🔍 What’s happening? 👉 setTimeout runs later 👉 JavaScript doesn’t wait 👉 Code continues execution 🔹 Callback in Async setTimeout(function() { console.log("Task Done") }, 1000) 👉 Function runs after delay 📌 This function is a callback 🔥 Real Life Example Ordering food 🍔 You order → wait Meanwhile → you do other work Food arrives later 👉 That’s async behavior 🔥 Simple Summary Sync → line by line execution Async → non-blocking execution Callback → function runs later 💡 Programming Rule Don’t block execution. Let JavaScript handle tasks asynchronously. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript (Callbacks) Day 27 → Promises (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 28 Promises made async code better… But still… something feels messy 😵 👉 Too many .then() 👉 Hard to read 👉 Looks like chaining hell What if async code could look like normal synchronous code? 🤔 🔥 Solution → Async / Await 🔹 The Problem with Promises fetchData() .then(data => { console.log(data) return processData(data) }) .then(result => { console.log(result) }) .catch(err => console.log(err)) 👉 Works… but not clean ❌ 🔹 Async / Await (Cleaner Way) async function handleData() { try { let data = await fetchData() console.log(data) let result = await processData(data) console.log(result) } catch (err) { console.log(err) } } handleData() 👉 Looks simple & readable ✅ 🔍 What is happening? 👉 async → function always returns a promise 👉 await → waits for promise to resolve 🔹 Example function fetchData() { return new Promise(resolve => { setTimeout(() => { resolve("Data received") }, 2000) }) } async function getData() { let data = await fetchData() console.log(data) } getData() 👉 Output: Data received 🔥 Real Life Example Think of cooking 🍳 👉 Order ingredients 👉 Wait for delivery 👉 Then cook With async/await: Step by step… clean and clear 🔥 Simple Summary async → makes function async await → waits for result Result → clean & readable code 💡 Programming Rule Write async code like sync code. Clarity > complexity. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday