nodejs variable instantiation in a callback function - node.js

Question

I have a script in nodeJS that connects to my postgres DB, the issue is that on a callback method I'm initiating a variable but it seems always empty, this my app.js script :
var ck_username = /^[A-Za-z0-9_]{1,20}$/;
function fncCheckUsernameAvailability(vstrUsername, callback) {
var pg = require("pg");
var client = new pg.Client({user: 'xxx', password: 'xxx', database: 'xxx', host: 'xxx.com'});
client.connect(function(err) {
if (err) {
callback(err, null);
return;
}
client.query("SELECT username FROM users WHERE username ='"+vstrUsername+"'", function(err, result) {
if (err) {
callback(err, null);
return;
}
if (result.rows[0] == undefined) {
callback(null, null);
}else {
callback(null, 'Username already taken');
}
client.end();
});
});
}
app.post("/Signup", function(req, res){
var username = req.body.username;
var usernameError = '';
var errors = [];
if (!ck_username.test(username)) {
errors[errors.length] = "Invalid username";
usernameError = "Invalid username";
}
if (ck_username.test(username)) {
//The issue starts here
fncCheckUsernameAvailability(username, function(err, result) {
if(result != null){
errors[errors.length] = result;
usernameError = result; // usernameError is always empty
console.log(result);//This is printed in console, I can see the result
}
});
}
if (errors.length > 0) {
res.render('Signup.ejs', {
layout:false,
usernameError:usernameError // usernameError is sent to the view empty
});
}
else{
res.render('Signup.ejs', {
layout:false,
usernameError:'No errors'
});
}
});
The result is displayed on cansole so Can someone tell me why this variable is not instantiated , is this callback an asynchronous one?

Answer 1

is this callback an asynchronous one?
Yes.
//This line executes at time 1
if (ck_username.test(username)) {
//The issue starts here
fncCheckUsernameAvailability(username, function(err, result) {
//this section of code executes at time 3! Oh snap async blew my mind!
if(result != null){
errors[errors.length] = result;
usernameError = result; // usernameError is always empty
console.log(result);//This is printed in console, I can see the result
}
});
}
//This section of code executes at time 2 which is BEFORE time 3
if (errors.length > 0) {
res.render('Signup.ejs', {
layout:false,
usernameError:usernameError // usernameError is sent to the view empty
});
}
You have to move ALL the code that requires the result variable INSIDE that callback function. Putting it outside the function but lower in the file makes things execute in the wrong order.
Also checkout http://callbackhell.com for guidance on adjusting to code organization in an async environment.

Answer 2

Yes, the callback is asynchronous, which can execute at any time. It is probably then not yet defined at the time you are accessing. Therefore, you should access the variable from inside the callback, so it will always be defined at that point.
app.post('/Signup', function (req, res) {
var username = req.body.username;
if (!ck_username.test(username)) {
res.render('Signup.ejs', {
layout: false,
usernameError: 'Invalid username'
});
} else {
fncCheckUsernameAvailability(username, function (err, result) {
if (result != null) {
res.render('Signup.ejs', {
layout: false,
usernameError: result
});
} else {
res.render('Signup.ejs', {
layout: false,
usernameError: 'No errors'
});
}
});
}
});
Here is an example of how callbacks work, and why your variable didn't return the expected value. Take these two functions:
var foo = function(num, callback) {
setTimeout(function() {
callback(num * 2);
}, 5000);
};
This function multiplies the number by two, but after 5 seconds. If you try to access the variable before those 5 seconds, you don't have a value, like this case:
var num = 0;
foo(5, function(result) {
num = result;
});
console.log(num); // returns 0
In this case, num is only set to 10 after 5 seconds, console.log() will have executed before that time has passed.