What is wrong with this pub sub code in javascript using the dom?

Question

I have this pub sub code

export const subscribe = (eventName, callback) => {
  pubsub.addEventListener(eventName, (e, data) => {
    callback(e.detail);
  });
};
export const unsubscribe = (eventName, callback) => {
  pubsub.removeEventListener(eventName, callback);
};

export const publish = (eventName, data) => {
  pubsub.dispatchEvent(new CustomEvent(eventName, { detail: data }));
};

But unsubscribe doesn't appear to work and I don't know why.

const setTargetFn = () => {
  unsubscribe("setTargetUnitId", setTargetFn);
  createMessage("Great job! Now attack it by pressing 1 and going near it", 0);
};

subscribe("setTargetUnitId", setTargetFn);

The subscribed event keeps getting called even after I call unsubscribe... Please help

Answer 1

Here is your problem:

unsubscribe("setTargetUnitId", setTargetFn);

It is not setTargetFn that has to be unregistered. The actual function to be unregistered is ...

(e, data) => { callback(e.detail); }

... since that is what you pass to pubsub.addEventListener.

Your code will work fine if you register the callback directly:

var subscribe = (eventName, callback) => {
  pubsub.addEventListener(eventName, callback);
};

Demo:

const subscribe = (eventName, callback) => {
  pubsub.addEventListener(eventName, callback);
};

const unsubscribe = (eventName, callback) => {
  pubsub.removeEventListener(eventName, callback);
};

const publish = (eventName, data) => {
  pubsub.dispatchEvent(new CustomEvent(eventName, { detail: data }));
};

const setTargetFn = ({ detail }) => { 
  unsubscribe("setTargetUnitId", setTargetFn);
  console.log("Great job! Now attack it by pressing 1 and going near it");
  console.log("Event detail", detail);
};

subscribe("setTargetUnitId", setTargetFn);

<div id="pubsub"></div>

<button onclick="publish('setTargetUnitId', { foo: 'bar' });">publish setTargetUnitId</button>