var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),E=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of b(e))!N.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return t};var x=(t,e,i)=>(i=t!=null?f(y(t)):{},c(e||!t||!t.__esModule?s(i,"default",{value:t,enumerable:!0}):i,t)),_=t=>c(s({},"__esModule",{value:!0}),t);var h=w((C,d)=>{d.exports=_jsx_runtime});var F={};E(F,{default:()=>p,frontmatter:()=>k});var n=x(h());var l=MDXCodeBlock;var a=`export default class EventEmitter { constructor() { // Avoid creating objects via \`{}\` to exclude unwanted properties // on the prototype (such as \`.toString\`). this._events = Object.create(null); } /** * @param {string} eventName * @param {Function} listener * @returns {EventEmitter} */ on(eventName, listener) { // Group listeners by event name so emit/off only touch one bucket. if (!Object.hasOwn(this._events, eventName)) { this._events[eventName] = []; } this._events[eventName].push(listener); return this; } /** * @param {string} eventName * @param {Function} listener * @returns {EventEmitter} */ off(eventName, listener) { // Ignore non-existing eventNames. if (!Object.hasOwn(this._events, eventName)) { return this; } const listeners = this._events[eventName]; // Find only first instance of the listener. const index = listeners.findIndex( (listenerItem) => listenerItem === listener, ); if (index < 0) { return this; } this._events[eventName].splice(index, 1); return this; } /** * @param {string} eventName * @param {...unknown} args * @returns {boolean} */ emit(eventName, ...args) { // Return false for non-existing eventNames or events without listeners. if ( !Object.hasOwn(this._events, eventName) || this._events[eventName].length === 0 ) { return false; } // Make a clone of the listeners in case one of the listeners // mutates this listener array. const listeners = this._events[eventName].slice(); listeners.forEach((listener) => { listener.apply(null, args); }); return true; } } `;var m=`interface IEventEmitter { on(eventName: string, listener: Function): IEventEmitter; off(eventName: string, listener: Function): IEventEmitter; emit(eventName: string, ...args: Array): boolean; } export default class EventEmitter implements IEventEmitter { _events: Record>; constructor() { // Avoid creating objects via \`{}\` to exclude unwanted properties // on the prototype (such as \`.toString\`). this._events = Object.create(null); } on(eventName: string, listener: Function): IEventEmitter { // Group listeners by event name so emit/off only touch one bucket. if (!Object.hasOwn(this._events, eventName)) { this._events[eventName] = []; } this._events[eventName].push(listener); return this; } off(eventName: string, listener: Function): IEventEmitter { // Ignore non-existing eventNames. if (!Object.hasOwn(this._events, eventName)) { return this; } const listeners = this._events[eventName]; // Find only first instance of the listener. const index = listeners.findIndex( (listenerItem) => listenerItem === listener, ); if (index < 0) { return this; } this._events[eventName].splice(index, 1); return this; } emit(eventName: string, ...args: Array): boolean { // Return false for non-existing eventNames or events without listeners. if ( !Object.hasOwn(this._events, eventName) || this._events[eventName].length === 0 ) { return false; } // Make a clone of the listeners in case one of the listeners // mutates this listener array. const listeners = this._events[eventName].slice(); listeners.forEach((listener) => { listener.apply(null, args); }); return true; } } `;var u=`interface EventEmitter { _events: Record>; on(eventName: string, listener: Function): EventEmitter; off(eventName: string, listener: Function): EventEmitter; emit(eventName: string, ...args: Array): boolean; } export default function EventEmitter(this: EventEmitter) { // Avoid creating objects via \`{}\` to exclude unwanted properties // on the prototype (such as \`.toString\`). this._events = Object.create(null); } EventEmitter.prototype.on = function ( this: EventEmitter, eventName: string, listener: Function, ): EventEmitter { // Group listeners by event name so emit/off only touch one bucket. if (!Object.hasOwn(this._events, eventName)) { this._events[eventName] = []; } this._events[eventName].push(listener); return this; }; EventEmitter.prototype.off = function ( this: EventEmitter, eventName: string, listener: Function, ): EventEmitter { // Ignore non-existing eventNames. if (!Object.hasOwn(this._events, eventName)) { return this; } const listeners = this._events[eventName]; // Find only first instance of the listener. const index = listeners.findIndex( (listenerItem) => listenerItem === listener, ); if (index < 0) { return this; } this._events[eventName].splice(index, 1); return this; }; EventEmitter.prototype.emit = function ( this: EventEmitter, eventName: string, ...args: Array ): boolean { // Return false for non-existing eventNames or events without listeners. if ( !Object.hasOwn(this._events, eventName) || this._events[eventName].length === 0 ) { return false; } // Make a clone of the listeners in case one of the listeners // mutates this listener array. const listeners = this._events[eventName].slice(); listeners.forEach((listener) => { listener.apply(null, args); }); return true; }; `;var k=void 0;function v(t){let e={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["An event-based interaction model lets callers register functions for named events, then invoke those functions later with emitted arguments. The DOM uses this same model with ",(0,n.jsx)(e.code,{children:"document.addEventListener()"})," and ",(0,n.jsx)(e.code,{children:"document.removeEventListener()"})," for events like ",(0,n.jsx)(e.code,{children:"click"}),", ",(0,n.jsx)(e.code,{children:"hover"}),", and ",(0,n.jsx)(e.code,{children:"input"}),"."]}),` `,(0,n.jsx)(e.p,{children:"For this implementation, the core responsibility is maintaining a listener registry that preserves registration order, supports duplicate listeners, and stays predictable when listeners are added or removed."}),` `,(0,n.jsx)(e.h2,{children:"Clarification questions"}),` `,(0,n.jsx)(e.p,{children:"Clarify the emitter semantics up front because listener ordering, duplicate callbacks, and failure handling affect the code."}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:["Can ",(0,n.jsx)(e.code,{children:"emitter.emit()"})," be called without any arguments besides the ",(0,n.jsx)(e.code,{children:"eventName"}),"?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Yes, it can be."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["Can the same listener be added multiple times with the same ",(0,n.jsx)(e.code,{children:"eventName"}),"?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Yes, it can be. It will be called once per registration when ",(0,n.jsx)(e.code,{children:"eventName"})," is emitted, in the order the registrations were added."]}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["Following up on the question above, what should happen if a listener is added multiple times and ",(0,n.jsx)(e.code,{children:"emitter.off()"})," is called once for that listener?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"The listener will only be removed once."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["Can non-existent events be emitted?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Yes, but nothing should happen and the code should not error or crash."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["What should the ",(0,n.jsx)(e.code,{children:"this"})," value of the listeners be?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["It can be ",(0,n.jsx)(e.code,{children:"null"}),"."]}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["Can listeners contain code that invokes methods on the emitter instance?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Yes, but that scenario is out of scope for this question."}),` `]}),` `]}),` `,(0,n.jsxs)(e.li,{children:["What if the listener callbacks throw an error during ",(0,n.jsx)(e.code,{children:"emitter.emit()"}),"?",` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"The error should be caught and should not halt execution of the remaining listeners. However, this case is not tested."}),` `]}),` `]}),` `]}),` `,(0,n.jsx)(e.p,{children:"The solution handles all of the cases above except the last two."}),` `,(0,n.jsx)(e.h2,{children:"Solution"}),` `,(0,n.jsxs)(e.p,{children:["Store one ordered listener array per event name. ",(0,n.jsx)(e.code,{children:"on()"})," appends to that array, ",(0,n.jsx)(e.code,{children:"off()"})," removes one matching entry, and ",(0,n.jsx)(e.code,{children:"emit()"})," reads a snapshot of the array in order."]}),` `,(0,n.jsx)(e.h3,{children:"Data structure"}),` `,(0,n.jsxs)(e.p,{children:["The clean default is a map from ",(0,n.jsx)(e.code,{children:"eventName"})," to an array of listeners."]}),` `,(0,n.jsx)(e.p,{children:"Conceptually:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`events = { foo: [Function1, Function3], bar: [Function2], }; `})}),` `,(0,n.jsx)(e.p,{children:"That structure makes all three operations direct:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"on()"})," appends to one event bucket"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"off()"})," searches inside one event bucket"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"emit()"})," reads one event bucket and iterates it in order"]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["A flat list of ",(0,n.jsx)(e.code,{children:"{ eventName, listener }"})," pairs also works, but it forces every ",(0,n.jsx)(e.code,{children:"off()"})," and ",(0,n.jsx)(e.code,{children:"emit()"})," call to scan unrelated entries."]}),` `,(0,n.jsxs)(e.p,{children:["Because ",(0,n.jsx)(e.code,{children:"eventName"})," comes from user input, the approach stores these buckets in ",(0,n.jsx)(e.code,{children:"Object.create(null)"})," instead of a normal object literal. That avoids collisions with inherited keys like ",(0,n.jsx)(e.code,{children:"toString"}),"."]}),` `,(0,n.jsxs)(e.h3,{children:["Implementing ",(0,n.jsx)(e.code,{children:"EventEmitter.on()"})]}),` `,(0,n.jsxs)(e.p,{children:["Create the listener array if this is the first time the event name appears, then push the new listener and return ",(0,n.jsx)(e.code,{children:"this"})," for chaining."]}),` `,(0,n.jsx)(e.p,{children:"Appending is important because listeners must run in the order they were registered. The same function can be pushed more than once; those entries are separate subscriptions for this part of the question."}),` `,(0,n.jsxs)(e.h3,{children:["Implementing ",(0,n.jsx)(e.code,{children:"EventEmitter.off()"})]}),` `,(0,n.jsxs)(e.p,{children:["If the event does not exist, do nothing. Otherwise, find the first matching listener with ",(0,n.jsx)(e.code,{children:"findIndex()"})," and remove only that single occurrence with ",(0,n.jsx)(e.code,{children:"splice()"}),"."]}),` `,(0,n.jsx)(e.p,{children:"Removing one occurrence matters because the same function can be registered multiple times and should be removed in registration order."}),` `,(0,n.jsxs)(e.h3,{children:["Implementing ",(0,n.jsx)(e.code,{children:"EventEmitter.emit()"})]}),` `,(0,n.jsxs)(e.p,{children:["If the event does not exist or has no listeners, return ",(0,n.jsx)(e.code,{children:"false"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["Otherwise, clone the listener array with ",(0,n.jsx)(e.code,{children:"slice()"})," and call each listener with the emitted arguments. Cloning protects the current emission from listeners that add or remove handlers while ",(0,n.jsx)(e.code,{children:"emit()"})," is running."]}),` `,(0,n.jsx)(e.p,{children:"The snapshot makes listener mutation easier to follow:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["A listener removed during ",(0,n.jsx)(e.code,{children:"emit()"})," is still present in the current snapshot if it had not run yet."]}),` `,(0,n.jsxs)(e.li,{children:["A listener added during ",(0,n.jsx)(e.code,{children:"emit()"})," is not part of the current snapshot and will only run on a later ",(0,n.jsx)(e.code,{children:"emit()"}),"."]}),` `,(0,n.jsx)(e.li,{children:"The original registration order of the snapshot is preserved for the current emission."}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Listeners are invoked with ",(0,n.jsx)(e.code,{children:"listener.apply(null, args)"}),", so the emitter intentionally uses ",(0,n.jsx)(e.code,{children:"null"})," as the listener ",(0,n.jsx)(e.code,{children:"this"})," value while forwarding every emitted argument."]}),` `,(0,n.jsxs)(e.p,{children:["For an event with listeners ",(0,n.jsx)(e.code,{children:"[a, b]"}),", if ",(0,n.jsx)(e.code,{children:"a"})," calls ",(0,n.jsx)(e.code,{children:"off(eventName, b)"})," while the emission is running, ",(0,n.jsx)(e.code,{children:"b"})," still runs for that current emission because it is present in the snapshot. The removal affects the next ",(0,n.jsx)(e.code,{children:"emit()"}),"."]}),` `,(0,n.jsx)(e.p,{children:"The same snapshot rule handles additions:"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.th,{children:["During current ",(0,n.jsx)(e.code,{children:"emit()"})]}),(0,n.jsx)(e.th,{children:"Current snapshot"}),(0,n.jsxs)(e.th,{children:["Next ",(0,n.jsx)(e.code,{children:"emit()"})]})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:["listener ",(0,n.jsx)(e.code,{children:"a"})," adds listener ",(0,n.jsx)(e.code,{children:"c"})]}),(0,n.jsxs)(e.td,{children:["still ",(0,n.jsx)(e.code,{children:"[a, b]"})]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[a, b, c]"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:["listener ",(0,n.jsx)(e.code,{children:"a"})," removes listener ",(0,n.jsx)(e.code,{children:"b"})]}),(0,n.jsxs)(e.td,{children:["still ",(0,n.jsx)(e.code,{children:"[a, b]"})]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[a]"})})]})]})]}),` `,(0,n.jsx)(e.p,{children:"For duplicate listeners, registration entries are independent:"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Step"}),(0,n.jsxs)(e.th,{children:["Bucket for ",(0,n.jsx)(e.code,{children:'"double"'})]}),(0,n.jsx)(e.th,{children:"Result"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"on(double)"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[double]"})}),(0,n.jsx)(e.td,{children:"One call per emit"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"on(double)"})," again"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[double, double]"})}),(0,n.jsx)(e.td,{children:"Two calls per emit"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"off(double)"})," once"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[double]"})}),(0,n.jsx)(e.td,{children:"Only the first matching registration is removed"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"off(double)"})," again"]}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"[]"})}),(0,n.jsxs)(e.td,{children:["Later emits return ",(0,n.jsx)(e.code,{children:"false"})]})]})]})]}),` `,(0,n.jsxs)(e.h3,{children:["Built-in object properties colliding with user-provided ",(0,n.jsx)(e.code,{children:"eventName"}),"s"]}),` `,(0,n.jsxs)(e.p,{children:["Storing listeners in a plain JavaScript object lets user-provided names such as ",(0,n.jsx)(e.code,{children:"valueOf"})," or ",(0,n.jsx)(e.code,{children:"toString"})," collide with inherited properties."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`const emitter = new EventEmitter(); emitter.emit('toString'); `})}),` `,(0,n.jsx)(e.p,{children:"Two common fixes are:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Use a ",(0,n.jsx)(e.code,{children:"Map"})," instead of an object. This is the modern approach."]}),` `,(0,n.jsxs)(e.li,{children:["Create the plain JavaScript object with ",(0,n.jsx)(e.code,{children:"Object.create(null)"})," so that the object does not have a prototype or inherited properties."]}),` `]}),` `,(0,n.jsx)(e.h3,{children:"Class-based solution"}),` `,(0,n.jsx)(l,{languages:{jsx:a,tsx:m}}),` `,(0,n.jsx)(e.h3,{children:"Function prototype-based solution"}),` `,(0,n.jsx)(l,{children:u}),` `,(0,n.jsx)(e.h2,{children:"Edge cases"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"The same listener function can be added more than once for the same event. Removal should follow registration order."}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"emitter.emit()"})," may be called without any arguments beyond ",(0,n.jsx)(e.code,{children:"eventName"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Methods may be called with nonexistent ",(0,n.jsx)(e.code,{children:"eventName"})," values."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"eventName"})," values may be built-in object properties like ",(0,n.jsx)(e.code,{children:"valueOf"})," or ",(0,n.jsx)(e.code,{children:"toString"}),"."]}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Common pitfalls"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Do not iterate the live listener array while allowing ",(0,n.jsx)(e.code,{children:"off()"})," or ",(0,n.jsx)(e.code,{children:"on()"})," to mutate it. Use a snapshot for the current emission."]}),` `,(0,n.jsxs)(e.li,{children:["Do not remove every duplicate listener in one ",(0,n.jsx)(e.code,{children:"off()"})," call. This API removes only the first matching registration."]}),` `,(0,n.jsxs)(e.li,{children:["Listener callback errors are intentionally out of scope for this implementation. If that behavior were required, ",(0,n.jsx)(e.code,{children:"emit()"})," would need to catch errors without stopping the remaining listeners."]}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Techniques"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Object-oriented programming."}),` `,(0,n.jsx)(e.li,{children:"Using the right data structures."}),` `,(0,n.jsx)(e.li,{children:"Handling variadic arguments."}),` `,(0,n.jsx)(e.li,{children:"Object chaining."}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Notes"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Instance methods should not be arrow functions if they need to return ",(0,n.jsx)(e.code,{children:"this"}),", because arrow functions do not get their own method receiver."]}),` `,(0,n.jsxs)(e.li,{children:["Node.js' built-in ",(0,n.jsx)(e.code,{children:"EventEmitter"})," also supports symbol event names, one-time listeners through ",(0,n.jsx)(e.code,{children:"once()"}),", and listener inspection through ",(0,n.jsx)(e.code,{children:"listeners()"})," and ",(0,n.jsx)(e.code,{children:"eventNames()"}),". Those features are outside this question's scope."]}),` `,(0,n.jsxs)(e.li,{children:["This version returns the emitter from ",(0,n.jsx)(e.code,{children:"on()"})," and ",(0,n.jsx)(e.code,{children:"off()"})," for chaining. The follow-up question changes the subscription API so ",(0,n.jsx)(e.code,{children:"on()"})," returns a dedicated object with ",(0,n.jsx)(e.code,{children:"off()"}),"."]}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Resources"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://nodejs.org/api/events.html#class-eventemitter",children:"EventEmitter | Node.js"})}),` `]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(v,{...t})}):v(t)}return _(F);})(); ;return Component;