Related
I just realized that I do not understand javascript enough, despite the fact that I have been coding it for some time.
What I am not comfortable is Javascript Async.
until now I have been using callback and promise, because documentations and tutorials did it so as below.
$.get("some/url", function() {
// callback body
})
axios.get('some/url').then(res => {
console.log(res.data);
});
arr.map(element => console.log(element))
I know callback is used to my our code asynchronous
function doSomething(cb) {
console.log("this function receives callback function");
cb();
}
but what if we just call the function inside the function manually
function func1() {
// function body
}
function doSomething() {
console.log("this function receives callback function");
func1();
}
What I thought is as long as function is called at the right time, we do not have to use callback.
or is it because callback does its work while some other operations are going on?
If so, doesnt it break the principle of javascript as single threaded?
because its doing two things at the same time.
besides, do people use promise over callback function because of its readability and you could use Promise.all() ?
I feel like I am missing a core advantage of using promise.
Kindly please help me understand better.
If you don't use a callback, then you can only call func1(). The original doSomething() is more general, since you can call different functions depending on what the caller needs.
function func1() {
// function body
}
function func2() {
// function body
}
doSomething(func1);
doSomething(func2);
Is exactly the difference between hard coding data in your code or getting it dynamically.
In backend for example you make the code so it can serve different users different needs... at the same time, the same code...
So in this example:
function doSomething(cb) {
console.log("this function receives callback function");
cb();
}
you can build a functions that serve different users different information depending on the cb it receives...
in this example:
function func1() {
// function body
}
function doSomething() {
console.log("this function receives callback function");
func1();
}
it just runs a specific function func1 and that's it
It is all about reusability. If you call pass your callback into the utility function, in your example it is doSomething, you will not be able to reuse doSomething function in other parts of your program. You have just created a tight coupling between two functions.
If you program to the interface, and define which kind of callback you are expecting in your doSomething function, you will be able to use this doSomething function anywhere. It will not have to know which exact function to call, it will just concern about having a callback which expects n parameters in some order which.
I am trying to wrap my head around callbacks and I do not understand how callbacks guarantee that a statement will execute after(in terms of time) another statement which takes an unknown amount of time. I do not care about promises,await,async, etc but just plain callbacks as I am trying to learn.
For example below, my method will execute the callback before the unknown time event has occured. I can see how callbacks can be used to execute something because an event occurred but not how they can be used to guarantee that something will be executed after(in terms of time) something else has finished executing and returned something meaningful.
function foo(callback) {
setTimeout(() => console.log("Do something with unknown time"),
2000);
callback();
}
function callback() {
console.log("Execute callback");
}
foo(callback);
So what I am asking is can callbacks be used to guarantee execution sequence in the time domain ? Or is their only purpose responding to events ?
Callbacks is a way of invoking a function that is passed as a parameter to invoker function(in your example foo). Callbacks guarantee that a function will be invoked if no error occurs before it's call inside the function. Callbacks aren't asynchronous either but the way it executes later inside the function after some line of code makes everyone think it as asynchonous at first.
And as you've added setTimeout function on the above example, setTimeout is an asynchronous callback envoker function that calls it's callback(in your code () => console.log("Do something with unknown time")) asynchronously after a certain defined time(2000). So, setTimeout wont stop the execution for 2 seconds as you've expected, instead it let's the further line of codes execute without worrying about what will happen inside it's callback. So, the callback() will trigger at that instant when foo(callback); is triggered.
You can find more info about callback in here.
You have asked two questions,
Is callback execution sequence guaranteed?
Is callback only respond to events ?
Answer
Yes.
From my understanding, callback is just calling another function to be run now (when it is called)
It is guarantee to run immediately when you call it.
To ensure something is called before the callback is triggered, simply put the things you want to call execute first before callback is conducted.
e.g. from your code, by modify it a bit, callback is guarantee to run after the console.log is executed.
function foo(callback) {
setTimeout(() => {
console.log("Do something with unknown time");
callback();
}, 2000);
}
function callback() {
console.log("Execute callback");
}
foo(callback);
It is the setTimeout which defers the execution, and is not related to callback methodology.
Sure, callback can be used as a callback to respond to event, just like elem.addEventListener("click", callback);. But not only that.
A simple example will be illustrated below.
e.g.
var map = function(arr, callback) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
result.push(callback(arr[i]));
}
return result;
};
map([0, 1, 2, 3], function(item) {
return item * 2;
})
Edited
This edit is referring to
For example, if I am making a database call, I do not know how much time it is going to take for the data to be retrieved. If i try to access it before it has arrived, I'll get an error.
Calling a database, is by no means different from an async http request. So here, I will use XMLHttpRequest to demonstrate how to use callback to ensure this. But normally, these are features provided in browser or node.js already. So you do not need to write it by your own. Of course, to prevent callback hell, I will personally prefer use of Promise or async/await. But this is a bit out of topic.
So let see how XMLHttpRequest can use callback to handle async task.
var sendRequest = function(callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(this);
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
}
and you can use callback to handle async event. Sometime you dont know when it will happen. And the basic idea how it works is from the example I have said in answer 1.
If I understand you mean correctly, you can use callback as an event to do something, such as: onerror, oncomplete...
In this example, we start to run todo function, and we have oncomplete function which can be used as callback to do something after completing works on todo function.
While running, if there is some error, it will be logged to onerror function.
function todo(oncomplete, onerror) {
try {
console.log("Start...");
console.log("Do something with unknown time");
setTimeout(() => oncomplete(),2000);
// you can try to throw error here to test
// throw new Error("Some error message...");
} catch (e) {
onerror(e);
}
}
function oncomplete() {
console.log("Done!");
}
function onerror(e) {
console.error(e.message);
}
todo(oncomplete, onerror);
What is the best way to wait for a function to complete before the next function is called?
I have a scenario where two functions are called consecutively, one after the other. I need the first one to complete before the second one is called.
Function1();
Function2();
How do I tell the code to wait for Function1 to complete before attempting Function2?
WebDevelopment: solution can be javascript or jQuery, or Ajax based.
Thanks...
You can do many ways but a very simple Example
function first(){
// define every thing here and then at the end call your second function
function2();
}
Checkout more possibilities here
You could either use Promise or callback to solve this problem, with Promises being the more modern and cleaner way of doing things:
Promise:
function foo() {
return new Promise(function(resolve, reject) {
// do some work
resolve(optionalParam);
// something caused an error whoops
reject(optionalParam);
})
}
function bar() {
// do something
};
// Call bar only once foo finishes
foo().then(function() {
bar();
}, function() {
// this is the reject case an error here
});
Promises are able to be chained, meaning that if bar was a Promise we could chain another then event to that.
You could also use callbacks to solve your problem
function foo(cb) {
var data = 'alex';
cb(data);
}
function bar(name) {
// some processing
console.log(name);
}
// Call foo, then execute bar when foo finishes
foo(function(data) {
bar(data); // alex would be logged once the callback fires
});
In the callback example here, we pass a function as a parameter, once the running function block encounters your invocation of the cb parameter, it will invoke the function which emulates the asynchronousy. Just remember though that it does not stop the execution context on that function. If we had code like:
function foo(cb) {
var data = 'alex';
cb(data);
console.log('this is after so don't print it'); <-- still prints
};
The final console.log will print when the callback finishes its time on the event queue (unless of course you fire an even in CB like a http request, in which the log will fire and then the http request would finish after).
To stop the last console log you would need to explicitly tell javascript to return when cb is called to prevent further execution in that method, and personally this is where I favour Promises, once you resolve or reject the promise the execution context within that function scope is stopped.
if your in the browser, just use callback it's the easiest and cross-browser way to do it.
Exemple:
function sayBill() {
console.log('bill');
}
function sayHiAfterTwoSeconds(callback) {
setTimeout(function() {
console.log('hi');
// call the function you passed in parameter
if (typeof callback === 'function') {
callback();
}
});
}
sayHiAfterTwoSeconds(sayBill);
// will output 'bill hi'
https://jsfiddle.net/80bbbjco/
If you want better way to do it, but not cross browser there is promise : https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
Or even more modern but not supported ATM async await: https://jakearchibald.com/2014/es7-async-functions/
Are Javascript callbacks just anonymous functions sent as an argument in a function call?
For example,
mySandwich('ham', 'cheese', function() {
alert('Finished eating my sandwich.');
});
JavaScript callbacks are functions passed as values into an asynchronous function for the purpose of continuation.
Functions are values:
So in JavaScript, you can pass a functions around like values. You can reference a function in a number of ways:
Pass a literal anonymous function as the callback
doSomeWork(function (err, result) {
if (err) {
throw new Error(err);
} else {
console.log(result);
}
});
Pass a literal named function as the callback
doSomeWork(function magicalCallback(err, result) {
if (err) {
throw new Error(err);
} else {
console.log(result);
}
});
(Naming every function is a smart idea because you can see it in the stack trace)
Pass in the value of a variable which happens to be storing a function as the callback
var someFunction = function callItWhatYouWant(err, result) {
if (err) {
throw new Error(err);
} else {
console.log(result);
}
}
// reference the callback stored in the someFunction variable
doSomeWork(someFunction);
Pass in the function by referencing the function name as the callback
function callItWhatYouWant(err, result) {
if (err) {
throw new Error(err);
} else {
console.log(result);
}
}
// reference the callback function using the function name
doSomeWork(callItWhatYouWant);
Continuation?
Continuation is all about the next step. When you call a function which is asynchronous, it needs to notify you that it is done. The callback acts as the next step, i.e. the asynchronous function will call you back when it is done.
So a callback is just a function argument used for a particular purpose, that being, continuation.
Callback signature
There is no standard for which arguments a callback should take, but in the Node.js community we have adopted the general signature
function (err, result)
where err is an Error object if something bad happened, or null if things were successful. If things went bad result is generally undefined, otherwise it contains the result. So your callback is generally called by either
callback(new Error("oops"));
or
callback(null, result);
Also note that it's normal for the last parameter of an asynchronous function to be the callback parameter
function callLater(delay, args, callback) {
setTimeout(function () {
callback(null, args);
}, delay);
}
In your example: yes
But in m example: No
function myCallback()
{
alert('finished eating my sandwich');
}
mySandwich('ham','cheese', myCallback);
So, from you comment I think the real question is: What is an anonymous function? I did my best, but it is still early in the morning here, so don't shoot me.
Well, gooed question. Hard answer
when defining a function, it lives withing its scope. Scope? huh? Ok, let's start again.
when a webpage is loaded, the browser creates a window object. It then starts parsing everything you wrote in that document (let's assume HTML).
Every DOMElement it encounters, gets put into the window.document object. Every Element inside the widnow.document element is rendered/interpreted in your browser window.
Now, the browser encounters the following <script>:
var myVariable = 'So cool';
The browser sees var myVariable. This tells him to create a variable called myVariable in the current scope (again that word). the current scope is window (the window object the browser created). So it adds the variable to the window object:
window.myVariable === myVariable
The same goes for functions
function myAwesomeFunction()
{
alert('I am so cool');
}
Creates a function inside the current scope (window) with the name myAwesomeFunction. So again:
window.myAwesomeFunction === myAwesomeFunction
But what if I want to create a function I don't whant any other code to have access to? What if I want a function that should only exist when a certain specific button is clicked.
Well, enter anonymous functions. these are functions that are declared in the anonymous scope. they cannot be accessed using the window object:
myButton = document.getElementById('myButton'); // === window.document.getElementById('myButton');
myButton.addEventListener('click', function()
{
alert('I am so awesome');
});
Now, the function you passed into the eventlistener only lives inside the eventListener. It doesn't even have a name. So it's scope is 'the on click event of the button' but we can't access it from outside because it doesnt have a name. Thus, anonymous function.
A good read would be to google stuff like 'javascript scope', 'javascript window object', ... A lot of good articles give a better in depth explanation of all the words I threw at you.
Yes, except that they don't have to be anonymous functions, and there's a bit more to the definition of a callback. The other two answers have covered the details of what callbacks are for and anonymous functions well, but I have had similar confusion to yours when I was first learning so I wanted to add a missing piece. So, your example:
mySandwich('ham', 'cheese', function() {
alert('Finished eating my sandwich.');
});
I've noticed most callback explanations are like this- they don't include the declaration of the larger function, in this case mySandwich. But yes, the function this is being passed into does need to explicitly call the callback function for it to run. So your mySandwich function might look like this:
function mySandwich(meat, topping, callback) {
//some code here using meat and topping
//some code here about eating the sandwich
callback();
}
So your code passes those parameters, including the function, into the mySandwich function, which then invokes it. Because many times the top-level function we are using is a method from a library rather than part of our own code, we don't actually see the step where the callback is invoked, but it does still happen and doesn't just automatically execute itself.
So yes, a callback is really just a function being passed as a parameter to another function, and then it is invoked usually as the last thing to happen in that larger function. There's more than that to callbacks, but they operate by the same rules as other functions in that somewhere they have to be declared and somewhere they have to be called, otherwise they don't run.
I am having a hard time understanding how the callback() function is used in the following code block.
How are we using callback() as a function, in the function body, when function callback() has not been defined?
What are the repercussions of passing true / false as parameters into the callback function below?
I appreciate any clarification, thanks in advance!
socket.on('new user', function(data, callback){
if (nicknames.indexOf(data) != -1){
callback(false);
} else{
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateUserList();
}
});
When you pass a function as an argument, it is known as a callback function, and when you return a value through this callback function, the value is a parameter of the passed function.
function myFunction(val, callback){
if(val == 1){
callback(true);
}else{
callback(false);
}
}
myFunction(0,
//the true or false are passed from callback()
//is getting here as bool
// the anonymous function below defines the functionality of the callback
function (bool){
if(bool){
alert("do stuff for when value is true");
}else {
//this condition is satisfied as 0 passed
alert("do stuff for when value is false");
}
});
Basically, callbacks() are used for asynchronous concepts. It is invoked on a particular event.
myFunction is also callback function. For example, it occurs on a click event.
document.body.addEventListener('click', myFunction);
It means, first assign the action to other function, and don't think about this. The action will be performed when the condition is met.
I agree with you, the code in the snippet is very unclear.
The answers you got are great, however none refers to the actual use of callback in your code, and I would like to reference that specifically.
First, I will answer your question, and then I will elaborate on the complexity of it.
The answer
turns out socket.io are doing something very cool which is not the standard I know..
socket.io are passing the callback from the front-end to the backend!
So to answer your question what is this callback function - you have to look at your frontend code.
Look for code that looks like this
socket.emit('new user', data, function( booleanParameter ){
// what are you doing with booleanParameter here?
});
I assume that in your case true/false values are meant to pass back to the frontend if new user was added (true) or not (false)..
Or perhaps if the nickname is already in use or not so that the frontend can show an error string if it is..
Basically, #SumanBogati was right in his answer, but I felt it was lacking the step of finding the callback in the front-end due to socket.io's special treatment.
Further Suggestion To make your code clearer
Change name of parameter data to nickname
Add comments - why are you placing nickname on socket?
add documentation
Use jsdocs to explain what the callback is doing
/**
#callback NewUserCallback
#param {boolean} booleanParameter does something..
**/
and then on the function itself
/**
#parameter {string} nickname
#parameter {NewUserCallback} callback
**/
The complexity
Usually, in nodejs, a callback expects the first argument to be an error, so reading your code, it says
socket.on('new user', function(data, callback){
if (nicknames.indexOf(data) != -1){
///// THERE IS NO ERROR
callback(false);
}else{
///// THERE IS AN ERROR
callback(true);
/// do more stuff after the error
socket.nickname = data;
nicknames.push(socket.nickname);
updateUserList();
}
});
Not the pattern you'd expect, is it? I guess this is why you asked the question.
Still the question remains what socket.io's callback means, right? Perhaps their callback does not expect an error as first argument.
I have never used socket.io, and I was unable to find a documentation to clarify this. So I had to download their chat example and debug it ==> and so the answer I gave, they are passing the function from the frontend to the backend.
Socket.io should definitely stress this point in large font in their documentation under a title named "How does socket.io handle callbacks?" or "How does our callbacks work?".
Great question! Learned a lot from it!
I'll try to simplify with a "concrete" example (I hope).
Let's say I have a function that "calculates" the current day and I'll call that function each time I would need the current day ("Don't call us, we'll call you" or whatever).
var getCurrentDay = function (callback) {
var currDate = new Date();
callback(currDate, 'err');
});
};
getCurrentDay(function (returnDay) {
logger.info('Today is: ' + returnDay); });
A callback function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.
Here is my simple example for callback function
// callback add
function add(a, b){
console.log(a+b);
}
// Main function
function getInput(cb) {
c = 5+5;
d = 6+6;
if (typeof cb === 'function') {
cb(c, d);
}
}
getInput(add)
For detailed explanation refer the this link
Without thinking too much, see the following example.
In the following example, I just call the print function from the add function.
function print( ans ){
console.log(ans) ; // 7
}
function add(a, b){
print(a+b) ;
}
add(2,5);
What if I use the print function as a parameter? Without using print function from global scope I just pass the print function as an argument.
function print( ans ){
console.log(ans) ; // 7
}
function add(a, b, callback){ // here callback = print
callback(a+b) ;
}
add(2,5,print); // print function as a parameter
Generally, JavaScript allows function as a parameter.
So any function that is passed as an argument is called a callback function.
I think now callback is understandable to you.
Callback function mean call after another:)
doHomeWork('math',alertMsg);
Above line said 1. call doHomeWork and then call 2. alertMsg, that's it.:)
function doHomeWork(subject,callback){
console.info("study: "+subject);
callback();
}
alertMsg = function(){
console.info("alert");
}
doHomeWork('math',alertMsg);
Output:
study: math
alert
A callback is any function that is called by another function using parameter
Here a query for you Suppose that Consider how programmers normally write to a file:
- `fileObject = open(file)` //now that we have to wait for the file to open, after that we can write to this file*
- fileObject.write("We are writing to the file.") // but i want to write , not wait
This case - where callbacks are helpful:
//we can pass **writeToFile()** (a callback function) to the open file function
- fileObject = open(file, writeToFile)
//execution continues flowing -- we do not wait for the file to be opened
//once the file is opened we can write to it, but while we wait we can do other things
Function inside a function is called a callback function. Or let me say that the inside function which is present inside the parent function is called the callback function.
If you want to complete a task2 after task1. Then you can make task2 as the callback and this will run asyncronously
Here is one example where the usage of callback function is easy to understand.
A login function which performs user login with the server asynchronously.
Due to asynchronous call , we need to get the result of login once the date receives from the server.
const axios = require('axios');
function login(loginData,callbackSuccess,callBackFailure) {
axios
.post("/api/login",loginData)
.then((response) => {
callbackSuccess(response);
})
.catch((error) => {
callBackFailure(error);
});
}
function callbackSuccess(data) {
console.log("Login response :",data);
}
function callBackFailure(error) {
console.log("Login failed :",error);
}
let userData = {
username : "test",
password : "abcd123"
}
login(userData,callbackSuccess,callBackFailure);