JavaScript this Trap: Understanding Context

🚀 Day 30 - 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

Scroll events giving you headaches? 😩 There's a better way. The Intersection Observer API lets you detect when elements enter the viewport — no scroll listeners, no layout thrashing, just clean and efficient JS. ⚡ I just published a full breakdown with real code examples, tips, and common mistakes to avoid. 🔧 Read it now 👉 hamidrazadev.com #javascript #webdev #frontend #learntocode #100daysofcode

💡 JavaScript Tricky Question let a = 'hello'; a[0] = 'H'; console.log(a); 👉 Output: `hello` ✅ Explanation: Strings in JavaScript are **immutable** (cannot be changed). Even though it looks like we’re modifying `a[0]`, JavaScript ignores it. So the original string stays the same. 🔹 To change it, you must create a new string: a = 'H' + a.slice(1); #JavaScript #WebDevelopment #Frontend #Coding #JSConcepts

Day 23 of #30DaysOfJavaScript ✨ Built a Random Quote Generator that displays motivational quotes at the click of a button. Simple yet powerful—perfect for practicing DOM manipulation and event listeners. What I learned: Selecting DOM elements with querySelector Array indexing with Math.random() Event listener implementation Dynamic innerHTML updates This mini-project reinforces core JavaScript concepts in a practical, user-friendly way. Every click brings a new spark of motivation! 💡 Building momentum one day at a time. #100DaysOfCode and here is the live link : https://lnkd.in/dms78WbK #WebDevelopment #Frontend #JavaScript

⚠️ Common Confusions about Control Flow : Switch case: switch-case executes all cases after a match unless you break. else if : else if chain works top-down — order matters. You can use truthy/falsy values directly in if . 🧠 Mindset Control flow = conditional storytelling. It helps your program make choices and respond differently to different inputs. Write readable branches. Avoid nesting too deep — use early return if needed.  #react #javascript #JS #ABK #code

🚀 Day 28 - 💡 JavaScript Tricky Question Explanation Promise.resolve(1)  .then(x => x + 1)  .then(x => { throw x; })  .catch(x => x + 1)  .then(x => console.log(x)); ✨ Output: 3 🧠 Explanation: 1️⃣ Promise.resolve(1) 👉 Starts resolved with value = 1 2️⃣ .then(x => x + 1) 👉 1 + 1 = 2 → passed to next then 3️⃣ .then(x => { throw x; }) 👉 throws 2 ❌ → Promise becomes rejected 👉 Skips remaining then and jumps to catch 4️⃣ .catch(x => x + 1) 👉 receives 2 → returns 3 👉 Promise becomes resolved again 5️⃣ .then(x => console.log(x)) 👉 logs final value → 3 📌 Key Points: - throw inside then = reject - catch handles error and can return new value - after catch, chain continues normally #JavaScript #WebDevelopment #Frontend #Coding #JSConcepts

Core mental model of useMemo() 💡 ➡️ It takes a pure function as the first argument and a dependency array as the second. ➡️ That function returns a value, and React reuses the previously cached result on later renders if the dependencies have not changed. ➡️ If the returned value is a primitive, React reuses the same value 🧠 This is commonly useful for expensive calculations. ➡️ If the returned value is an object or array, React reuses the same reference 🧠 This is commonly useful for stabilizing props passed to a memoized component created with React.memo() #javascript #typescript #react #useMemo() #memorization

What is a closure in JavaScript? A closure is a function that remembers variables from its outer scope even after that scope has finished executing. Why does this work? - `createCounter` runs once - It creates a variable `count` - The inner function “closes over” that variable - Even after `createCounter` finishes, `count` is still accessible Each time `counter()` runs: → it uses the same preserved state 💡 Closures are everywhere: - React hooks - Event handlers - Memoization - Encapsulation patterns They’re not just a concept — they’re part of how JavaScript manages state. #Frontend #JavaScript #React #WebDevelopment #SoftwareEngineering

A few years back… I thought all functions are hoisted the same way 😅 But actually… only one type gets VIP access 😅 👉 Function declaration → fully hoisted ✅ 👉 Function expression → hoisted as undefined ❌ 👉 Arrow function → same as above ❌ So this works 👇 sayHello() But these crash 👇 sayHi() sayBye() Because JavaScript treats them like variables first… and functions later 🤯 🔥 Rule: Only function declarations are safe to call before definition What’s the most confusing hoisting example you’ve seen? 😅 👉 var vs let? 👉 functions vs arrow functions? 👉 something weird in real project? Drop it in comments — let’s confuse everyone together 😂 #javascript #webdev #frontend #codingtips #developer