with - pass parameter to javascript function onclick

Pass a JavaScript function as parameter (9)

Example 1:

funct("z", function (x) { return x; });

function funct(a, foo){
    foo(a) // this will return a

Example 2:

function foodemo(value){
    return 'hello '+value;

function funct(a, foo){

//call funct    
funct('world!',foodemo); //=> 'hello world!'

look at this

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?

Here it's another approach :

function a(first,second)    
return (second)(first);           

a('Hello',function(e){alert(e+ ' world!');}); //=> Hello world     

I suggest to put the parameters in an array, and then split them up using the .apply() function. So now we can easily pass a function with lots of parameters and execute it in a simple way.

function addContact(parameters, refreshCallback) {
    refreshCallback.apply(this, parameters);

function refreshContactList(int, int, string) {
    alert(int + int);

addContact([1,2,"str"], refreshContactList); //parameters should be putted in an array

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

function foo(x) {
function bar(func) {
    func("Hello World!");

//alerts "Hello World!"

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) {
function bar(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"]); 

Some time when you need to deal with event handler so need to pass event too as an argument , most of the modern library like react, angular might need this.

I need to override OnSubmit function(function from third party library) with some custom validation on reactjs and I passed the function and event both like below


    <button className="img-submit" type="button"  onClick=
 {onSubmit}>Upload Image</button>

MADE A NEW FUNCTION upload and called passed onSubmit and event as arguments

<button className="img-submit" type="button"  onClick={this.upload.bind(this,event,onSubmit)}>Upload Image</button>

  //custom codes are done here

The other answers do an excellent job describing what's going on, but one important "gotcha" is to make sure that whatever you pass through is indeed a reference to a function.

For instance, if you pass through a string instead of a function you'll get an error:

function function1(my_function_parameter){

function function2(){
 alert('Hello world');   

function1(function2); //This will work

function1("function2"); //This breaks!

See JsFiddle

To pass the function as parameter, simply remove the brackets!

function ToBeCalled(){
  alert("I was called");

function iNeedParameter( paramFunc) {
   //it is a good idea to check if the parameter is actually not null
   //and that it is a function
   if (paramFunc && (typeof paramFunc == "function")) {

//this calls iNeedParameter and sends the other function to it

The idea behind this is that a function is quite similar to a variable. Instead of writing

function ToBeCalled() { /* something */ }

you might as well write

var ToBeCalledVariable = function () { /* something */ }

There are minor differences between the two, but anyway - both of them are valid ways to define a function. Now, if you define a function and explicitly assign it to a variable, it seems quite logical, that you can pass it as parameter to another function, and you don't need brackets:


You can also use eval() to do the same thing.

//A function to call
function needToBeCalled(p1, p2)

//A function where needToBeCalled passed as an argument with necessary params
//Here params is comma separated string
function callAnotherFunction(aFunction, params)
    eval(aFunction + "("+params+")");

//A function Call
callAnotherFunction("needToBeCalled", "10,20");

That's it. I was also looking for this solution and tried solutions provided in other answers but finally got it work from above example.

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) {
    // You can also pass arguments if you need to
    // refreshCallback(id);

function refreshContactList() {
    alert('Hello World');

addContact(1, refreshContactList);