Let’s say I am giving a function (in which I didn’t create) a callback. Let’s call this outside function that I didn’t create invokerFunction This function will execute a callback function I am supposed to provide it with some value (let’s pretend it will be some color).
Here is the function I am going to provide this outside function I didn’t create:
const myCallback = (color) => console.log(`The color from the invoker function is ${color}`);
There are two ways I can accomplish this:
// Method One
invoker(myCallback);
// Method Two
invoker((color) => myCallback(color));
In Method One, I am simply passing a reference to my function, which invoker will then call and execute by providing myCallback's first argument with a color. My myCallBack expects to receive a parameter, so this works well.
In Method Two, I am once again providing a callback function, except I wrap myCallBack inside of it, and invoke it there with a parameter that invoker will give to the inline arrow function.
Is Method Two redundant and confusing? I’ve seen both ways done in React tutorials, but I always opt with Method One.
Method one simply uses your function as the callback, while method two creates another function to call your function. It doesn’t invoke or execute that function, simply creates:
(color) => myCallback(color)
as an anonymous, but uninvoked, function.
Necessary, nah not really. The first does much the same, particularly as you’ve defined yours as a fat-arrow function as well, so the context hasn’t been changed.
Personally, I would prefer to see method one used - the second adds an unneccesary layer and makes the code a little more difficult to follow, for no reason. From a purely functional perspective, I greatly prefer the first.
It will be invoked by invoker, however, since invoker will execute the function you pass inside of it.
But I agree, method one seems much cleaner.
In the same way that invoker(myCallback); is immediately invoking, invoker( (color) => myCallback(color) ); would be ‘immediately invoked’.
It is being passed as a variable, though, not as an immediately invoked expression - you’re not doing invoker(myCallback() ); or invoker( (color) =>{return myCallback(color); }() ); both of which would execute the function, and assign its return value as the parameter to invoker. Instead, the function itself is the parameter.
So let’s backtrack — it would invoke what you pass it (either a variable which references a function or an anonymous function), but you are not passing an immediately invoked function expression (IIFE), which would return the result of the function.
Exactly. Called as-is, invoker would run immediately, which would immediately execute it’s callback.
if you made it immedately invoked, by adding the parentheses, then yes, the parameter would no longer be the function, but the result of the function, evaluated BEFORE invoker was run.