Develop Reference

javascript: Callback function code considered as string

Am a newbie in javascript, please help me understand below case where the callback function code is being considered as a string and passed as argument instead of passing the value of the callback function as an argument:
//Case3: Create Callback function in the argument section of calling statement.
function child3(callback,arg2=3) {
return console.log("Case3: callback function - parent function out:", callback+arg2,"\n");
}
child3(parent3=()=>{
let a=1;
let b=1;
return a+b;
},2);
Output:
Case3: callback function - parent function out: ()=>{
let a=1;
let b=1;
return a+b;
}2

When you use +, there are two possibilities:
If both operands are numbers or BigInts, they are added together
Otherwise, both operands are concatenated together into a string
If you do
callback+arg2
and callback isn't a number, the result will be a concatenation of it and arg2. In your code, callback is not a number; it's a function. You probably wanted to call the callback instead of concatenating it - eg, callback().
Another issue is that
child3(parent3=()=>{
should almost certainly be
child3(()=>{
unless you deliberately wanted to both create a new global function named parent3 and pass that to child3.
function child3(callback, arg2 = 3) {
console.log(callback() + arg2);
}
child3(() => {
let a = 1;
let b = 1;
return a + b;
}, 2);

It's not a string, but a parameter. It has a name in the function's parameter list, which is callback, so, inside the function it is referred to as callback and when you pass
"Case3: callback function - parent function out:", callback+arg2,"\n"
to console.log, you convert the function to string. By the way, you can do that without passing the function as parameter as well
function foo(a, b) {
return a + b;
}
console.log(foo);
So, you do not pass it as a string, you pass it as a function instead, but it is converted into a string, i.e. the function definition when you call console.log.

Alternatives in JavaScript Callback Functions and How To Use Them

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"]
});

How to pass a callback function with multiple possible parameter lists

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

Callback function - use of parentheses

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);

Passing a function as an argument in a javascript function

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)
});