JavaScript: Passing parameters to a callback function

Question

I'm trying to pass some parameter to a function used as callback, how can I do that?

This is my try:

function tryMe(param1, param2) {
  alert(param1 + " and " + param2);
}

function callbackTester(callback, param1, param2) {
  callback(param1, param2);
}

callbackTester(tryMe, "hello", "goodbye");

sorry it was my fault on main code syntax, I thought was this because this is the first time I use a callback in JavaScript — vitto, Aug 11 '10 at 13:19
If you want to add parameters to a callback but can't change what's calling it (as in you have no power to change the argument order, you can pre-bind some of the callbacks parameters with JS bind, as I've shown on this answer: http://stackoverflow.com/a/28120741/1695680 — ThorSummoner, Jan 24 '15 at 00:13

score 316 · Accepted Answer · edited Sep 30 '21 at 12:07

316

If you want something slightly more general, you can use the arguments variable like so:

function tryMe(param1, param2) {
  alert(param1 + " and " + param2);
}

function callbackTester(callback) {
  callback(arguments[1], arguments[2]);
}

callbackTester(tryMe, "hello", "goodbye");

But otherwise, your example works fine (arguments[0] can be used in place of callback in the tester)

edited Sep 30 '21 at 12:07

Teocci

7,189
1
50
48

answered Aug 11 '10 at 13:13

Simon Scarfe

9,378
4
28
32

63

So long as we're being in the spirit of being general, `callback.apply(arguments)` as the function body for `callbackTester` is extensible beyond the two argument scenario. – Steven Aug 11 '10 at 13:15
1

sorry, it was a syntax error in the main code, I thought was this because this is the first time I use a callback in JavaScript, you've helped me to understand it wasn't the probelm, and to see a great example. – vitto Aug 11 '10 at 13:17
3

FYI, using an anonymous function (Marimuthu's answer) or .bind() (Andy's answer) are much cleaner ways to pass arguments to a callback. – antoine Jun 27 '15 at 03:03
1

`let args = Object.values(arguments); args.shift(); callback(...args);` as callbackTester body allows variable amount of arguments – Eagle_ Jul 14 '22 at 12:25

score 244 · Answer 2 · edited Sep 30 '21 at 12:11

244

This would also work:

// callback function
function tryMe(param1, param2) {
  alert(param1 + " and " + param2);
}

// callback executer 
function callbackTester(callback) {
  callback();
}

// test function
callbackTester(function() {
  tryMe("hello", "goodbye");
});

Another Scenario :

// callback function
function tryMe(param1, param2, param3) {
  alert(param1 + " and " + param2 + " " + param3);
}

// callback executer 
function callbackTester(callback) {
  //this is the more obivous scenario as we use callback function
  //only when we have some missing value
  //get this data from ajax or compute
  var extraParam = "this data was missing";

  //call the callback when we have the data
  callback(extraParam);
}

// test function
callbackTester(function(k) {
  tryMe("hello", "goodbye", k);
});

edited Sep 30 '21 at 12:11

Teocci

7,189
1
50
48

answered Aug 11 '10 at 13:33

Marimuthu Madasamy

13,126
4
30
52

2

This works great because it also allows the anonymous function to pass in parameters like so: callbackTester (function(data) {tryMe(data, "hello", "goodbye"); }); – Michael Khalili Jul 14 '14 at 02:28
I also like to check that the callback is, in fact, a function. `if (typeof window[callback] == 'function') window[callback].call(this);` – Katrina May 20 '15 at 16:40
This is the simple & best answer. – DhineshYes Oct 11 '20 at 07:03
if you are in a loop. arguments will lose its value, this only works then it is called once, and with arguments that are contants. is better use .bind() method – vincent thorpe Sep 08 '22 at 22:13

score 79 · Answer 3 · edited May 06 '21 at 04:29

79

Your question is unclear. If you're asking how you can do this in a simpler way, you should take a look at the ECMAScript 5th edition method .bind(), which is a member of Function.prototype. Using it, you can do something like this:

function tryMe (param1, param2) {
    alert (param1 + " and " + param2);
}

function callbackTester (callback) {
    callback();
}

callbackTester(tryMe.bind(null, "hello", "goodbye"));

You can also use the following code, which adds the method if it isn't available in the current browser:

// From Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

Example

bind() - PrototypeJS Documentation

edited May 06 '21 at 04:29

Chuck D

1,629
2
16
32

answered Aug 11 '10 at 13:13

Andy E

338,112
86
474
445

Out of interest, what's the difference between `Array.prototype.slice.call(arguments)` and `arguments.slice()`? – sje397 Aug 11 '10 at 13:19
7

@sje397: *arguments* isn't a \*real\* array, so it doesn't have a *slice()* method. However, the *slice()* method on the *Array.prototype* is intentionally generic, so you can pass any object that has numerical indexes and a *length* property and it will work. – Andy E Aug 11 '10 at 13:25
2

This is the most elegant answer – antoine Jun 27 '15 at 03:04
This .bind() is really great and extend a lot the use & simplicity of callbacks. As a basic sample to understand it, if you have: `f = function(arg1,arg2){alert(arg1+arg2);}.bind(this,"abc");` `f("def") // Gives "abcdef"` – Le Droid Jan 22 '16 at 20:08
This is really a grt answer. Awesome and work well for me. Thank you :) – Vishnu Mishra Aug 10 '16 at 12:58
thanks, bind saved my day - otherwise, callback was being called while passing it as a parameter to another function – ashubuntu Dec 18 '19 at 10:34

score 20 · Answer 4 · edited Jan 02 '20 at 07:52

20

If you are not sure how many parameters are you going to be passed into callback functions, use apply function.

function tryMe (param1, param2) {
  alert (param1 + " and " + param2);
}

function callbackTester(callback,params){
    callback.apply(this,params);
}

callbackTester(tryMe,['hello','goodbye']);

edited Jan 02 '20 at 07:52

canbax

3,432
1
27
44

answered Apr 05 '18 at 19:56

Zeeman Chen

301
2
3

score 14 · Answer 5 · answered Sep 18 '13 at 22:47

When you have a callback that will be called by something other than your code with a specific number of params and you want to pass in additional params you can pass a wrapper function as the callback and inside the wrapper pass the additional param(s).

function login(accessedViaPopup) {
    //pass FB.login a call back function wrapper that will accept the
    //response param and then call my "real" callback with the additional param
    FB.login(function(response){
        fb_login_callback(response,accessedViaPopup);
    });
}

//handles respone from fb login call
function fb_login_callback(response, accessedViaPopup) {
    //do stuff
}

score 6 · Answer 6 · edited Oct 24 '13 at 07:56

Wrap the 'child' function(s) being passed as/with arguments within function wrappers to prevent them being evaluated when the 'parent' function is called.

function outcome(){
    return false;
}

function process(callbackSuccess, callbackFailure){
    if ( outcome() )
        callbackSuccess();
    else
        callbackFailure();
}

process(function(){alert("OKAY");},function(){alert("OOPS");})

score 5 · Answer 7 · answered May 11 '15 at 19:33

Code from a question with any number of parameters and a callback context:

function SomeFunction(name) {
    this.name = name;
}
function tryMe(param1, param2) {
    console.log(this.name + ":  " + param1 + " and " + param2);
}
function tryMeMore(param1, param2, param3) {
    console.log(this.name + ": " + param1 + " and " + param2 + " and even " + param3);
}
function callbackTester(callback, callbackContext) {
    callback.apply(callbackContext, Array.prototype.splice.call(arguments, 2));
}
callbackTester(tryMe, new SomeFunction("context1"), "hello", "goodbye");
callbackTester(tryMeMore, new SomeFunction("context2"), "hello", "goodbye", "hasta la vista");

// context1: hello and goodbye
// context2: hello and goodbye and even hasta la vista

score 4 · Answer 8 · answered Jul 09 '17 at 13:17

Use curried function as in this simple example.

const BTN = document.querySelector('button')
const RES = document.querySelector('p')

const changeText = newText => () => {
  RES.textContent = newText
}

BTN.addEventListener('click', changeText('Clicked!'))

<button>ClickMe</button>
<p>Not clicked<p>

Fru · Answer 9 · 2022-06-06T08:19:31.747

Faced this recently, to get it(especially if the parent function has multiple arguments doing different stuffs not related to the callback , is to have the callback placed with its argument in an arrow function passed as an argument.

function tryMe(param1, param2) {
  alert(param1 + " and " + param2);
}

function callbackTester(callback, someArg, AnotherArg) {
  callback();
  
}

callbackTester(()=> tryMe("hello", "goodbye"), "someArg", "AnotherArg");

...or simply if you dont have multiple arguments doing other stuff.

function tryMe(param1, param2) {
  alert(param1 + " and " + param2);
}

function callbackTester(callback) {
  callback();
}

callbackTester(()=> tryMe("hello", "goodbye"));

score 1 · Answer 10 · answered Sep 29 '16 at 08:59

A new version for the scenario where the callback will be called by some other function, not your own code, and you want to add additional parameters.

For example, let's pretend that you have a lot of nested calls with success and error callbacks. I will use angular promises for this example but any javascript code with callbacks would be the same for the purpose.

someObject.doSomething(param1, function(result1) {
  console.log("Got result from doSomething: " + result1);
  result.doSomethingElse(param2, function(result2) {
    console.log("Got result from doSomethingElse: " + result2);
  }, function(error2) {
    console.log("Got error from doSomethingElse: " + error2);
  });
}, function(error1) {
  console.log("Got error from doSomething: " + error1);
});

Now you may want to unclutter your code by defining a function to log errors, keeping the origin of the error for debugging purposes. This is how you would proceed to refactor your code:

someObject.doSomething(param1, function (result1) {
  console.log("Got result from doSomething: " + result1);
  result.doSomethingElse(param2, function (result2) {
    console.log("Got result from doSomethingElse: " + result2);
  }, handleError.bind(null, "doSomethingElse"));
}, handleError.bind(null, "doSomething"));

/*
 * Log errors, capturing the error of a callback and prepending an id
 */
var handleError = function (id, error) {
  var id = id || "";
  console.log("Got error from " + id + ": " + error);
};

The calling function will still add the error parameter after your callback function parameters.

score 1 · Answer 11 · answered Feb 24 '19 at 10:48

Let me give you a very plain Node.js style example of using a callback:

/**
 * Function expects these arguments: 
 * 2 numbers and a callback function(err, result)
 */
var myTest = function(arg1, arg2, callback) {
  if (typeof arg1 !== "number") {
    return callback('Arg 1 is not a number!', null); // Args: 1)Error, 2)No result
  }
  if (typeof arg2 !== "number") {
    return callback('Arg 2 is not a number!', null); // Args: 1)Error, 2)No result
  }
  if (arg1 === arg2) {
    // Do somethign complex here..
    callback(null, 'Actions ended, arg1 was equal to arg2'); // Args: 1)No error, 2)Result
  } else if (arg1 > arg2) {
    // Do somethign complex here..
    callback(null, 'Actions ended, arg1 was > from arg2'); // Args: 1)No error, 2)Result
  } else {
    // Do somethign else complex here..
    callback(null, 'Actions ended, arg1 was < from arg2'); // Args: 1)No error, 2)Result
  }
};


/**
 * Call it this way: 
 * Third argument is an anonymous function with 2 args for error and result
 */
myTest(3, 6, function(err, result) {
  var resultElement = document.getElementById("my_result");
  if (err) {
    resultElement.innerHTML = 'Error! ' + err;
    resultElement.style.color = "red";
    //throw err; // if you want
  } else {
    resultElement.innerHTML = 'Result: ' + result;
    resultElement.style.color = "green";
  }
});

and the HTML that will render the result:

<div id="my_result">
  Result will come here!
</div>

You can play with it here: https://jsfiddle.net/q8gnvcts/ - for example try to pass string instead of number: myTest('some string', 6, function(err, result).. and see the result.

I hope this example helps because it represents the very basic idea of callback functions.

score 1 · Answer 12 · answered Jul 29 '19 at 21:34

1

function tryMe(param1, param2) {
  console.log(param1 + " and " + param2);
}

function tryMe2(param1) {
  console.log(param1);
}

function callbackTester(callback, ...params) {
  callback(...params);
}



callbackTester(tryMe, "hello", "goodbye");

callbackTester(tryMe2, "hello");

read more about the spread syntax

answered Jul 29 '19 at 21:34

Dmitry Grinko

13,806
14
62
86

2

Best answer for me. Most practical. – Franck Sep 02 '21 at 16:13

score 1 · Answer 13 · answered Sep 30 '21 at 14:52

I'm trying to pass some parameter to a function used as callback, how can I do that?

I think he is implying that he wants to call the function this callbackTester(tryMe, "hello", "goodbye"). To do this we can use the Rest Operator (...). This operator takes the arguments that a function receives and dumps them into a real array that we will use to access in our callback function.

Now, some other developers might also argue that we could use the arguments "array". That will be fine, but we should be careful with it. arguments is not a real array but an array-like object with a length property.

Here is a working snippet using the Rest Operator:

function tryMe(params) {
  console.log(params.join(', '));
}

function callbackTester(callback, ...params) {
  callback(params);
}

callbackTester(tryMe, 'hello', 'goodbye', 'hi again');
callbackTester(tryMe, 'hello', 'goodbye');
callbackTester(tryMe, 'hello');

score 1 · Answer 14 · answered Aug 28 '22 at 05:25

Just use the bind() function which is primarily used to set the this value. However, we can also use it to pass parameters without calling the function due to bind() returning a new function with the sequence of arguments provided.

Example:

function foo(param1, param2, param3) {
  console.log(param1, param2, param3);
}

setTimeout(foo.bind(null, 'foo', 'bar', 'baz'), 1000);

In the snippet above, the setTimeout function takes 2 arguments, the callback function and a minimum time in ms for the function to be called, so when passing the callback function we're going to use bind and specify the parameters

Note: The first parameter of bind is the value that we want to set for this, and because we're not interested on that, null was passed, the subsequent parameters in bind are going to be the parameters for the callback.

score 0 · Answer 15 · edited May 23 '17 at 12:03

I was looking for the same thing and end up with the solution and here it's a simple example if anybody wants to go through this.

var FA = function(data){
   console.log("IN A:"+data)
   FC(data,"LastName");
};
var FC = function(data,d2){
   console.log("IN C:"+data,d2)
};
var FB = function(data){
   console.log("IN B:"+data);
    FA(data)
};
FB('FirstName')

Also posted on the other question here

score 0 · Answer 16 · answered Oct 31 '19 at 14:21

//Suppose function not taking any parameter means just add the GetAlterConfirmation(function(result) {});
GetAlterConfirmation('test','messageText',function(result) {
                        alert(result);
    }); //Function into document load or any other click event.


function GetAlterConfirmation(titleText, messageText, _callback){
         bootbox.confirm({
                    title: titleText,
                    message: messageText,
                    buttons: {
                        cancel: {
                            label: '<i class="fa fa-times"></i> Cancel'
                        },
                        confirm: {
                            label: '<i class="fa fa-check"></i> Confirm'
                        }
                    },
                    callback: function (result) {
                        return _callback(result); 
                    }
                });

Okay, I'll do from my next answer, sorry for the above because this is my first answer. — Santhos Jery, Nov 04 '19 at 10:53

Rakibul Hasan · Answer 17 · 2023-07-25T15:24:54.963

You can pass your params using an array, I hope this will work for you thanks

function tryMe(params) {
    alert(params[0] + " and " + params[1]);
  }
  
  function callbackTester(callback, params) {
    callback(params);
  }
  
  callbackTester(tryMe, ["hello", "goodbye"]);

OR

function tryMe(param1, param2) {
    alert(param1 + " and " + param2);
  }
  
  function callbackTester(callback, params) {
    callback(params[0],params[1]);
  }
  
  callbackTester(tryMe, ["hello", "goodbye"]);

JavaScript: Passing parameters to a callback function

17 Answers17

Linked

Related