Mastering map(), filter(), and reduce() for JavaScript

🚀 JavaScript Interview Prep Series — Day 12 Topic: Error Handling in JavaScript (try, catch, finally) Continuing my JavaScript interview revision series, today’s focus was on a very important but often overlooked topic: 👉 Error Handling using try–catch–finally Good developers don’t just write code that works — they write code that handles failures gracefully. 🎪 Real-World Example: Circus Safety Net Imagine a trapeze performance in a circus. 1️⃣ Acrobat attempts a risky trick (TRY). 2️⃣ If something goes wrong, the safety net catches them (CATCH). 3️⃣ After performance, crew resets equipment no matter what (FINALLY). Whether success or failure, cleanup always happens. JavaScript error handling works the same way. 💻 Practical JavaScript Example async function fetchUser() { try { console.log("Fetching user data..."); const response = await fetch("https://lnkd.in/dAktZdHe"); if (!response.ok) { throw new Error("Failed to fetch data"); } const data = await response.json(); console.log("User:", data); } catch (error) { console.error("Something went wrong:", error.message); } finally { console.log("Cleanup: Stop loader / close connection"); } } fetchUser(); Execution Flow ✅ If request succeeds → catch block is skipped ❌ If request fails → catch handles error 🔁 finally runs in both cases ✅ Why Interviewers Ask This Because it tests: • Defensive coding skills • Async error handling understanding • Custom error throwing • Production-ready code thinking 📌 Goal: Share daily JavaScript concepts while preparing for interviews and help others revise fundamentals. Next topics: Event delegation, closures deep dive, execution context, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #ErrorHandling #AsyncJavaScript #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 16/50 – JavaScript Interview Question? Question: What's the difference between == comparison and Object.is()? Simple Answer: Both compare values, but Object.is() is more precise. Unlike == (which coerces types) and === (which has special cases for NaN and -0), Object.is() treats NaN as equal to NaN and distinguishes between +0 and -0. 🧠 Why it matters in real projects: While you'll mostly use ===, Object.is() is important for precise comparisons in algorithms, polyfills, and when implementing state management libraries. React uses Object.is() internally for comparing dependencies in hooks. 💡 One common mistake: Not knowing that NaN === NaN is false in JavaScript, which can cause bugs when checking for NaN values in data processing. 📌 Bonus: // Special cases where === fails NaN === NaN // false Object.is(NaN, NaN) // true ✓ +0 === -0 // true Object.is(+0, -0) // false ✓ // For most cases, === works fine Object.is(5, 5) // true 5 === 5 // true Object.is('foo', 'foo') // true 'foo' === 'foo' // true // Checking for NaN the right way Number.isNaN(value) // ✓ Best practice Object.is(value, NaN) // ✓ Also works value !== value // ✓ Clever trick (only NaN !== itself) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🧠 This is one of the MOST important JavaScript interview traps 👀 (Even developers with 3–5+ years pause here.) No frameworks. No libraries. No tricks. Just core JavaScript behavior. 🧩 Output-Based Question (Destructuring + Function Arguments) const example = ({ a, b, c }) => { console.log(a, b, c); }; example(0, 1, 2); ❓ What will be printed? ❌ Don’t run the code 🧠 Think like the JavaScript engine A. 0 1 2 B. 0 undefined undefined C. undefined undefined undefined D. Throws a TypeError 👇 Drop ONE option only (no explanations yet 👀) ⚠️ Why this question is important Senior interviewers love this pattern because it exposes whether you truly understand: • How destructuring really works • How function parameters are passed • The difference between objects and primitives • What happens when types don’t match expectations Most developers assume: “JavaScript will somehow map the values.” It won’t. When your mental model is wrong: APIs break Config objects fail Production errors appear unexpectedly This isn’t a syntax question. It’s a fundamentals question. Strong JavaScript developers don’t memorize answers. They understand how the engine thinks. 💡 I’ll pin the full breakdown after a few answers. #JavaScript #JSFundamentals #CodingInterview #FrontendDeveloper #FullStackDeveloper #InterviewPrep #DevelopersOfLinkedIn #JSInterviewSeries

🚀 JavaScript Interview Prep Series — Day 3 Topic: JavaScript Event Loop Explained Simply Continuing my daily JavaScript interview brush-up, today I revised one of the most important interview topics: 👉 The JavaScript Event Loop This concept explains how JavaScript handles asynchronous tasks while still being single-threaded. Let’s break it down with a simple real-world example. 🍽 Real-World Example: Restaurant Kitchen Imagine a busy restaurant kitchen. 👨🍳 Chef = Call Stack The chef cooks one order at a time. 🧾 Order Board = Task Queue New orders are pinned and wait their turn. 🏃 Runner/Manager = Event Loop Checks if the chef is free and gives the next order. If cooking takes time, the chef doesn’t stand idle. Instead: Other quick tasks continue, Completed orders are delivered later. This keeps the kitchen efficient. JavaScript works the same way. 💻 JavaScript Example console.log("Start"); setTimeout(() => { console.log("Timer finished"); }, 2000); console.log("End"); Output: Start End Timer finished Why? 1️⃣ "Start" runs immediately. 2️⃣ Timer is sent to Web APIs. 3️⃣ "End" runs without waiting. 4️⃣ After 2 seconds, callback goes to queue. 5️⃣ Event Loop pushes it to stack when free. ✅ Why Event Loop Matters in Interviews Understanding it helps explain: • setTimeout behavior • Promises & async/await • Non-blocking JavaScript • UI responsiveness • Callback & microtask queues 📌 Goal: Revise JavaScript daily and share learnings while preparing for interviews. Next topics: Promises, Async/Await, Execution Context, Hoisting, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPrep #EventLoop #WebDevelopment #Frontend #LearningInPublic #Developers #CodingJourney #AsyncJavaScript

🚀 JavaScript Interview Prep Series — Day 13 Topic: Destructuring & Spread Operator in JavaScript Continuing my JavaScript interview revision journey, today’s focus was on two powerful and commonly used ES6 features: 👉 Destructuring 👉 Spread Operator Both help write cleaner, shorter, and more readable code. 📦 Real-World Example 1️⃣ Destructuring — Unpacking a Box Imagine receiving a box with many items, but you only take what you need: Laptop, charger, headphones, etc. Instead of using the whole box, you extract specific items. JavaScript destructuring works the same way — we extract values from arrays or objects. 2️⃣ Spread Operator — Combining Items Now imagine combining items from multiple boxes into one large container. Spread operator allows us to combine or expand values easily. 💻 Practical JavaScript Examples Array Destructuring const numbers = [10, 20, 30]; const [first, second] = numbers; console.log(first); // 10 console.log(second); // 20 Object Destructuring const user = { name: "Raja", age: 25 }; const { name, age } = user; console.log(name, age); Spread Operator — Combine Arrays const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1,2,3,4] Spread — Copy Object const userCopy = { ...user }; ✅ Why This Matters in Interviews Interviewers expect developers to know: • Modern JavaScript syntax • Clean data extraction • Immutable data patterns • Object/array manipulation Destructuring and spread are used everywhere in React and modern JS. 📌 Goal: Share daily JavaScript interview topics while preparing and learning in public. Next topics: Rest operator, shallow vs deep copy, event delegation, and more. Let’s keep improving daily 🚀 #JavaScript #InterviewPreparation #Destructuring #SpreadOperator #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚨 𝗧𝗵𝗲 𝗠𝗢𝗦𝗧 𝗖𝗼𝗺𝗺𝗼𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗧𝗿𝗮𝗽 🚨 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆 𝘃𝘀 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 Ever changed one object… and another object updated too? 😵 Interviewers LOVE this bug — because most devs miss why it happens. 🧠 𝗧𝗵𝗲 𝗥𝗘𝗔𝗟 𝗥𝗲𝗮𝘀𝗼𝗻 𝗜𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝘀 👉 𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝘀 𝗡𝗼𝗻-𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝗮𝗹𝘂𝗲𝘀 ✅ 𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝗮𝗹𝘂𝗲𝘀 string, number, boolean, null, undefined Copied by value Each variable gets its own copy Safe from side effects ❌ 𝗡𝗼𝗻-𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝗮𝗹𝘂𝗲𝘀 object, array, function Copied by reference Multiple variables point to the same memory location This is where bugs begin 🐛 🧩 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆 (𝗧𝗵𝗲 𝗧𝗿𝗮𝗽) A shallow copy copies: ✅ Primitive values → by value ❌ Nested objects → by reference const original = { name: "JS", skills: { lang: "JavaScript" } }; const copy = { ...original }; copy.skills.lang = "TypeScript"; console.log(original.skills.lang); // TypeScript 😬 📌 Why did it change? Because skills is a non-primitive, and both objects reference the same memory. 🧩 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 (𝗧𝗵𝗲 𝗦𝗮𝗳𝗲 𝗪𝗮𝘆) A deep copy duplicates all levels, including non-primitive values. const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.skills.lang = "Python"; console.log(original.skills.lang); // JavaScript ✅ Now each object lives in its own memory space. ⚡ Why Interviewers Love This Question ✔️ Tests memory understanding, not syntax ✔️ Reveals React state mutation mistakes ✔️ Common Redux / Context API bug ✔️ Asked in React, JS & System Design rounds 🧠 Interview Rule to Remember Primitive? → Safe copy Non-Primitive? → Reference alert 🚨 Nested state in React? → Deep copy ONLY Complex objects? → structuredClone() or lodash.cloneDeep() 💡 If you understand this, you’re already ahead of 70% of candidates. #JavaScript #ReactJS #FrontendInterview #WebDevelopment #SoftwareEngineering #CodingTips

🚀 JavaScript Interview Prep Series — Day 7 Topic: Currying in JavaScript (Made Simple) Continuing my JavaScript interview prep series, today’s topic is: 👉 Currying in JavaScript Currying is often asked in interviews and used in functional programming patterns, but it’s actually simpler than it sounds. 🥪 Real-World Example: Sandwich Customization Imagine ordering a sandwich in steps: 1️⃣ Choose bread 2️⃣ Choose protein 3️⃣ Choose toppings At each step, your previous choice is remembered until the sandwich is complete. You don’t choose everything at once — choices are applied step by step. JavaScript works similarly with currying: A function takes one argument at a time and returns another function that takes the next argument. 💻 Currying Example in JavaScript Normal function Copy code Javascript function makeSandwich(bread, protein, toppings) { return `${bread} sandwich with ${protein} and ${toppings}`; } Curried version const makeSandwich = (bread) => (protein) => (toppings) => `${bread} sandwich with ${protein} and ${toppings}`; const wheatBase = makeSandwich("Wheat"); const turkeySandwich = wheatBase("Turkey"); console.log(turkeySandwich("Lettuce & Tomato")); Output Wheat sandwich with Turkey and Lettuce & Tomato Each step locks in previous values. ✅ Why Currying Matters in Interviews Currying helps with: • Partial application • Reusable functions • Functional programming patterns • Cleaner data pipelines • Framework-level optimizations 📌 Goal: Share daily JavaScript interview concepts while revising fundamentals and learning in public. Next topics: Debouncing, Throttling, Hoisting deep dive, Execution Context, and more. Let’s keep building consistency 🚀 #JavaScript #InterviewPreparation #Currying #FunctionalProgramming #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 12/50 – JavaScript Interview Question? Question: What is the difference between deep copy and shallow copy? Simple Answer: A shallow copy duplicates only the top-level properties, keeping references to nested objects. A deep copy recursively duplicates all levels, creating completely independent copies. 🧠 Why it matters in real projects: Understanding this prevents bugs when modifying copied objects. In React/Redux, shallow copies are often sufficient for state updates, but nested state requires deep copying. Financial data, user profiles, and configuration objects often need deep copies. 💡 One common mistake: Using spread operator {...obj} or Object.assign() and thinking you have a deep copy. These only perform shallow copies! 📌 Bonus: const original = { name: 'John', address: { city: 'NYC' } }; // Shallow copy - nested objects still shared const shallow = { ...original }; shallow.address.city = 'LA'; console.log(original.address.city); // "LA" - Oops! // Deep copy options: // 1. Modern way (careful with functions/dates) const deep1 = structuredClone(original); // 2. JSON method (loses functions, dates become strings) const deep2 = JSON.parse(JSON.stringify(original)); // 3. Use lodash for complex objects const deep3 = _.cloneDeep(original); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🚀 JavaScript Interview Prep Series — Day 4 Topic: Higher Order Functions in JavaScript Continuing my JavaScript interview brush-up series, today’s topic is another core JavaScript concept used everywhere in modern development: 👉 Higher Order Functions (HOF) You use them daily in JavaScript, often without realizing it. ☕ Real-World Example: Coffee Shop Customization Imagine ordering coffee. The barista takes: A base drink, and Your custom instructions Then prepares a personalized drink. Mapping to JavaScript Barista → Higher Order Function Custom instructions → Callback Function Final drink → Returned Function / Result So the barista doesn’t just make coffee — they use instructions to customize it. Similarly, Higher Order Functions: ✔ Take functions as input ✔ Or return functions as output 💻 JavaScript Example Example 1 — Using map() const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8] Here: map() is a Higher Order Function num => num * 2 is the callback Example 2 — Function Returning Function function createMultiplier(factor) { return function(number) { return number * factor; }; } const double = createMultiplier(2); console.log(double(5)); // 10 The function remembers the factor and creates custom multipliers. ✅ Why This Matters in Interviews Higher Order Functions are everywhere: • map, filter, reduce • Event handling • Functional programming • React patterns • Data transformation logic Understanding them improves code readability and reuse. 📌 Goal: Share daily JavaScript concepts while preparing for interviews and help others revise fundamentals too. Next topics coming: promises, async/await, execution context, hoisting, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #HigherOrderFunctions #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney #FunctionalProgramming