JavaScript Generators & Yield Keyword Explained

Day 50/50 – JavaScript Interview Question? Question: What is the difference between setTimeout(), setImmediate(), and process.nextTick() in Node.js? Simple Answer: setTimeout() schedules callback in macrotask queue after delay. setImmediate() executes in next event loop iteration. process.nextTick() executes before next phase (microtask, highest priority). Order: nextTick() → Promises → setImmediate() → setTimeout(). 🧠 Why it matters in real projects: Understanding these is crucial for Node.js performance, avoiding event loop starvation, and controlling async execution order. Misusing them causes performance bottlenecks or unexpected behavior. 💡 One common mistake: Overusing process.nextTick() starves the event loop since it runs before I/O. Also assuming setImmediate() runs immediately—it's actually next iteration, and order with setTimeout(0) can vary. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: setTimeout'), 0); setImmediate(() => console.log('3: setImmediate')); process.nextTick(() => console.log('4: nextTick')); Promise.resolve().then(() => console.log('5: Promise')); console.log('6: End'); // Output: // 1: Start // 6: End // 4: nextTick (highest priority) // 5: Promise (microtask) // 3: setImmediate (next loop) // 2: setTimeout (timer phase) // Use cases: // nextTick - let constructor complete class AsyncResource { constructor() { process.nextTick(() => this.init()); } } // setImmediate - break up long operations function processLargeArray(arr) { const chunk = arr.splice(0, 100); processChunk(chunk); if (arr.length > 0) { setImmediate(() => processLargeArray(arr)); // ✓ Yields } } // Danger: Recursive nextTick starves I/O! function dangerous() { process.nextTick(dangerous); // ✗ Infinite, blocks I/O } // Better: use setImmediate for recursion function better() { setImmediate(better); // ✓ Allows I/O } // Modern alternative to nextTick Promise.resolve().then(() => { // Microtask like nextTick, less aggressive }); 🎉 Series Complete! 50/50 JavaScript Interview Questions #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #NodeJS #EventLoop #AsyncProgramming #WebDev #SeriesComplete

Day 47/50 – JavaScript Interview Question? Question: What is the difference between prototype and __proto__? Simple Answer: prototype is a property on constructor functions containing the object used as prototype for new instances. __proto__ is the actual internal link on every object pointing to its prototype. Use Object.getPrototypeOf() instead of __proto__. 🧠 Why it matters in real projects: Understanding the prototype chain explains how JavaScript inheritance works, how methods like .map() are available on arrays, and how classes work under the hood. Essential for creating efficient object hierarchies. 💡 One common mistake: Confusing prototype with __proto__, or modifying Object.prototype which affects all objects globally. Also using deprecated __proto__ instead of standard Object.getPrototypeOf(). 📌 Bonus: // Constructor function function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; const alice = new Person('Alice'); // Key difference: console.log(Person.prototype); // Object with greet method console.log(alice.__proto__ === Person.prototype); // true console.log(Object.getPrototypeOf(alice) === Person.prototype); // true // Prototype chain: // alice → Person.prototype → Object.prototype → null // Inheritance example function Employee(name, title) { Person.call(this, name); this.title = title; } Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; const bob = new Employee('Bob', 'Developer'); console.log(bob.greet()); // Inherited from Person // Modern ES6 equivalent class ModernEmployee extends Person { constructor(name, title) { super(name); this.title = title; } } // Best practices: // ✓ Use Object.getPrototypeOf() const proto = Object.getPrototypeOf(alice); // ✗ Don't modify Object.prototype Object.prototype.myMethod = function() {}; // BAD! // ✗ Don't use __proto__ directly (deprecated) // ✓ Use Object.setPrototypeOf() instead #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 39/50 – JavaScript Interview Question? Question: What is the Set object and how does it differ from an Array? Simple Answer: A Set is a collection of unique values where duplicates are automatically removed. Unlike arrays, Sets don't have indices, maintain insertion order but optimized for checking membership (has()), and provide methods like add(), delete(), and clear(). 🧠 Why it matters in real projects: Sets are perfect for removing duplicates, checking membership (much faster than array.includes() for large datasets), implementing tags/categories, and maintaining unique collections. Operations like has(), add(), and delete() are O(1) compared to array's O(n). 💡 One common mistake: Trying to access Set elements by index (not possible) or expecting Sets to store objects by value rather than reference. Two objects with identical properties are considered different in a Set. 📌 Bonus: // Creating Sets const set = new Set([1, 2, 3, 2, 1]); // Set { 1, 2, 3 } const set2 = new Set('hello'); // Set { 'h', 'e', 'l', 'o' } // Basic operations set.add(4); // Add element set.has(2); // true - O(1) operation! set.delete(3); // Remove element set.size; // 3 (not length) set.clear(); // Remove all // Removing duplicates from array const nums = [1, 2, 2, 3, 3, 4]; const unique = [...new Set(nums)]; // [1, 2, 3, 4] // Performance comparison const arr = Array(1000000).fill(0).map((_, i) => i); const set3 = new Set(arr); // Array: O(n) - slow for large datasets console.time('array'); arr.includes(999999); console.timeEnd('array'); // ~5ms // Set: O(1) - constant time console.time('set'); set3.has(999999); console.timeEnd('set'); // ~0.01ms // Set operations (custom implementations) // Union const setA = new Set([1, 2, 3]); const setB = new Set([3, 4, 5]); const union = new Set([...setA, ...setB]); // Set { 1, 2, 3, 4, 5 } // Intersection const intersection = new Set( [...setA].filter(x => setB.has(x)) ); // Set { 3 } // Difference const difference = new Set( [...setA].filter(x => !setB.has(x)) ); // Set { 1, 2 } // Object reference gotcha const obj1 = { id: 1 }; const obj2 = { id: 1 }; const objSet = new Set([obj1, obj2]); console.log(objSet.size); // 2 (different references!) // Iteration for (let value of set) { console.log(value); // Sets are iterable } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 42/50 – JavaScript Interview Question? Question: What is the Temporal Dead Zone (TDZ) and why does it exist? Simple Answer: The Temporal Dead Zone is the period from entering a scope until a let or const variable is declared. During this time, accessing the variable throws a ReferenceError. It exists to catch errors early and make code more predictable. 🧠 Why it matters in real projects: Understanding TDZ helps debug confusing ReferenceErrors and explains why let/const behave differently from var. It enforces better coding practices by preventing access to uninitialized variables, making bugs more obvious during development rather than in production. 💡 One common mistake: Assuming let and const aren't hoisted because of TDZ. They ARE hoisted, but remain uninitialized in the TDZ. Also, using variables before declaration in complex scopes and getting unexpected ReferenceErrors. 📌 Bonus: // var - no TDZ (hoisted with undefined) console.log(varVariable); // undefined var varVariable = 'Hello'; // let/const - TDZ exists console.log(letVariable); // ReferenceError! let letVariable = 'World'; // TDZ in block scope function example() { // TDZ starts here for 'x' console.log(x); // ReferenceError: Cannot access before initialization let x = 10; // TDZ ends here console.log(x); // 10 } // Tricky TDZ scenario let x = 'outer'; function test() { // TDZ for inner 'x' starts here console.log(x); // ReferenceError! (not 'outer') let x = 'inner'; // TDZ ends } // Why TDZ exists: // 1. Catch errors early function process() { console.log(value); // Intentional? Typo? TDZ makes it obvious! let value = 42; } // 2. Make const meaningful const PI = 3.14159; // Without TDZ, accessing PI before declaration would give undefined // making const less useful // 3. Prevent confusing behavior function confusing() { // What should this print? function getValue() { return value; // 'outer' or ReferenceError? } let value = 'inner'; console.log(getValue()); } // typeof operator gotcha console.log(typeof undeclaredVar); // "undefined" - safe console.log(typeof declaredLater); // ReferenceError! - TDZ let declaredLater = 10; // Best practices: // ✓ Declare variables at the top of their scope function betterCode() { let x, y, z; // Declare first x = getValue(); y = processData(x); z = x + y; } // ✓ Use const by default, let when needed const config = { api: '/api' }; // Won't reassign let counter = 0; // Will change #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #TDZ #ES6 #InterviewPrep #Hoisting

🚀 JavaScript Interview Prep Series — Day 22 Topic: Proxy & Reflect in JavaScript Continuing my JS deep-dive, today I explored a powerful metaprogramming concept: 👉 Proxy & Reflect This is a favorite advanced interview topic because it shows how well you understand object behavior control in JavaScript. 🛡️ Real-World Analogy: VIP Security Checkpoint Think of a celebrity entering a hotel. 🔵 Proxy = Bodyguard (Interceptor) The bodyguard stands between the public and the celebrity. Every action goes through the bodyguard: Someone tries to read info → bodyguard checks Someone tries to change data → bodyguard validates Someone tries to delete → bodyguard can block ✅ Controls access ✅ Adds validation ✅ Logs activity In JavaScript, Proxy wraps an object and intercepts operations. 🟢 Reflect = Official Rulebook Now imagine the bodyguard has a standard protocol manual. When no special rule is needed, he simply follows the manual. 👉 That manual is Reflect Reflect provides default object operations and is commonly used inside Proxy traps to safely forward behavior. 💻 Basic Proxy Example const user = { name: "Raja" }; const proxy = new Proxy(user, { get(target, prop) { console.log(`Reading ${prop}`); return target[prop]; } }); console.log(proxy.name); ✅ Intercepts property access ✅ Adds custom behavior 💻 Proxy + Reflect (Best Practice) const user = { age: 25 }; const proxy = new Proxy(user, { set(target, prop, value) { if (prop === "age" && value < 0) { throw new Error("Invalid age"); } return Reflect.set(target, prop, value); } }); proxy.age = 30; 👉 Proxy handles logic 👉 Reflect performs the default operation Perfect combo 🔥 ⚡ Common Use Cases ✔ Validation layers ✔ Logging & debugging ✔ Access control ✔ Reactive frameworks (like Vue) ✔ Data binding ✔ API observability Proxies are widely used to intercept fundamental operations like get/set/delete. 🧠 Interview Quick Summary FeatureProxyReflectPurposeIntercept operationsPerform default operationsRoleControllerHelperUsed forCustom behaviorSafe forwardingWorks withhandler trapsstandard methods ⚠️ Pro Tips ✅ Always return true in set trap ✅ Prefer Reflect inside traps ✅ Avoid heavy proxies in hot paths (performance) ✅ Remember: Proxy wraps the target 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Web Workers, Advanced closures. Let’s keep growing consistently 🚀 #JavaScript #InterviewPreparation #Proxy #Reflect #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚀 JavaScript Interview Prep Series — Day 24 Topic: JavaScript Design Patterns (Must-Know for Interviews) Continuing my JavaScript interview preparation journey, today I revised a high-value concept: 👉 Design Patterns Design patterns are reusable solutions to common problems in software design. Interviewers love them because they show your code architecture thinking, not just syntax knowledge. Today I focused on 4 important patterns: ✅ Singleton ✅ Factory ✅ Observer ✅ Module 🧠 Real-World Understanding 🔵 Singleton — Only One CEO A company has only one CEO, and everyone must go through that same person. 👉 Ensures only one instance exists 👉 Shared across the application 🟢 Factory — Car Manufacturing Plant You tell the factory what you want: Car Truck Bike The factory decides how to create it. 👉 Creates objects based on input 👉 Hides creation complexity 🟠 Observer — YouTube Notifications When a YouTuber uploads a video: 📢 All subscribers get notified automatically. 👉 One-to-many relationship 👉 Used in event systems 🟣 Module — Organized Toolbox A toolbox exposes only the tools you need while keeping internal tools hidden. 👉 Encapsulation 👉 Public vs Private separation 💻 Practical Examples Singleton Example class Database { constructor() { if (Database.instance) { return Database.instance; } Database.instance = this; } } const db1 = new Database(); const db2 = new Database(); console.log(db1 === db2); // true Factory Example class VehicleFactory { create(type) { if (type === "car") return { wheels: 4 }; if (type === "bike") return { wheels: 2 }; } } const factory = new VehicleFactory(); console.log(factory.create("car")); Observer Example class Subject { constructor() { this.observers = []; } subscribe(fn) { this.observers.push(fn); } notify(data) { this.observers.forEach(fn => fn(data)); } } const channel = new Subject(); channel.subscribe(msg => console.log("User1:", msg)); channel.subscribe(msg => console.log("User2:", msg)); channel.notify("New video uploaded!"); Module Pattern Example const Counter = (() => { let count = 0; // private return { increment() { return ++count; }, getCount() { return count; } }; })(); Counter.increment(); 🎯 Why Interviewers Ask This Because design patterns show: • System design thinking • Code reusability skills • Clean architecture mindset • Real-world engineering maturity 🧠 When to Use ✔ Singleton → configs, DB connections ✔ Factory → object creation logic ✔ Observer → events, subscriptions ✔ Module → encapsulation 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Performance patterns, Advanced async flows. Let’s keep building strong fundamentals 🚀 #JavaScript #InterviewPreparation #DesignPatterns #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 45/50 – JavaScript Interview Question? Question: What is the difference between call(), apply(), and bind()? Simple Answer: All three set the this context explicitly. call(thisArg, arg1, arg2, ...) invokes immediately with individual arguments. apply(thisArg, [args]) invokes immediately with an array of arguments. bind(thisArg) returns a new function with this permanently bound, without invoking. Why it matters in real projects: These methods are essential for method borrowing, event handlers with correct context, React class component methods, and functional programming patterns. Understanding them prevents common this binding bugs and enables powerful composition techniques. One common mistake: Confusing when to use each method. Use call when you know arguments, apply when you have an array, and bind when you need a reusable function with fixed context. Also, forgetting that arrow functions can't have their this rebound. Bonus: const person = { name: 'Alice', greet(greeting, punctuation) { console.log(`${greeting}, ${ this.name }${punctuation}`); } }; const person2 = { name: 'Bob' }; // call() - invoke immediately with individual args person.greet.call(person2, 'Hello', '!'); // "Hello, Bob!" // apply() - invoke immediately with array person.greet.apply(person2, ['Hi', '?']); // "Hi, Bob?" // bind() - return new function (doesn't invoke) const greetBob = person.greet.bind(person2); greetBob('Hey', '.'); // "Hey, Bob." // Practical use cases: // 1. Method borrowing const arrayLike = { 0: 'a', 1: 'b', length: 2 }; const arr = Array.prototype.slice.call(arrayLike); console.log(arr); // ['a', 'b'] // Modern alternative const arr2 = Array.from(arrayLike); // 2. Finding max/min with apply const numbers = [5, 2, 9, 1, 7]; const max = Math.max.apply(null, numbers); // 9 // Modern alternative const max2 = Math.max(...numbers); // 3. Event handlers with correct context class Button { constructor(label) { this.label = label; this.clicks = 0; } handleClick() { this.clicks++; console.log(`${this.label}: ${this.clicks} clicks`); } render() { const btn = document.createElement('button'); // ✗ Wrong - loses context btn.addEventListener('click', this.handleClick); // ✓ Right - preserves context btn.addEventListener('click', this.handleClick.bind(this)); } } // 4. Partial application with bind function multiply(a, b) { return a * b; } const double = multiply.bind(null, 2); console.log(double(5)); // 10 console.log(double(10)); // 20 // 5. Function composition function add(x, y) { return x + y; } const add5 = add.bind(null, 5); const result = [1, 2, 3].map(add5); // [6, 7, 8] // Polyfill for bind (interview favorite) Function.prototype.myBind = function(context, ...args) { const fn = this; return function(...newArgs) { return fn.apply(context, [...args, ...newArgs]); }; }; // Arrow functions can't be rebound const arrowFunc = () => { console.log(this.name); }; const obj = { name: 'Test' }; arrowFunc.call(obj); // Won't bind 'this' to obj!

JavaScript Interview Preparation — Most Asked Concepts When preparing for frontend interviews, strong JavaScript fundamentals are essential. Frameworks evolve rapidly, but the core concepts of JavaScript remain constant. Here are some common areas that interviewers focus on: 1. JavaScript Basics - Primitive vs Non-Primitive data types - typeof operator - null vs undefined - NaN behavior - Dynamic typing in JavaScript These questions assess your understanding of how JavaScript operates internally. 2. ES6 Features - Arrow functions - Template literals - Destructuring - Enhanced object literals - Promises ES6 introduced powerful and cleaner features that are prevalent in modern codebases. 3. Variables & Hoisting A frequently discussed topic. Understand: - var vs let vs const - Block scope vs function scope - Hoisting behavior - Temporal Dead Zone Many developers use these concepts daily but find it challenging to explain them during interviews. 4. Functions & Execution Context Key concepts include: - Arrow functions vs traditional functions - this keyword behavior - call(), apply(), bind() A grasp of execution context demonstrates a deep understanding of JavaScript runtime behavior. 5. Functional Programming Modern JavaScript relies on: - Higher-order functions - map() - filter() - reduce() These are commonly used in frontend codebases. 6. Scope & Closures One of the most crucial JavaScript topics. Understand: - Global scope - Local scope - Scope chain - Closures Closures frequently appear in frontend interview questions. 7. Browser Concepts Frontend developers should be familiar with: - DOM (Document Object Model) - BOM (Browser Object Model) - Event handling These concepts explain how JavaScript interacts with the browser. One truth about JavaScript interviews is that while frameworks change every few years, JavaScript fundamentals remain unchanged. A strong foundation makes learning frameworks like React, Angular, or Vue much easier. Save this for your next frontend interview

Day 40/50 – JavaScript Interview Question? Question: What is the Map object and how does it differ from a plain Object? Simple Answer: A Map is a key-value collection where keys can be any type (objects, functions, primitives). Unlike plain objects, Maps maintain insertion order, have a size property, are iterable by default, and don't have prototype chain issues. 🧠 Why it matters in real projects: Maps are superior for frequently adding/removing entries, using non-string keys (like objects or DOM elements), maintaining order, and avoiding prototype pollution. They're essential for caching, memoization, and when you need dictionary-like behavior with better performance. 💡 One common mistake: Using objects as dictionaries when Map would be more appropriate, especially when keys might collide with prototype properties like toString or constructor. Also, forgetting that object keys are always converted to strings. 📌 Bonus: // Creating Maps const map = new Map(); map.set('name', 'Alice'); map.set(42, 'number key'); map.set(true, 'boolean key'); // Objects as keys (impossible with plain objects!) const objKey = { id: 1 }; map.set(objKey, 'object value'); // Basic operations map.get('name'); // 'Alice' map.has(42); // true map.delete(true); // Remove entry map.size; // 3 (not length) map.clear(); // Remove all // Key differences from Objects: // 1. Any type as key const func = () => {}; map.set(func, 'function key'); // ✓ Works! const obj = { [func]: 'test' }; // ✗ Converts to string // 2. Size property (O(1)) map.size; // Instant Object.keys(obj).length; // O(n) - slower // 3. Iteration order guaranteed const map2 = new Map(); map2.set('z', 1); map2.set('a', 2); map2.set('m', 3); for (let [key, value] of map2) { console.log(key); // 'z', 'a', 'm' (insertion order) } // 4. No prototype pollution const obj2 = {}; obj2.toString = 'hacked'; // Problem! const map3 = new Map(); map3.set('toString', 'safe'); // No issues // Practical use cases: // Caching with object keys const cache = new Map(); function expensiveOp(obj) { if (cache.has(obj)) { return cache.get(obj); } const result = /* expensive calculation */; cache.set(obj, result); return result; } // Counting occurrences const count = new Map(); for (let item of items) { count.set(item, (count.get(item) || 0) + 1); } // Converting between Object and Map const obj3 = { a: 1, b: 2 }; const map4 = new Map(Object.entries(obj3)); const obj4 = Object.fromEntries(map4); // When to use Map vs Object: // Use Map: frequent add/delete, non-string keys, need size // Use Object: static structure, JSON serialization, prototype methods #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Map #DataStructures #InterviewPrep #ES6

🚀 JavaScript Interview Prep Series — Day 27 Topic: Web APIs in JavaScript (Browser Superpowers) Continuing my JavaScript interview journey, today I revised an important concept that many developers misunderstand: 👉 Web APIs Web APIs are NOT part of JavaScript itself — they are provided by the browser environment to help JavaScript interact with the real world. 🏨 Real-World Example: Hotel Concierge Think of JavaScript as a hotel guest. When the guest needs something, they don’t do it themselves — they ask the concierge (browser). The concierge provides services like: 🧭 Where am I? → Geolocation 💾 Save my info → Storage 📦 Get data → Fetch ⏰ Run later → Timer JavaScript simply requests, and the browser handles the heavy work. 💻 1️⃣ Geolocation API navigator.geolocation.getCurrentPosition((pos) => { console.log(pos.coords.latitude); console.log(pos.coords.longitude); }); 📍 Gets user location from the browser. 💻 2️⃣ LocalStorage API localStorage.setItem("user", "Alice"); localStorage.getItem("user"); // "Alice" 💾 Stores data in the browser. 💻 3️⃣ Fetch API fetch("https://lnkd.in/gHTr-faK") .then(response => response.json()) .then(data => console.log(data)); 📦 Makes network requests. 💻 4️⃣ Timer API setTimeout(() => { console.log("This runs after 2 seconds"); }, 2000); ⏰ Runs code after a delay. 🧠 Key Interview Point 👉 JavaScript = single-threaded language 👉 Web APIs = browser-provided async helpers 👉 Event loop coordinates everything This is a very common interview trap. 🎯 Why Interviewers Ask This Because it tests: • Understanding of JS runtime • Async architecture knowledge • Event loop clarity • Browser vs JS distinction ⚠️ Pro Tips ✅ Web APIs come from the browser (or Node runtime) ✅ They enable asynchronous behavior ✅ They work with the event loop ✅ They are essential for real-world apps 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Loop deep dive (advanced), Microtasks vs Macrotasks, and more. Let’s keep the streak strong 🚀 #JavaScript #InterviewPreparation #WebAPIs #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney