I've seen a code sample like that in some tutorial:
getSomething(function onSomething(name) {
return renderSomething(name);
});
And that it is equal to the following:
getSomething(renderSomething);
I'm a newbie, and never seen anything like this before. I can't really understand how the above can be the same(without parameter on the renderSomething()
).
I've tried to recreate something similar to the above code to better understand it and kind of failed. I'm showing you what I've tried and hopefully you can explain to me why the above is equivalent and the below two questions that came up.
Can you please explain to me:
name
is undefined?console.log('a')
is printed before the console.log('c')
?var name = 'alex';
console.log('start');
function print(cb) {
console.log('a');
cb();
}
function renderName(name) {
console.log('b');
console.log(name);
}
print(function onPrint(name) {
console.log('name: ', name);
console.log('c');
return renderName(name);
});
Passing a function to another function or passing a function inside another function is known as a Callback Function. Syntax: function geekOne(z) { alert(z); } function geekTwo(a, callback) { callback(a); } prevfn(2, newfn); Above is an example of a callback variable in JavaScript function.
A callback function is a function that is passed as an argument to another function, to be “called back” at a later time. A function that accepts other functions as arguments is called a higher-order function, which contains the logic for when the callback function gets executed.
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. The above example is a synchronous callback, as it is executed immediately.
Need of Callback Functions. We need callback functions because many JavaScript actions are asynchronous, which means they don't really stop the program (or a function) from running until they're completed, as you're probably used to. Instead, it will execute in the background while the rest of the code runs.
To understand how those two statements are equivalent, you really need to look inside of the function and also to reflect on why we use callbacks in the first place. It's also important to understand the difference between function declarations (function getFullName
), invocations (getFullName()
) and references (getFullName
).
We use callbacks to react to something that might happen later, usually the result of whatever has happened is of interest to us. So we create callbacks that receive that result.
Imagine you have a function getFullName
, if it was synchronous you would just call it like this:
const fullName = getFullName('John', 'Doe');
And inside the function might simply be:
function getFullName(firstName, lastName) {
return firstName + ' ' + lastName;
}
But for some reason, this function is asynchronous, so you don't get the result directly, so we use a callback to get notified when the name is ready to use:
function getFullName(firstName, lastName, callback) {
// Do something that takes time, then with the result of that
callback(firstName + ' ' + lastName);
}
Now when we call this function, it looks like this:
getFullName('John', 'Doe', function (fullName) {
console.log(fullName);
});
So the getFullName
function, will invoke our callback and pass it the value it created. Since your function takes 1 argument, the fullName will be in that argument, no matter what we name that argument. So we can replace our callback (that we've created as an anonymous function) with any other function that takes one argument, such as console.log, like this:
getFullName('John', 'Doe', console.log)
In both these cases, we're sending in a function reference to getFullName
, in the first case it's a reference from a function we've just created, in the second it's a reference to a function in the global scope.
You could equally do this:
const myCallback = function(fullName) {
console.log(fullName);
}
getFullName('John', 'Doe', myCallback);
Note how this is different from doing something like this:
getFullName('John', 'Doe', myCallback()); <-- function invocation!
Here, because we are invoking/calling the function, it will execute, and the result of that will be passed as the third argument to getFullName
, which isn't what we wanted.
Reading up on first class functions might give you more insight!
As others have mentioned, but for completion, in your example, you never pass some result to your callback, in this case you could pass the variable name
or something else to simulate the result being created. And by flipping the order in which you call console.log and cb(name)
your logs should make sense.
What you return from your callback function will never really be used, at least not in our example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With