What is the difference between a function call and function reference?

by

Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it’s either:

element.onclick = funcRef;

or

element.onclick = function () {
    funcRef();
};

(but of course, it’s best to use addEventListener and attachEvent)

Notice how both of them are references to functions, not calling.

When something expects a reference, you don’t call it…you assign a reference to it (first example).

When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there’s still a reference to a function that’s assigned to onclick – it’s just an anonymous function.

Probably the more important part:

Some people think you want to do this:

element.onclick = funcRef();

But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn’t what you want.

I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don’t call it.

More Related Contents:

  1. Passing an array as a function parameter in JavaScript
  2. What is wrong with this function
  3. What is the use of the JavaScript ‘bind’ method?
  4. Is there a way to provide named parameters in a function call in JavaScript?
  5. Simplest/cleanest way to implement a singleton in JavaScript
  6. Are eval() and new Function() the same thing?
  7. JavaScript function aliasing doesn’t seem to work
  8. jQuery’s .click – pass parameters to user function
  9. Call Python function from JavaScript code
  10. How does Asynchronous Javascript Execution happen? and when not to use return statement?
  11. Calling a JavaScript function named in a variable [duplicate]
  12. How to define custom sort function in javascript?
  13. Calling a javascript function recursively
  14. How to make chainable function in JavaScript?
  15. Obtain a reference to parent element [duplicate]
  16. Access variable outside function scope [duplicate]
  17. Is there a JavaScript function that reduces a fraction
  18. Why can I not use `new` with an arrow function in JavaScript/ES6?
  19. What object javascript function is bound to (what is its “this”)?
  20. What happens if I call a function with more arguments than it is defined to accept?
  21. Set type for function parameters?
  22. Can you alter a Javascript function after declaring it?
  23. The reason to use JS .call() method?
  24. Promise and Promise.all(array) executed before array fulfilled [duplicate]
  25. Can you create functions with custom prototypes in JavaScript?
  26. Use JavaScript variable as function name?
  27. How to Call a Function inside a Render in React/Jsx
  28. Passing parameters to a JQuery function
  29. jQuery asynchronous function call, no AJAX request
  30. What is the difference between onClick=”javascript: function(‘value’)'” and onClick=”function(‘value’);”? [duplicate]

Leave a Comment