22. Big Tech Machine Coding: Custom EventEmitter & PubSub System • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

**EventEmitter (Publish-Subscribe Pattern)** software architecture ka sabse powerful design pattern hai. Ye do components ko bina ek doosre ko jaane aapas me communicate karne deta hai (Decoupled Architecture).

**YouTube Channel Analogy:**
> **Publisher (YouTuber):** Video upload karta hai (`emit('new_video')`).  
> **Event Bus (YouTube Server):** Notification queue maintain karta hai (`events Map`).  
> **Subscribers (Followers):** Bell icon dabaya hua hai (`on('new_video', callback)`). Jaise hi video aati hai, saare subscribers ko message mil jata hai!

---

### 2. Big Tech L5/L6 Machine Coding: Complete `EventEmitter` From Scratch

```javascript
class EventEmitter {
    constructor() {
        // Event names aur unke callbacks ki Map: { 'login': [fn1, fn2] }
        this.events = new Map();
    }

// 1. Subscribe to an event
    on(eventName, listener) {
        if (typeof listener !== 'function') {
            throw new TypeError('Listener must be a function');
        }
        if (!this.events.has(eventName)) {
            this.events.set(eventName, []);
        }
        this.events.get(eventName).push(listener);

// Return unsubscribe function (Modern pattern)
        return () => this.off(eventName, listener);
    }

// 2. Trigger an event with data payload
    emit(eventName, ...args) {
        if (!this.events.has(eventName)) return false;
        
        // Copy array to prevent mutation issues during emission
        const listeners = [...this.events.get(eventName)];
        listeners.forEach(fn => fn.apply(this, args));
        return true;
    }

// 3. Unsubscribe a specific listener
    off(eventName, listener) {
        if (!this.events.has(eventName)) return this;

const filtered = this.events.get(eventName).filter(fn => fn !== listener);
        if (filtered.length === 0) {
            this.events.delete(eventName);
        } else {
            this.events.set(eventName, filtered);
        }
        return this;
    }

// 4. Subscribe for ONE-TIME execution only
    once(eventName, listener) {
        const onceWrapper = (...args) => {
            this.off(eventName, onceWrapper); // Self-destruct before execution
            listener.apply(this, args);
        };
        return this.on(eventName, onceWrapper);
    }

// 5. Utility: Get active listener count
    listenerCount(eventName) {
        return this.events.has(eventName) ? this.events.get(eventName).length : 0;
    }
}
```

---

### 3. Step-by-Step Live Verification

```javascript
const eventBus = new EventEmitter();

// Regular Subscriber
const unsubAuth = eventBus.on("AUTH_SUCCESS", (user) => {
    console.log("👤 User Authenticated:", user.name);
});

// One-Time Subscriber (Welcome popup)
eventBus.once("AUTH_SUCCESS", (user) => {
    console.log("🎉 Show Welcome Gift to:", user.name);
});

// Trigger 1
eventBus.emit("AUTH_SUCCESS", { name: "Rishabh", role: "Architect" });
// 👤 User Authenticated: Rishabh
// 🎉 Show Welcome Gift to: Rishabh

// Trigger 2 (Once listener should NOT fire!)
eventBus.emit("AUTH_SUCCESS", { name: "Rishabh", role: "Architect" });
// 👤 User Authenticated: Rishabh

// Unsubscribe
unsubAuth();
eventBus.emit("AUTH_SUCCESS", { name: "Rishabh" }); // Silent (0 listeners)
```

---

### 4. Comparison Table: PubSub vs Direct Callback Call

---

### 5. Big Tech Real-World Production Bug: Listener Leak

Node.js me agar kisi event par **10 se zyada listeners** add ho jayein, toh Node warning fekta hai: `MaxListenersExceededWarning`.  
Iska matlab hota hai ki tumne loop me bina `off()` kiye listeners add kar diye hain jo RAM leak kar rahe hain!

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **`once()` implementation me wrapper function kyun use hota hai?** -> Taaki callback run hone se pehle hi wo khud ko list se `off()` karke self-destruct kar sake.
2. **EventEmitter me `Map` use karna plain object `{}` se behtar kyun hai?** -> `Map` me prototype pollution nahi hota aur kisi bhi custom type ka event name support hota hai.
3. **DOM `CustomEvent` aur Node `EventEmitter` me kya fark hai?** -> `CustomEvent` browser DOM tree me bubble hota hai; `EventEmitter` pure JavaScript in-memory event bus hai.

---
**Next Topic:** 23. Big Tech Machine Coding: Deep Clone with Circular References & LRU Cache

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Medium

1. Complete EventEmitter Implementation (Machine Coding)

Build a robust `EventEmitter` class with `.on()`, `.emit()`, `.off()`, and `.once()` methods.

💡 View Pro Interview Hint

• Use a Map of arrays to store event listeners.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Complete EventEmitter Implementation (Machine Coding)

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track