Why is my variable unaltered after I modify it inside of a function? – Asynchronous code reference

by

Given the following examples, why is outerScopeVar undefined in all cases?

var outerScopeVar;

var img = document.createElement('img');
img.onload = function() {
    outerScopeVar = this.width;
};
img.src="https://stackoverflow.com/questions/23667086/lolcat.png";
alert(outerScopeVar);


var outerScopeVar;
setTimeout(function() {
    outerScopeVar="Hello Asynchronous World!";
}, 0);
alert(outerScopeVar);


// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);


// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);


// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);


// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

Why does it output undefined in all of these examples? I don’t want workarounds, I want to know why this is happening.

Note: This is a canonical question for JavaScript asynchronicity. Feel free to improve this question and add more simplified examples which the community can identify with.

6 s
6

Leave a Comment