Javascript- Immediately-invoked function expressions in an event listener

Question

I'm still a beginner in learning javascript. Recently, I learned about IIFE, and there's an example that I could not figure out why there's a difference in results between the following two,

**First one (the callback function is IIFE)- **

button.addEventListener('click', (function() {
  let count = 0;

  return function() {
    count += 1;

    if (count === 2) {
      alert('This alert appears every other press!');
      count = 0;
    }

  };
})());

**Second one- **

button.addEventListener('click', function() {
  let count = 0;

  return function() {
    count += 1;

    if (count === 2) {
      alert('This alert appears every other press!');
      count = 0;
    }

  };
});

So, apparently, for the first one, when I click on the button, the alert will come up every other press. As for the second one, the alert will never show up, because the variable "count" will never reach 2.

I just cannot figure out how and why does this kind of behavior happen, and I don't understand the difference between IIFE being a callback function in EventListener and a regular function being a callback in EventListener.

Thanks!

Answer 1

The difference is that in the first code block, the outer function is being called immediately, and returning the inner function, which is then used as the event listener. In your second example, the outer function is used as the event listener, so it isn't called until/unless the event is triggered, and it doesn't do anything but create a function that it returns (which is then ignored).

It may help to pull things apart a bit. Here's a slightly-modified version of the first example, but without using an IIFE:

function createListener() {
    let count = 0;
    return function () {
        count += 1;

        if (count === 2) {
            alert("This alert appears every other press!");
            count = 0;
        }
    };
}
const listener = createListener();
button.addEventListener("click", listener);

The only difference is that in the version in the question, createListener is temporary and unnammed, and there's no listener variable.

Here are some other questions whose answers may be useful:

• What is the difference between a function call and function reference? (for the distinction between calling the outer function and using its return value as the listener vs. using the outer function as the listener directly)
• How do JavaScript closures work? (for the aspect of the listener where count is entirely private)