I know the orientation in Stack Overflow is ask what you want and does not demonstrate how you would like it to be done, but I really do not know how to ask it in a better way and I'm not a Javascript expert... So... Let's go!
Let's imagine that we have the following Javascript functions with their respective outputs...
function func_a(param_a, param_b, param_c) {
alert(param_a);
alert(param_b);
alert(param_c);
}
function func_b(func_to_run) {
// Will call "func_a" HERE!
func_to_run("a", "b", "c");
}
func_b(func_a);
// a
// b
// c
My questions are:
Is there a correct and/or better way to pass parameters to the function "func_a" when we pass it as argument of function "func_b"?
How can I pass parameters to the function "func_a" in the function "func_b" call? Below I'll give you a hypothetical example...
function func_a(param_a, param_b, param_c) {
alert(param_a);
alert(param_b);
alert(param_c);
}
function func_b(func_to_run) {
func_b_param = "z";
// Will call "func_a" HERE!
func_to_run(value_from_func_b_call, value_from_func_b_call, func_b_param);
}
// Third parameter deliberately empty!
func_b(func_a("a", "b", ));
// a
// b
// z
I do not know if I explained it clearly! If there is any doubt or suggestion of improvement please tell me!
Is this what you are looking for?
function func_a(param_a, param_b, param_c) {
alert(param_a);
alert(param_b);
alert(param_c);
}
function func_b(func_to_run, a, b) {
func_b_param = "z";
// Will call "func_a" HERE!
func_to_run(a, b, func_b_param);
}
func_b(func_a, a, b);
You can pass the parameters to func_b:
function func_a(param_a, param_b, param_c) {
alert(param_a);
alert(param_b);
alert(param_c);
}
function func_b(func_to_run, param1, param2) {
func_b_param = "z";
// Will call "func_a" HERE!
func_to_run(param1, param2, func_b_param);
}
// Third parameter deliberately empty!
func_b(func_a, "a", "b");
Although that's a quick and dirty answer, if we had a better idea of what you are trying to achieve there might be a better answer. Especially with the new ES6 syntax and the spread operator.
How can I pass parameters to the function "func_a" in the function
"func_b" call?
If interpret Question correctly you can pass an object to func_b as parameter where properties are set to 1) the function to call; 2) the parameters as an array passed to function to call; 3) the function to call within the function passed to call.
You can use Reflect.apply() to call the outer function to call, optionally setting this within the outer function; pass and array with first element being inner function to call at, for example, func_b, second element being parameters to call function with preceded by spread element.
At first parameter of outer function to call define a parameter representing the inner function to be called; at second parameter define rest parameters func_a representing the parameters passed to inner function to be called.
function func_a(fn, ...args) {
for (let arg of args) fn(arg)
}
function func_b(func_to_run) {
// Will call "func_a" HERE!
Reflect.apply(func_to_run.fn, null, [func_to_run.innerFn, ...func_to_run.args]);
}
func_b({
fn: func_a,
innerFn: alert,
args: ["a", "b", "c"]
});
Related
Here are two callback function:
function callback_a(){
alert('a');
}
function callback_b(p){
alert('b says'+ p)'
}
If I want use callback_a
function test(callback){
if(condition){
callback();
}
}
test(callback_a);
But the function test isn't applicable to callback_b, So how to implement a common function that you can passing some callbacks function with multiple possible parameter lists.
There are three options:
The easiest way is to use spread operator:
function test(callback, ...callback_args) {
callback(...callback_args);
}
in this case the invocation of test for function callback_b would be like this:
test(callback_b,"b")
The second way is using arguments which are scoped to any function in JavaScript:
function test(callback) {
callback.apply(null, arguments.slice(1));
}
the invocation of test for function callback_b would be the same:
test(callback_b,"b")
Another options is to use partially applied functions. In this case you should define b_callback like this (ES6 syntax):
let callback_b = (p) => () => void{
alert('b says'+ p)'
}
or without ES6:
function callback_b(p) {
return function(){
alert('b says'+ p)'
}
}
and invoke it like this:
test(callback_b("b"))
There is a special object called arguments that gets created when a function is invoked. It's an array-like object that represents the arguments passed in to a function:
It can be used like this:
test();
// no arguments passed, but it still gets created:
// arguments.length = 0
// arguments >> []
test(a);
// ONE argument passed:
// arguments.length = 1
// arguments >> [a]
test(a,b,c,d);
// FOUR arguments passed:
// arguments.length = 4
// arguments >> [a,b,c,d]
Knowing this, one can call a callback with the rest of the arguments passed in from the parent function using apply like this:
function test(callback) {
callback.apply(null, Array.prototype.slice.call(arguments, 1));
}
// arguments passed into test are available in the function scope when
// .slice is used here to only pass the portion of the arguments
// array relevant to the callback (i.e. any arguments minus the
// first argument which is the callback itself.)
//
// N.B. The arguments object isn't an array but an array like object so
// .slice isn't available on it directly, hence .call was used here)
Might be worth reading up on:
The arguments object
Function.prototype.apply, Function.prototype.call and Function.prototype.bind as they are way to bind a context and arguments to a function (i.e. they'll work with the arguments object to call a function where you may not know how many arguments will be passed)
So how to implement a common function that you can passing some callbacks function with multiple possible parameter lists.
Basically, you don't. The function receiving the callback is in charge of what the callback receives as arguments. When you call Array#forEach, it's Array#forEach that decides what arguments your callback gets. Similarly, String#replace defines what it will call its callback with.
Your job is to say what test will do, what it will call its callback with. Then it's the job of the person using test to write their callback appropriately. For instance: You might document test as calling the callback with no arguments. If the caller wants to use callback_b, then it's up to them to handle the fact that callback_b expects a parameter. There are several ways they can do that:
The could wrap it in another function:
test(function() {
callback_b("appropriate value here");
});
...or use Function#bind
test(callback_b.bind(null, "appropriate value here"));
...but it's their problem, not yours.
Side note: If they pass you callback_b and you call it without any arguments, you won't get an error. JavaScript allows you to call a function with fewer arguments than it expects, or more. How the function handles that is up to the author of the function.
You can pass an anonymous function as the callback that will itself return your desired callback function with parameters.
test(function() { return callback_b(' how are you'); });
see this working snippet that will first use callback_a, then callback_b (with parameter) as the callback:
function callback_a(){
alert('a');
}
function callback_b(p){
alert('b says'+ p);
}
function test(callback){
if(true){
callback();
}
}
test(callback_a);
test(function() { return callback_b(' how are you'); });
You can pass the parameter while calling the callback
function test(callback){
if(condition){
callback();
}
else if(other condition){
callback("b");
}
}
test(callback_b);
You can write your callback function like
function callback_a_b(){
if(arguments.length){
var arg = [].slice.call(arguments);
alert('b says'+ arg[0])
}
else{
alert('a');
}
}
You can pass array of parameters as second param of test function or in ES6 use spread operator read more here
function test(callback, params){
if(condition){
if (params === undefined){
callback();
} else {
callback.apply(null, params); //params must be array
//ES6: callback(...params);
}
}
}
test(callback_a);
test(callback_b, [" whatever"]);
I've just checked in my browser (ffox 51.0.1) that the following works:
function test(callback,other_args){if(condition){callback(other_args);}}
results:
condition=true
test(callback_a)
=> shows the alert with 'a'
condition=false
test(callback_a)
=> doesn't show anything
condition=true
test(callback_b,"pepe")
=> shows the alert with 'b sayspepe'
condition=false
test(callback_b,"pepe")
=> doesn't show anything
I understand that callbacks are functions you pass as a parameter into another function, such as in the following simple example:
function operation(a,b, callback) {
return callback(a,b);
}
function add(a,b) {
return a+b;
}
function multiply(a,b) {
return a*b;
}
console.log(operation(5,4,add)); // 9
console.log(operation(5,4,multiply)); // 20
What confuses me greatly about callback functions is when they are used in chained function calls, such as the following:
// Angular example
$http.get(...).then(function(req,res) {
// some actions here
});
// JQuery example
$( "li" ).each(function( index ) {
// some actions here
});
In both examples, how are the parameters in the anonymous function populated? Does this in any way relate to the callback logic I gave in the operation function example I gave or is this some other concept entirely?
My best guess for the angular example is that the http promise returns an array object [req,res] and the function parameters are pulled from the array in sequential order.
What is of specific interest to me is how I could define my own chained function call in this style. How can I define something like:
myObject.performAction(function(param1, param2, param3) {
// do stuff
});
If someone could give an example like that, it would be amazingly instructive.
The parameters are passed to callback function by the calling code - same as in your example return callback(a,b);
var myObject = {
a: 1,
b: 2,
c: 3,
performAction: function(callback) {
callback(this.a, this.b, this.c);
}
};
myObject.performAction(function(param1, param2, param3) {
// do stuff
});
Based on Igor's answer, I came up with the following to mock the $http.get(...).then() syntax:
var myObject = {
transform: function (value) {
// Perform some logic based on the value parameter
var squared = value*value;
var cubic = value*value*value;
return {
a: squared,
b: cubic,
action: function(callback) {
callback(this.a, this.b);
}
}
}
};
myObject.transform(12).action(function(a,b) {
console.log(a+b); // 1872
});
The idea is that in the transform function, you perform some logic on the value parameter so that a and b are derived from some calculations instead of just being hardcoded values. That way the callback in action becomes a lot more meaningful.
This effectively abstracts the parameters a and b from the user in the anonymous function call in action. This is why these parameters have to be documented for the API call to myObject.transform.action.
function abc(arg1,arg2, callback){
console.log(arg1 + arg2) // I am doing something really interesting
if(callback){
callback(arg1+ arg2)
}
}
function add(){
console.log("from call back " + arguments[0])
}
var a =10;
abc(1,2, add)
this works fine, but if we need to send some additional arguments to the call back, what should we do??
Here, Apart from (arg1+ arg2) I need some other arguments to be set from the caller of abc to the callback
And, what is the difference between abc(1,2,add) and abc(1,2,add()) ??
Thanks :)
abc(1,2,add) => Giving the function argument as "function type". This is like giving a pointer to the function for later invoking it.
abc(1,2,add()) => Calling the add() function and giving its return value as argument.
Do you need that the callback support more than an argument? Since JavaScript is a dynamic language, just call the same callback function with more arguments:
callback(1,2,3,4)
callback(1,2,3,4,5)
callback(1,2,3,4,5,6).
JavaScript isn't strict with function signatures: functions have as many arguments as the caller gives to them.
For example, if you've a callback function like this:
function(a, b) {
}
And later you call it this way:
function("hello"); // Where's the second argument??
JavaScript won't complain. Simply b will be undefined.
the difference between add and add():
add is a function and add() is the return value of the function.
if you want to get more arguments of the function. use the arguments object
every function has an arguments object
arguments[0] == 1 arguments[1] == 2 arguments[2] == add.
You can call your callback with parameters from your original function and you can also provide the parameters for the callback inside your function call:
function f1 (args, callback, params) {
callback.apply(this, params); // Params needs to be an array
callback.apply(this, [args]); // This would call callback with 1 param - args
callback.call(this, args); // This is the same as the line above
}
function f2 () {
for (item in arguments) {
console.log(item);
}
}
f1('arg', f2, [1, 2, 3]);
If you call your function with a function call inside the parameters then it would immediately evaluate and it would not be executed as a callback.
The difference between abc(1,2,add) and abc(1,2,add()) is that in the second case, it's not abc that calls add. The consequence is that add executes much sooner than expected and without any arguments.
The usual way to pass extra parameters to a callback is to create an anonymous function that closes over the parameters:
var a=10;
var b=20;
abc(a, b, function(text){
add(a, b);
console.log(text); //logs "abc"
});
I'm new to jQuery and am bit confused about the use (or not) of parentheses with a callback function. Say I have a function:
function cb() {
// do something
}
Now what is the difference between:
$("p").hide(1000, cb);
and
$("p").hide(1000, cb());
Is it to do with when the cb function is executed? It would be great if someone could explain this to me in the simplest of terms.
cb() means give me the result of executing the function cb.
cb IS the function cb or, more accurately a pointer (reference) to it.
Is it to do with when the cb function is executed?
Essentially, yes, though the difference does run a little deeper than that.
cb is a reference of sorts to the function. You're passing the function along as a parameter to be invoked somewhere down the line.
cb() is a function call; the function will be invoked, and the result passed as an argument to .hide.
The difference is that in javascript functions are first class objects and can be passed to other functions so that they may executed at a later stage or depending on some logic.
Consider the following:
function add(a, b) {
return a + b;
}
function minus(a, b) {
return a - b;
}
function apply(func, a, b) {
return func(a,b);
}
apply(add, 3, 4); // returns 7
apply(minus, 3, 4); // returns -1
apply(add(), 3, 4); // error: invalid number of arguments for add
apply(add(0,0), 3, 4); // error: add returns 0, but 0 is not a function and
// so apply crashes when it tried to call zero as a function
$("p").hide(1000, cb); passes the function referenced by cb, as a callback.
$("p").hide(1000, cb()); passes the value returned when the function cb is called.
Given:
function cb(){ return true; }
The former is passing the callback for later calling. The latter passes the returned value true, and is essentially $("p").hide(1000, true);
I was wondering whether this is legal to do. Could I have something like:
function funct(a, foo(x)) {
...
}
where a is an array and x is an integer argument for another function called foo?
(The idea is to have one function that uses a for loop on the array, and calls that function in the params for every element in the array. The idea is so call this on different functions so elements of two arrays are multiplied and then the sums are added together. For example A[0] * B[0] + A[1] * B[1].)
I think this is what you meant.
funct("z", function (x) { return x; });
function funct(a, foo){
foo(a) // this will return a
}
This is not the way to declare a function with another function as one of it's parameters. This is:
function foodemo(value){
return 'hello '+ value;
}
function funct(a, foo) {
alert(foo(a));
}
//call funct
funct('world!', foodemo); //=> 'hello world!'
So, the second parameter of funct is a reference to another function (in this case foodemo). Once the function is called, it executes that other function (in this case using the first parameter as input for it).
The parameters in a function declaration are just labels. It is the function body that gives them meaning. In this example funct will fail if the second parameter wasn't provided. So checking for that could look like:
function funct(a, foo) {
if (a && foo && typeof a === 'string' && typeof foo === 'function'){
alert(foo(a));
} else {
return false;
}
}
Due to the nature of JS, you can use a direct function call as parameter within a function call (with the right function definition):
function funct2(foo){
alert(foo);
}
funct2(foodemo('world!')); //=> 'hello world!'
If you want to pass a function, just reference it by name without the parentheses:
function funct(a, 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:
funct(a, function(){foo(x)});
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 myFunc(myArray, callback, args)
{
//do stuff with myArray
//...
//execute callback when finished
callback.apply(this, args);
}
function eat(food1, food2)
{
alert("I like to eat " + food1 + " and " + food2 );
}
//will alert "I like to eat pickles and peanut butter"
myFunc([], eat, ["pickles", "peanut butter"]);
And what would you like it to achieve? It seems you mixed up a function declaration with a function call.
If you want to pass another calls result to a function just write funct(some_array, foo(x)). If you want to pass another function itself, then write funct(some_array, foo). You can even pass a so-called anonymous function funct(some_array, function(x) { ... }).
I would rather suggest to create variable like below:
var deleteAction = function () { removeABC(); };
and pass it as an argument like below:
removeETC(deleteAction);
in removeETC method execute this like below:
function removeETC(delAction){ delAction(); }
What you have mentioned is legal. Here, foo(X) will get called and its returned value will be served as a parameter to the funct() method
In fact, seems like a bit complicated, is not.
get method as a parameter:
function JS_method(_callBack) {
_callBack("called");
}
You can give as a parameter method:
JS_method(function (d) {
//Finally this will work.
alert(d)
});