JS Recursive function call

Question

If I call the function once like this

var button = document.querySelector('button');
button.addEventListener('click', once);
function once() {
 console.log('one');
 button.removeEventListener('click', once);
}

It's calling only once.

But if I called like this once()

var button = document.querySelector('button');
button.addEventListener('click', once());
function once() {
 console.log('one');
 button.removeEventListener('click', once());
}

Exception throws

Exception: InternalError: too much recursion

Could you please explain why this is happening.

• Artyom Neustroev: You are immediately calling a function with () inside it
• Mario Santini: if you use the () after the function name, the function is executed. And you don't want to be executed when you pass to method like addEventListener or removeEventListener, so just remove it.
• Mark C.: Haha I love the exception it throws - "too much recursion"
• Zach: I guess it would be too cliche to say "stack overflow"? :)

Answer 1

() after function name invoke's the function. So as button.addEventListener('click', once()); you are bind the return value of once() method which is undefined.

And since once() is called recursively without any break statement, you are getting the InternalError: too much recursion.

You should pass the function reference.

button.addEventListener('click', once); 

For Additional Info:

Pointer Vs Delegates

• ganesshkumar: The question was why it is doing too much recursion in the other case
• gvgvgvijayan: @Satpal Thanks for the answer. Could you please point Mozilla documentation reference also.
• Satpal: @gvgvgvijayan, documentation for what?
• gvgvgvijayan: From here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

Answer 2

If you put () after the name of a variable holding a function, then you call the function.

If a function calls itself, then it will get called, call itself, call itself again and so on unto infinity. This is recursion. Doing something unto infinity will cause a computer to run out of memory, so it is undesirable.

JavaScript engines prevent this by throwing an exception when you try it.

(There are exceptions, of course, a function that calls itself conditionally can be very useful).

Answer 3

The first code is correct, because you register the function to be called.

The second code tries to register the result of the function call once(). This means you actually execute the function when you only want to register it. Now, in your function body, you do the same to deregister the callback. Here again, you call the function you are already executing and hence, you recurse infinitely.