Passing a function with parameters as a parameter?

Javascript

Javascript Problem Overview


Is it possible to pass a javascript function with parameters as a parameter?

Example:

$(edit_link).click( changeViewMode( myvar ) );

Javascript Solutions


Solution 1 - Javascript

Use a "closure":

$(edit_link).click(function(){ return changeViewMode(myvar); });

This creates an anonymous temporary function wrapper that knows about the parameter and passes it to the actual callback implementation.

Solution 2 - Javascript

Use Function.prototype.bind(). Quoting MDN:

>The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

It is supported by all major browsers, including IE9+.

Your code should look like this:

$(edit_link).click(changeViewMode.bind(null, myvar));

Side note: I assume you are in global context, i.e. this variable is window; otherwise use this instead of null.

Solution 3 - Javascript

No, but you can pass one without parameters, and do this:

$(edit_link).click(
  function() { changeViewMode(myvar); }
);

So you're passing an anonymous function with no parameters, that function then calls your parameterized function with the variable in the closure

Solution 4 - Javascript

Or if you are using es6 you should be able to use an arrow function

$(edit_link).click(() => changeViewMode(myvar));

Solution 5 - Javascript

Yes, like this:

$(edit_link).click(function() { changeViewMode(myvar) });

Solution 6 - Javascript

You can do this

var message  = 'Hello World';

var callback = function(){
alert(this)
}.bind(message);

and then

function activate(callback){
  callback && callback();
}

activate(callback);

Or if your callback contains more flexible logic you can pass object.

Demo

Solution 7 - Javascript

This is an example following Ferdinand Beyer's approach:

function function1()
{
	function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
	$(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }

In this example the "parameter value" is passed from function1 to function3 through function2 using a function wrap.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLuciaView Question on Stackoverflow
Solution 1 - JavascriptFerdinand BeyerView Answer on Stackoverflow
Solution 2 - JavascriptMichał PerłakowskiView Answer on Stackoverflow
Solution 3 - JavascriptClydeView Answer on Stackoverflow
Solution 4 - JavascriptChristian BartramView Answer on Stackoverflow
Solution 5 - JavascriptPhilippe LeybaertView Answer on Stackoverflow
Solution 6 - JavascriptAlexandr SargsyanView Answer on Stackoverflow
Solution 7 - JavascripterionpcView Answer on Stackoverflow