JavaScript Interview Question: null vs undefined

🚀 Day 38/365 – Top JavaScript Interview Question Asked in Companies 🔥 const a = {  b: 10,  c: 20, }; const b = {  c: 30 }; a[b] = { d: 40 }; console.log(a); ✅Output: { b: 10, c: 20, "[object Object]": { d: 40 } } 💡 Why does this happen? In JavaScript, object keys can only be strings or symbols. When we use an object (b) as a key: a[b] = { d: 40 }; JavaScript automatically converts that object into a string using .toString(). And when an object is converted to string, it becomes: "[object Object]" So internally, JavaScript does this: a["[object Object]"] = { d: 40 }; That’s why the final object contains a new key called: "[object Object]" #JavaScript #FrontendDeveloper #WebDevelopment #JSInterview #CodingInterview #365DaysOfCode #SoftwareEngineer #LearnToCode #Developers #TechCareers

Day 11/50 – JavaScript Interview Question? Question: What is the difference between Promise.all() and Promise.race()? Simple Answer: Promise.all() waits for all promises to resolve (or one to reject) and returns an array of results. Promise.race() returns as soon as the first promise settles (resolves or rejects), ignoring the others. 🧠 Why it matters in real projects: Use Promise.all() when you need multiple API calls to complete before proceeding (like fetching user data and their posts). Use Promise.race() for implementing timeouts or choosing the fastest response from multiple sources. 💡 One common mistake: Not realizing that Promise.all() fails fast—if any promise rejects, the entire operation fails immediately, even if other promises are still pending. 📌 Bonus: // Promise.all - all must succeed const results = await Promise.all([ fetch('/api/user'), fetch('/api/posts'), fetch('/api/comments') ]); // If any fails, all fail // Promise.race - first one wins const result = await Promise.race([ fetch('/api/data'), new Promise((_, reject) => setTimeout(() => reject('Timeout'), 5000) ) ]); // Implements a 5-second timeout // Use Promise.allSettled() to get all results regardless of failures #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 26/50 – JavaScript Interview Question? Question: What is currying in JavaScript? Simple Answer: Currying transforms a function that takes multiple arguments into a sequence of functions, each taking a single argument. Instead of add(a, b), you get add(a)(b). 🧠 Why it matters in real projects: Currying enables partial application, function composition, and more reusable code. It's fundamental to functional programming libraries like Ramda and is used in Redux middleware, event handlers, and configuration functions. 💡 One common mistake: Over-currying simple functions where it adds complexity without benefit. Use currying when you need partial application or composition, not everywhere. 📌 Bonus: // Regular function function add(a, b, c) { return a + b + c; } add(1, 2, 3); // 6 // Curried version function curriedAdd(a) { return function(b) { return function(c) { return a + b + c; }; }; } curriedAdd(1)(2)(3); // 6 // Practical use: Partial application const add5 = curriedAdd(5); const add5and10 = add5(10); console.log(add5and10(3)); // 18 // Generic curry function function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function(...nextArgs) { return curried.apply(this, [...args, ...nextArgs]); }; }; } // Usage const multiply = (a, b, c) => a * b * c; const curriedMultiply = curry(multiply); curriedMultiply(2)(3)(4); // 24 curriedMultiply(2, 3)(4); // 24 - flexible! #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #FunctionalProgramming #Currying #WebDev #InterviewPrep

Day 13/50 – JavaScript Interview Question? Question: What is hoisting in JavaScript? Simple Answer: Hoisting is JavaScript's behavior of moving declarations to the top of their scope during the compilation phase. Function declarations are fully hoisted, var declarations are hoisted but initialized as undefined, and let/const are hoisted but remain in the Temporal Dead Zone. 🧠 Why it matters in real projects: Understanding hoisting helps you avoid confusing bugs and write more predictable code. It explains why you can call functions before they're declared and why accessing var variables before declaration returns undefined instead of an error. 💡 One common mistake: Thinking hoisting physically moves code. It doesn't—it's about when variables and functions are registered in memory during the creation phase. 📌 Bonus: // Function hoisting - works! greet(); // "Hello" function greet() { console.log("Hello"); } // var hoisting - returns undefined console.log(name); // undefined (not ReferenceError) var name = "Alice"; // let/const - Temporal Dead Zone console.log(age); // ReferenceError let age = 25; // Function expressions are NOT fully hoisted sayHi(); // TypeError: sayHi is not a function var sayHi = function() { console.log("Hi"); }; #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 17/50 – JavaScript Interview Question? Question: What is debouncing and how do you implement it? Simple Answer: Debouncing is a technique that delays function execution until a certain amount of time has passed since the last invocation. It's perfect for limiting how often a function runs in response to rapid events. 🧠 Why it matters in real projects: Debouncing is essential for optimizing search autocomplete, form validation, window resize handlers, and scroll events. Without it, you'd make hundreds of unnecessary API calls or trigger expensive calculations on every keystroke. 💡 One common mistake: Confusing debouncing with throttling. Debouncing waits for a pause in events, while throttling executes at regular intervals regardless of event frequency. 📌 Bonus: // Debounce implementation function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } // Usage: Search autocomplete const searchAPI = (query) => { console.log('Searching for:', query); // Actual API call here }; const debouncedSearch = debounce(searchAPI, 500); // User types "javascript" // Only makes 1 API call after user stops typing for 500ms searchInput.addEventListener('input', (e) => { debouncedSearch(e.target.value); }); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🛑 JavaScript Interview: Do you know the Return Types? We use .map(), .filter(), and .reduce() every day. But can you explain precisely what they Return? Here is the breakdown that separates Junior Devs from Senior Devs: 1️⃣ .map() ➡️ Returns a New Array 📦 It creates a modified copy of the original array. Input: [1, 2, 3] (Array) Output: [2, 4, 6] (Array of same length) Use case: Transformation. 2️⃣ .filter() ➡️ Returns a New Array 📦 It returns a subset of the original array. Input: [1, 2, 3] (Array) Output: [2] (Array of smaller length) Use case: Selection/Removal. 3️⃣ .reduce() ➡️ Returns a Single Value 💎 This is the game changer. It processes the array to produce ONE result. Input: [1, 2, 3] (Array) Output: 6 (Number / String / Object) Use case: Accumulation (Sum, Object creation). 💡 The "Gotcha": If you assign .forEach() to a variable, it returns undefined. But .map() and .filter() will always give you an Array. Which one do you find most powerful? For me, .reduce() is pure magic. ✨ #javascript #webdevelopment #codingtips #reactjs #frontenddeveloper #softwareengineering #interviewquestions

Preparing for a JavaScript interview? Here’s a comprehensive list of the most commonly asked questions you should be ready for: 🔥 Core JavaScript - Difference between `var`, `let`, and `const` - What is hoisting? - What is closure? - Explain the `this` keyword - Difference between `==` and `===` - What is scope (global, function, block)? - Difference between null and undefined - What is prototype and prototype chain? - What is strict mode? ⚡ Functions & Objects - `call()`, `apply()`, and `bind()` - Arrow functions vs normal functions - Shallow copy vs deep copy - Object destructuring - Spread vs rest operator ⏳ Async JavaScript - Synchronous vs asynchronous JS - What are callbacks? - What are promises? - Promise states & chaining - `async/await` - What is the event loop? 🌐 DOM & Browser - What is event delegation? - Bubbling vs capturing - How does DOM manipulation work? - `localStorage`, `sessionStorage`, `cookies` - What is CORS? 🚀 Performance & Best Practices - Debouncing vs throttling - Memoization - Garbage collection - Memory leaks - Immutability - Pure functions Make sure to familiarize yourself with these topics to boost your confidence in your upcoming interviews. #JavaScript #Frontend #WebDevelopment #TechInterview #CodingInterview #JS #Developers

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

🚀 Mastering JavaScript Prototypes for Interviews As part of my frontend interview preparation, I revisited one of the most important core JavaScript concepts — Prototypes & Prototype Inheritance. Here’s a quick breakdown 👇 🔹 What is a Prototype? Every JavaScript object has an internal [[Prototype]] reference. When a property is not found on an object, JavaScript looks up the prototype chain. 🔹 Why Prototypes Matter? ✔ Memory optimization (shared methods) ✔ Inheritance implementation ✔ Core foundation behind ES6 classes 🔹 Prototype Chain Example _______________________________________ function User(name) { this.name = name; } User.prototype.greet = function() { return `Hi ${this.name}`; }; const user1 = new User("Shravanthi"); console.log(user1.greet()); ________________________________________ 🔹 Important Interview Topics • __proto__ vs prototype • Object.create() • Constructor functions • ES6 classes (syntactic sugar over prototypes) • Property lookup mechanism • Object.freeze() vs Object.seal() 💡 Key takeaway: Understanding prototypes deeply helps in debugging, writing optimized code, and explaining how JavaScript works under the hood. #JavaScript #FrontendDevelopment #InterviewPreparation #ReactJS #WebDevelopment #LearningJourney

Day 15/50 – JavaScript Interview Question? Question: What is the Event Loop in JavaScript? Simple Answer: The Event Loop is the mechanism that handles asynchronous operations in JavaScript's single-threaded environment. It continuously checks the Call Stack and Task Queues, executing code in a specific order: synchronous code first, then microtasks (promises), then macrotasks (setTimeout, events). 🧠 Why it matters in real projects: Understanding the Event Loop is crucial for debugging asynchronous behavior, preventing UI blocking, and optimizing performance. It explains why promises execute before setTimeout even with 0ms delay. 💡 One common mistake: Not understanding the priority of microtasks vs macrotasks, leading to unexpected execution order in complex async code. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: Timeout'), 0); Promise.resolve() .then(() => console.log('3: Promise 1')) .then(() => console.log('4: Promise 2')); console.log('5: End'); // Output order: // 1: Start // 5: End // 3: Promise 1 // 4: Promise 2 // 2: Timeout // Why? Sync code → Microtasks (Promises) → Macrotasks (setTimeout) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews