Implement it by yourself Ep: 1 "Event Emitter"🚀

The best way to learn any topic is to try it yourself. Start with a very simple version, and if you have time, gradually move on to more complex ones.

In episode one of “Implement it by Yourself,” we are going to explore ⚰️ Event Emitters.
Event Emitters are everywhere; it's a concept. There is a class in Node.js👇, and Meta👇 has its own implementation and several other.

🛫 The high level idea 🛫

An event emitter is like a person shouting news or updates, and others (listeners) can choose to listen and respond to the updates.

Here’s how it works: the emitters shout, meaning the emitter sends out a signal (event) saying, “Something happened!”; then, listeners respond, meaning anyone who is "listening" for that event can hear it and decide what to do when it happens.

🌿 Real Life Example 🌿

imagine you have a doorbell: the doorbell = event emitter because it emits an event whenever someone presses it, and listener = you because you’re listening for the doorbell, and when you hear it ring, you get up and answer the door.

In code, the event emitter creates and sends (or "emits") events, while listeners are functions that wait for those events and take action when they occur.

🔥Technical requirements🔥

• The EventEmitter should allow subscribing to events and emitting them.

Methods:

• subscribe

  • Takes two arguments: the event name (string) and a callback function.

  • The callback function is called when the event is emitted.

  • An event can have multiple listeners. Callbacks are executed in the order they were subscribed.

  • Returns an array of results from the callbacks.

  • Provides an unsubscribe method to remove the callback from subscriptions, returning undefined.

• emit

  • Takes two arguments: the event name (string) and an optional array of arguments for the callbacks.

  • If callbacks are subscribed to the event, execute all callback associated with that event.
    other wise do nothing (if you love to throw exception you can throw one).

☠️ Enough text show me the code usage ☠️

const emitter = new Emitter()

//It should support event subscribing

const sub1  = emitter.subscribe('event1', callback1)
const sub2 = emitter.subscribe('event2', callback2)
// same callback could subscribe 
// on same event multiple timesconst sub3 = emitter.subscribe('event1', callback1)

emit(eventName, ...args) 
//is used to trigger the callbacks, with args relayed

emitter.emit('event1', 1, 2);
// callback1 will be called twice

//Subscription returned by subscribe() has a unsubscribe() 
//method that could be used to unsubscribe

sub1.unsubscribe()
sub3.unsubscribe()
// now even if we emit 'event1' again, // callback1 is not called anymore

💡The idea how we can implement this💡

• Every instance create eventMap [a hashmap in java or object in Javascript].

• Every key in map is eventName mapped to an array which contains all callback associated with that event.

• When you call subscribe, it registers the callback for the specified eventName.

• The subscribe method returns an object with an unsubscribe method.

• Calling unsubscribe will:

  • Find the index of the callback in the eventMap for the given eventName.

  • Remove the callback from the eventMap if it exists.

  • If there are no more callbacks for the eventName, it deletes the eventName from the eventMap.

This allows users to remove their event listeners when they are no longer needed.

👩‍💻Final Code (JavaScript)👩‍💻

🧗‍♀️Where 2 practice ? 🧗‍♀️

LeetCode lovers solve this https://leetcode.com/problems/event-emitter/description/
BigFrontend lovers practice this https://bigfrontend.dev/problem/create-an-Event-Emitter

Summary

• Event Emitters are like to a person shouting news, where the subscriber or audience behave accordingly .

  A real-life analogy could be a doorbell where you(Listener)always listen to doorbell and whenever doorbell rings(event emitted) and you perform the associated action ie open the door.

  Technical requirements for implementing an EventEmitter are creating a class including methods like subscribe , emit and unsubscribe/remove.

  It can be implement using Hashmap [eventName->array of callbacks] and maintaining list of callbacks for every event name.

• Resources for practicing the implementation of Event Emitters are offered on platforms like LeetCode and BigFrontend.

Thanks for being with me so far .

connect with me here https://www.linkedin.com/in/arsalan-adeeb/

Happy Coding ❤️❤️❤️

And finally dont forget to like and comment