Arrow Functions vs Regular Functions in JavaScript

Day 10/50 – JavaScript Interview Question? Question: What's the difference between null and undefined? Simple Answer: undefined means a variable has been declared but not assigned a value, or a function doesn't return anything. null is an explicit assignment representing "no value" or "empty." 🧠 Why it matters in real projects: Understanding this distinction helps with API responses, function returns, and optional parameters. null is typically used to explicitly indicate "no object" while undefined usually indicates something wasn't initialized or doesn't exist. 💡 One common mistake: Using typeof null and expecting "null", but it actually returns "object" due to a historical JavaScript bug that was never fixed for backward compatibility. 📌 Bonus: let x; console.log(x); // undefined console.log(typeof x); // "undefined" let y = null; console.log(y); // null console.log(typeof y); // "object" (legacy bug!) // Checking for both if (value == null) { // true for both null AND undefined } if (value === null) { // true only for null } if (value === undefined) { // true only for undefined } #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

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 7/50 – JavaScript Interview Question? Question: What is Event Delegation and why should you use it? Simple Answer: Event Delegation is the technique of attaching a single event listener to a parent element instead of multiple listeners to individual child elements, taking advantage of event bubbling. 🧠 Why it matters in real projects: When you have hundreds or thousands of similar elements (like a large list or table), event delegation drastically reduces memory usage and improves initialization performance. It also automatically handles dynamically added elements without needing to attach new listeners. 💡 One common mistake: Forgetting to check the event target before executing logic, which can cause your handler to fire for unintended elements (like the parent container itself). 📌 Bonus: // ❌ Bad - 10,000 event listeners items.forEach(item => { item.addEventListener('click', handleClick); }); // ✅ Good - Just 1 event listener document.querySelector('.list').addEventListener('click', (e) => { if (e.target.matches('.item')) { handleClick(e); } }); #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 22/50 – JavaScript Interview Question? Question: What is the this keyword and how is it determined? Simple Answer: this refers to the object that is executing the current function. Its value is determined by how the function is called: in a method it's the object, in a regular function it's the global object (or undefined in strict mode), in an arrow function it's lexically inherited from the enclosing scope. 🧠 Why it matters in real projects: Understanding this is critical for object-oriented programming, event handlers, and React class components. Incorrect this binding is one of the most common sources of bugs, especially when passing methods as callbacks. 💡 One common mistake: Losing the this context when passing object methods as callbacks (like event handlers), resulting in this being undefined or pointing to the wrong object. 📌 Bonus: const user = { name: 'Alice', greet: function() { console.log(`Hello, ${this.name}`); }, greetArrow: () => { console.log(`Hello, ${this.name}`); // Won't work! } }; user.greet(); // "Hello, Alice" ✓ const greetFunc = user.greet; greetFunc(); // "Hello, undefined" - lost context! // Solutions for callback context: // 1. Bind button.addEventListener('click', user.greet.bind(user)); // 2. Arrow function wrapper button.addEventListener('click', () => user.greet()); // 3. Arrow function in class (React) class Component { handleClick = () => { // Auto-bound! console.log(this); } } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #ThisKeyword #InterviewPrep #OOP

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 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 9/50 – JavaScript Interview Question? Question: What is a closure and why is it useful? Simple Answer: A closure is a function that retains access to variables from its outer (enclosing) scope, even after the outer function has finished executing. 🧠 Why it matters in real projects: Closures enable data privacy (creating private variables), factory functions, memoization, and functional programming patterns. They're fundamental to modern JavaScript frameworks and libraries like React (hooks rely heavily on closures). 💡 One common mistake: Expecting closures to capture the value of a variable at the time of creation. Closures capture variables by reference, not by value, which can cause issues in loops with var. 📌 Bonus: // Classic closure problem with var for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Prints: 3, 3, 3 // Fixed with let (block scope) for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Prints: 0, 1, 2 // Practical use - private variables function createCounter() { let count = 0; // Private! return { increment: () => ++count, getCount: () => count }; } #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