Pass a JavaScript function as parameter

Question

How do I pass a function as a parameter without the function executing in the "parent" function or using eval()? (Since I've read that it's insecure.)

I have this:

addContact(entityId, refreshContactList()); 

It works, but the problem is that refreshContactList fires when the function is called, rather than when it's used in the function.

I could get around it using eval(), but it's not the best practice, according to what I've read. How can I pass a function as a parameter in JavaScript?

Answer 1

You just need to remove the parenthesis:

addContact(entityId, refreshContactList); 

This then passes the function without executing it first.

Here is an example:

function addContact(id, refreshCallback) {     refreshCallback();     // You can also pass arguments if you need to     // refreshCallback(id); }  function refreshContactList() {     alert('Hello World'); }  addContact(1, refreshContactList); 

Answer 2

If you want to pass a function, just reference it by name without the parentheses:

function foo(x) {     alert(x); } function bar(func) {     func("Hello World!"); }  //alerts "Hello World!" bar(foo); 

But sometimes you might want to pass a function with arguments included, but not have it called until the callback is invoked. To do this, when calling it, just wrap it in an anonymous function, like this:

function foo(x) {    alert(x); } function bar(func) {    func(); }  //alerts "Hello World!" (from within bar AFTER being passed) bar(function(){ foo("Hello World!") }); 

If you prefer, you could also use the apply function and have a third parameter that is an array of the arguments, like such:

function eat(food1, food2) {     alert("I like to eat " + food1 + " and " + food2 ); } function myFunc(callback, args) {     //do stuff     //...     //execute callback when finished     callback.apply(this, args); }  //alerts "I like to eat pickles and peanut butter" myFunc(eat, ["pickles", "peanut butter"]);