Understanding Prototypal Inheritance in JavaScript

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 28/50 – JavaScript Interview Question? Question: What is destructuring in JavaScript? Simple Answer: Destructuring is a syntax that unpacks values from arrays or properties from objects into distinct variables. It provides a concise way to extract multiple values in a single statement. 🧠 Why it matters in real projects: Destructuring makes code cleaner and more readable, especially with React props, API responses, and function parameters. It's ubiquitous in modern JavaScript and reduces boilerplate code significantly. 💡 One common mistake: Trying to destructure null or undefined, which throws an error. Always provide default values or check for existence when destructuring data from APIs or external sources. 📌 Bonus: // Array destructuring const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5] // Object destructuring const user = { name: 'Alice', age: 30, city: 'NYC' }; const { name, age } = user; console.log(name); // "Alice" // Renaming variables const { name: userName, age: userAge } = user; // Default values (prevents undefined) const { country = 'USA' } = user; console.log(country); // "USA" // Nested destructuring const data = { user: { profile: { email: 'a@b.com' } } }; const { user: { profile: { email } } } = data; // React props destructuring function UserCard({ name, age, onDelete }) { return <div>{name}, {age}</div>; } // Function parameters function displayUser({ name, age = 18 }) { console.log(`${name} is ${age}`); } // Common mistake - destructuring undefined const { x } = null; // ✗ TypeError! const { x } = null || {}; // ✓ Safe with fallback #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #ES6 #Destructuring #WebDev #InterviewPrep

🚀 JavaScript Interview Prep Series — Day 6 Topic: Callbacks in JavaScript (Explained Simply) Continuing my JavaScript interview prep series, today I revised one of the most important asynchronous concepts: 👉 Callbacks in JavaScript Callbacks are fundamental to understanding async JavaScript, event handling, APIs, and even Promises. 🍽 Real-World Example: Restaurant Ordering Imagine ordering food at a restaurant. 1️⃣ You place your order and give your number/buzzer. 2️⃣ Kitchen prepares your food while you relax or do something else. 3️⃣ When food is ready, the waiter calls you. You don’t wait at the counter the whole time. Mapping to JavaScript Ordering food → Calling a function Cooking → Asynchronous work Waiter calling you → Callback execution 💻 Clean Callback Example function orderFood(dish, callback) { console.log("Order placed for:", dish); setTimeout(() => { console.log("Preparing food..."); callback(dish); }, 2000); } function notifyCustomer(dish) { console.log(dish + " is ready! Please collect it."); } orderFood("Burger", notifyCustomer); Output Order placed for: Burger Preparing food... Burger is ready! Please collect it. ✅ Why Callbacks Matter in Interviews Callbacks are used in: • Async operations • Event listeners • API calls • Timers • Node.js patterns Understanding callbacks makes learning Promises and async/await much easier. 📌 Goal: Share JavaScript concepts daily while preparing for interviews and help others revise core fundamentals. Next topics: callback hell, promises, async/await, execution context, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #Callbacks #AsyncJavaScript #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚀 “What Are the Different Types of Functions in JavaScript?” It sounds like a basic question. But in senior interviews, it’s rarely about listing syntax. It’s about whether you understand how functions define JavaScript’s architecture. Here’s how I would break it down in a real interview 👇 🔹 Regular (Named) Functions "function greet() {}" They’re hoisted, reusable, and show up clearly in stack traces. Ideal for utility logic and shared modules. 🔹 Function Expressions "const greet = function() {}" Not hoisted like declarations. Often used in closures and callbacks where execution order matters. 🔹 Arrow Functions "() => {}" Not just shorter syntax. They don’t bind their own "this". That makes them powerful in React components, event handlers, and async flows where lexical "this" avoids common bugs. 🔹 Higher-Order Functions Functions that accept or return other functions. Examples: "map", "filter", "reduce", middleware, custom hooks. This is where JavaScript leans into functional programming. 🔹 Callback Functions Functions passed to other functions for later execution. They power async patterns — from traditional callbacks to Promises and async/await. 🔹 Pure Functions Same input → same output. No side effects. Crucial in reducers, memoization, and predictable state management. 🔹 IIFE (Immediately Invoked Function Expression) "(function(){})()" Historically used for scope isolation before ES6 modules existed. 🔹 Curried Functions Functions returning functions: "add(2)(3)" Used for partial application and reusable, composable logic. 🔹 Constructor Functions Used with "new" to create instances before ES6 classes. They introduced prototype-based inheritance. 🔹 Generator Functions "function*" Pause and resume execution with "yield". Useful for custom iterators and controlled async flows. 💬 Interview insight Don’t stop at naming types. Connect them to real use cases: state management, async control, performance, architecture decisions. That’s what turns a simple question into a senior-level discussion. 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #JavaScript #JSInterview #FrontendEngineering #WebDevelopment #AsyncProgramming #FunctionalProgramming #ReactJS #SoftwareEngineering #TechInterviews

🚀 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 Question That Confuses 80% Developers Think you truly understand JavaScript’s async behavior? Let’s test it 👇 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 👉 What will be the output? Most developers answer: Start Timeout Promise End ❌ That’s WRONG. ✅ Correct Output: Start End Promise Timeout 💡 Why Does This Happen? This happens because of how the Event Loop works in JavaScript. Promise.then() → goes to the Microtask Queue setTimeout() → goes to the Macrotask Queue After the Call Stack is empty → Microtasks run first Then Macrotasks execute Understanding this difference is crucial for writing predictable asynchronous code. 📌 If You’re Preparing for Frontend Interviews, Master These: ✔ Event Loop & Execution Context ✔ Closures ✔ Hoisting ✔ Debouncing vs Throttling ✔ Shallow Copy vs Deep Copy ✔ Async/Await vs Promises ✔ Call, Apply, Bind ✔ This keyword behavior These are frequently asked in React, Next.js and modern JavaScript interviews. Drop your answer in the comments before checking the solution 👇 And share one tricky JS question you’ve faced recently! #JavaScript #FrontendDeveloper #WebDevelopment #ReactJS #NextJS #InterviewPreparation #CodingInterview #SoftwareDeveloper #TechCareers #Programming #100DaysOfCode

Javascript Interview Question ❓ 🧠 JavaScript Call Stack Explained (With Nested Functions) Ever wondered which function runs first when functions are nested in JavaScript? Let’s break it down 👇 function fn1() { function fn2() { function fn3() { console.log("fn3"); } fn3(); console.log("fn2"); } fn2(); console.log("fn1"); } fn1(); 🔍 What actually happens? JavaScript uses a Call Stack to execute functions. 📌 Rule: Call Stack follows LIFO (Last In, First Out) 🪜 Call Stack Flow (Visualized) Copy code fn3() ← executed & finished first fn2() fn1() ← called first, finished last ✔️ fn1 is called first ✔️ fn3 finishes first That’s LIFO in action 🔥 ❌ FIFO vs ✅ LIFO in JavaScript Call Stack ✅ LIFO Event Queue (setTimeout)✅ FIFO Microtask Queue (Promise)✅ FIFO 📌 Golden rule for interviews: Execution stack = LIFO Async queues = FIFO 🎯 Interview One-Liner JavaScript executes functions using a LIFO call stack, while asynchronous callbacks are processed via FIFO queues. If this cleared things up, drop a 👍 If you’ve ever been confused by this — you’re not alone 😄 Follow for JavaScript + Angular internals explained simply 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #CallStack #EventLoop #JSInterview #Angular #Programming #SoftwareEngineering

🚀 JavaScript Interview Prep Series — Day 19 Topic: JavaScript Modules — ESM vs CommonJS Continuing my JavaScript interview preparation journey, today I revised an important modern JS topic: 👉 JavaScript Modules (ESM vs CommonJS) Modules help us organize code, reuse functions, and keep projects maintainable. But in interviews, one common question is: What is the difference between ES Modules and CommonJS? Let’s simplify it. 📚 Real-World Example: Library Borrowing 🟢 ES Modules (Modern Library) Imagine a modern self-service library. You can: Pick only the chapters you need Borrow specific books Load things on demand ✅ Lightweight ✅ Efficient ✅ Future standard This is how ESM imports work. 🟠 CommonJS (Traditional Library) In an old library: You ask for one recipe… But the librarian gives you the entire cookbook set 😅 ❌ Loads whole module ❌ Synchronous ✅ Still widely used in Node.js This is how require() works. 💻 ES Modules Example (Modern) math.js export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; app.js import { add } from "./math.js"; console.log(add(2, 3)); ✅ Static ✅ Tree-shakable ✅ Works in browsers 💻 CommonJS Example (Node.js) math.js const add = (a, b) => a + b; module.exports = { add }; app.js const math = require("./math"); console.log(math.add(2, 3)); 🔥 Key Differences Feature ESM CommonJS Loading Static Runtime ✅ When to Use 👉 Use ESM for modern frontend and new Node projects 👉 Use CommonJS when working with legacy Node codebases 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Memory leaks, and more. Let’s keep learning consistently 🚀 #JavaScript #InterviewPreparation #ESModules #CommonJS #NodeJS #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

7 Days Interview Preparation Strategy for JS Full Stack Developer Day 2/7 – It’s JavaScript Time. If Day 1 was humility, Day 2 is clarity. Start with the core. 🔹 Revisit the fundamentals var, let, const Scope & hoisting Conditions (if, switch) Loops (for, while, for…of, for…in) Truthy / Falsy Type coercion You think this is easy. Interviewers love asking from here. --- 🔹 Master the JavaScript Standard Library Before reaching for Lodash… ask: Is this already built in? Focus on: Arrays map, filter, reduce find, some, every flat, flatMap sort (properly, with compare fn) Objects Object.keys, values, entries assign hasOwn Destructuring Strings includes replaceAll padStart Template literals Promises Promise.all Promise.allSettled Promise.race async/await Most utility libraries are just wrappers around these. --- 🔹 Advanced Concepts (that separate juniors from seniors) Closures Callbacks Promise chaining Event loop (microtask vs macrotask) this binding Arrow vs regular functions "use strict" — do you know what changes? --- 🔹 DOM Mastery (Without Frameworks) React hides this from you. Can you: Select & manipulate elements? Change color schemes dynamically? Attach & remove event listeners? Control video/audio programmatically? Make AJAX requests using fetch? Use localStorage, sessionStorage, cookies? Store structured data in IndexedDB? Draw on canvas? Understand basics of WebGL? When was the last time you built: A carousel from scratch? A responsive sidebar? A modal system without a library? Framework knowledge is rented. JavaScript fundamentals are owned. Tomorrow we move to backend depth. #JavaScript #FullStackDeveloper #InterviewPreparation #WebDevelopment #Frontend #NodeJS #SoftwareEngineering #CodingInterview #100DaysOfCode

Day 3/7 – TypeScript Time. Today is simple. Just study these 👇 • Advanced Generics • Conditional Types • Mapped Types • Utility Types (deep understanding) • keyof & Indexed Access • Template Literal Types • infer • Discriminated Unions • Branded Types • Variadic Tuple Types • Type Guards • Module Augmentation • Strict TS Config If you can explain these clearly in an interview — you’re not mid-level anymore. Tomorrow: Backend depth. #TypeScript #FullStackDeveloper #InterviewPreparation #SeniorEngineer #JavaScript #SoftwareEngineering