title: Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
body: <p>Given the following examples, why is <code>outerScopeVar</code> undefined in all cases?</p>
  <pre><code>var outerScopeVar;
  
  var img = document.createElement('img');
  img.onload = function() {
      outerScopeVar = this.width;
  };
  img.src = 'lolcat.png';
  alert(outerScopeVar);
  </code></pre>
  
  <pre><code>var outerScopeVar;
  setTimeout(function() {
      outerScopeVar = 'Hello Asynchronous World!';
  }, 0);
  alert(outerScopeVar);
  </code></pre>
  
  <pre><code>// Example using some jQuery
  var outerScopeVar;
  $.post('loldog', function(response) {
      outerScopeVar = response;
  });
  alert(outerScopeVar);
  </code></pre>
  
  <pre><code>// Node.js example
  var outerScopeVar;
  fs.readFile('./catdog.html', function(err, data) {
      outerScopeVar = data;
  });
  console.log(outerScopeVar);
  </code></pre>
  
  <pre><code>// with promises
  var outerScopeVar;
  myPromise.then(function (response) {
      outerScopeVar = response;
  });
  console.log(outerScopeVar);
  </code></pre>
  
  <pre><code>// with observables
  var outerScopeVar;
  myObservable.subscribe(function (value) {
      outerScopeVar = value;
  });
  console.log(outerScopeVar);
  </code></pre>
  
  <pre><code>// geolocation API
  var outerScopeVar;
  navigator.geolocation.getCurrentPosition(function (pos) {
      outerScopeVar = pos;
  });
  console.log(outerScopeVar);
  </code></pre>
  <p>Why does it output <code>undefined</code> in all of these examples? I don't want workarounds, I want to know <strong>why</strong> this is happening.</p>
  <hr>
  <blockquote>
  <p><strong>Note:</strong> This is a canonical question for <em>JavaScript asynchronicity</em>. Feel free to improve this question and add more simplified examples which the community can identify with.</p>
  </blockquote>