JavaScript Interview Question: Object.is() vs == Comparison

Day 23/50 – JavaScript Interview Question? Question: What is memoization and how do you implement it? Simple Answer: Memoization is an optimization technique that caches function results based on input arguments. When the function is called again with the same arguments, it returns the cached result instead of recalculating. 🧠 Why it matters in real projects: Memoization dramatically improves performance for expensive computations like recursive Fibonacci, API response parsing, or complex filtering/sorting. React's useMemo and React.memo are built on this principle to prevent unnecessary re-renders. 💡 One common mistake: Over-memoizing everything, which adds memory overhead. Only memoize truly expensive operations. Also, not considering cache size limits, which can cause memory leaks in long-running applications. 📌 Bonus: // Basic memoization implementation function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) { console.log('Returning cached result'); return cache.get(key); } const result = fn.apply(this, args); cache.set(key, result); return result; }; } // Usage: Expensive calculation const fibonacci = memoize((n) => { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }); fibonacci(40); // Calculated once fibonacci(40); // Instant! (from cache) // React example const expensiveComponent = React.memo(({ data }) => { // Only re-renders if data changes }); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🔹 JavaScript Closures — Lecture 3 | Advanced Understanding & Interview Guide Closures are one of the most important concepts in JavaScript interviews. If you understand this concept deeply, you already think like a senior developer. How Closures Work Internally When a function is returned: ✔ JavaScript keeps its lexical environment ✔ Variables are preserved in memory ✔ Scope chain remains active This is how functions remember outer variables. Common Interview Question 👉 What will be the output? function test(){ for(var i=1; i<=3; i++){ setTimeout(function(){ console.log(i); },1000); } } test(); Output: 4 4 4 Why? var shares the same scope Closure captures final value Solution Using let (Block Scope) for(let i=1; i<=3; i++){ setTimeout(function(){ console.log(i); },1000); } Output: 1 2 3 Why MERN Developers Must Know Closures Closures are used in: ✔ React Hooks ✔ Async JavaScript ✔ Event loop behavior ✔ Callbacks and promises ✔ Functional programming Quick Summary ✔ Closure = function + remembered environment ✔ Enables data privacy ✔ Maintains state ✔ Critical for interviews 🔎 Keywords: advanced JavaScript closures, JavaScript interview preparation, lexical scope JavaScript, MERN stack interview #JavaScriptLearning #MERNStack #FrontendDeveloper #WebDevTips #Programming

🚀 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 19/50 – JavaScript Interview Question? Question: What is the difference between synchronous and asynchronous code? Simple Answer: Synchronous code executes line by line, blocking subsequent code until the current operation completes. Asynchronous code allows other operations to run while waiting for long-running tasks (like API calls) to complete. 🧠 Why it matters in real projects: Asynchronous code prevents UI freezing during network requests, file operations, or heavy computations. Modern web apps rely heavily on async patterns (Promises, async/await) to maintain responsive user interfaces while handling background tasks. 💡 One common mistake: Forgetting to use await with async functions, causing code to continue executing before the promise resolves, leading to undefined values or race conditions. 📌 Bonus: // Synchronous - blocks execution console.log('1'); const result = expensiveOperation(); // Everything waits console.log('2'); console.log(result); // Asynchronous - non-blocking console.log('1'); fetch('/api/data').then(result => { console.log(result); // Executes later }); console.log('2'); // Doesn't wait for fetch // async/await - cleaner async code async function getData() { console.log('1'); const result = await fetch('/api/data'); // Waits here console.log(result); console.log('2'); } // Common mistake async function wrong() { const data = fetch('/api/data'); // Missing await! console.log(data); // Promise object, not the data } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 24/50 – JavaScript Interview Question? Question: What is the difference between Object.freeze(), Object.seal(), and Object.preventExtensions()? Simple Answer: Object.freeze() makes an object completely immutable (can't add, delete, or modify properties). Object.seal() prevents adding/deleting properties but allows modifying existing ones. Object.preventExtensions() only prevents adding new properties. 🧠 Why it matters in real projects: These methods enforce immutability and data integrity, crucial for functional programming, Redux state management, and preventing accidental mutations in configuration objects or constants. 💡 One common mistake: Thinking Object.freeze() creates a deep freeze. It only freezes the top level—nested objects remain mutable. You need recursive freezing for complete immutability. 📌 Bonus: // Object.freeze() - completely immutable const frozen = Object.freeze({ name: 'Alice', age: 30 }); frozen.age = 31; // ✗ Ignored (or throws in strict mode) frozen.city = 'NYC'; // ✗ Can't add delete frozen.name; // ✗ Can't delete // Object.seal() - modify only const sealed = Object.seal({ name: 'Bob', age: 25 }); sealed.age = 26; // ✓ Can modify sealed.city = 'LA'; // ✗ Can't add delete sealed.name; // ✗ Can't delete // Object.preventExtensions() - most permissive const limited = Object.preventExtensions({ name: 'Charlie' }); limited.name = 'Chad'; // ✓ Can modify limited.age = 30; // ✗ Can't add delete limited.name; // ✓ Can delete // Deep freeze for nested objects function deepFreeze(obj) { Object.freeze(obj); Object.values(obj).forEach(val => { if (typeof val === 'object' && val !== null) { deepFreeze(val); } }); } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🚀 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

Day 24/30 – Sort an Array by Function Output in JavaScript Challange🔢 | Custom Comparator 📌 Problem Given: An array arr A function fn Return a new array sortedArr sorted in ascending order based on the value returned by fn(arr[i]). You can assume: fn always returns a number Sorting must be based on fn output 🧠 Example arr = [5, 4, 1, 2, 3] fn = (x) => x * x Since squares are: 25, 16, 1, 4, 9 Sorted by square value: [1, 2, 3, 4, 5] 💡 JavaScript Solution var sortBy = function(arr, fn) { return arr.slice().sort((a, b) => fn(a) - fn(b)); }; 🔎 Why This Works sort() accepts a comparator fn(a) - fn(b) ensures ascending order slice() prevents mutation of the original array Time Complexity: O(n log n) Space Complexity: O(n) (due to copy) ⚡ Real-World Use Cases Sorting users by age Sorting products by price Ranking students by score Sorting tasks by priority 🧠 Interview Insight This pattern is called “sort by projection”: You don’t sort by the element itself — You sort by a derived value. That’s a powerful abstraction concept. #JavaScript #30DaysOfJavaScript #CodingChallenge #JSLogic #ArrayMethods #WebDevelopment #FrontendDevelopment #LearnToCode #CodeEveryday #Programming #DeveloperJourney #TechCommunity #InterviewPrep #LeetCode #AsyncJavaScript #SoftwareEngineering #100DaysOfCode #BuildInPublic Custom comparator JavaScript Sort array by derived value JS JavaScript array sort interview question Higher order functions JavaScript JavaScript sorting techniques JS sort with callback Advanced JavaScript array methods JavaScript coding challenge solution Frontend interview preparation

JavaScript Interview Question: Shallow Copy vs Deep Copy 🧠 Q: What is the difference between Shallow Copy and Deep Copy in JavaScript? 1) Shallow Copy A shallow copy copies only the first level of an object. If the object contains nested objects, the reference to the nested object is copied — not the actual value 👉 Methods that create shallow copy: Object.assign() Spread operator { ...obj } Array.slice() [...arr] 📌 Problem: Modifying nested objects affects the original object. 2) Deep Copy A deep copy creates a completely independent copy of all levels of the object. Changes in the copied object do NOT affect the original. 👉 Common methods: structuredClone() JSON.parse(JSON.stringify(obj)) (limited approach) Libraries like Lodash (cloneDeep) 📌 Interview Insight: Most React state bugs happen because developers assume spread operator creates a deep copy — it does NOT. Understanding references is critical in frontend development. #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering #Programming #Coding #ReactJS #MERNStack #InterviewPreparation #Developers #TechCareers #LearningInPublic

🚀 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