Home Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
Reply: 0

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

user12139
1#
user12139 Published in September 20, 2018, 4:34 pm

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 = '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.

share|improve this question
  • 5
    Related Meta discussion - General JavaScript asynchronicity reference for close voting? – Dukeling May 16 '14 at 0:02
  • @Dukeling thanks, I'm pretty sure that I had commented with that link but there are apparently some missing comments. Also, regarding your edit: I believe having "canonical" and "asynchronicity" in the title helps when searching for this question to mark another question as a dupe. And of course, it also helps in finding this question from Google when looking for asynchronicity explanations. – Fabrício Matté May 16 '14 at 0:18
  • 3
    Putting a bit more of thought, "canonical asynchronicity topic" is a bit heavy on the title, "asynchronous code reference" is simpler and more objective. I also believe most people search for "asynchronous" instead of "asynchronicity". – Fabrício Matté May 20 '14 at 12:16
  • 1
    Some people initialize their variable before the function call. How about changing the title that somehow represents that as well? Like "Why is my variable unaltered after I modify it inside of a function?" ? – Felix Kling Jul 7 '14 at 8:32
  • In all the code examples that you have mentioned above, "alert(outerScopeVar);" executes NOW , whereas assigning of value to "outerScopeVar" happens LATER(asynchronously). – refactor May 3 '16 at 8:52

6 Answers 6

active oldest votes
up vote 455 down vote accepted
+400
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.541385 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO