title: Pass data back to anonymous function via callback?
body: <p>I've been researching callback functions in the JavaScript language lately and during my testing I've encountered an issue that I didn't foresee, but once I encountered it, I understood what the issue was most likely to be.</p>
  
  <p>I've written two methods that work together to call the Stack Exchange API for learning purposes. The first builds the request URL and the second calls the web service itself.</p>
  
  <pre><code>function getSEWebServiceResponse(request, callback) {
      var apiRoot = 'https://api.stackexchange.com/2.2/';
      var key = 'key=s29XM)Eqn2x3YxhjLgFwBQ((';
      if (request.indexOf('?') &gt;= 0)
          key = '&amp;' + key;
      else
          key = '?' + key;
  
      getWebServiceResponse(apiRoot + request + key, callback);
  }
  function getWebServiceResponse(requestUrl, callback) {
      var request = new XMLHttpRequest();
      request.open('GET', requestUrl, true);
      request.onload = function() {
          if (request.status &lt; 200 || request.status &gt;= 400)
              callback("An unexpected error occurred.");
          else
              callback(JSON.parse(this.response));
      };
      request.send();
  }
  </code></pre>
  
  <p>Now, this implementation is straightforward, but the issue I ran into was that passing back the response resulted in <code>undefined</code> and I believe the cause is that I'm using an anonymous function as the callback for <code>getSEWebServiceResponse</code>:</p>
  
  <pre><code>function getAssociatedAccounts(accountID, callback) {
      var url = 'users/' + accountID + '/associated';
      getSEWebServiceResponse(url, function() {
          if (!this.items) // this.items is undefined.
              return;
  
          var accounts = sortAccountsByReputation(this.items);
          //... DO MORE STUFF
          callback();
      });
  }
  </code></pre>
  
  <p>I believe the simple solution is to create a defined function instead (but I feel that there should be a way to do it with anonymous functions):</p>
  
  <pre><code>function getAssociatedAccounts(accountID, callback) {
      var url = 'users/' + accountID + '/associated';
      getSEWebServiceResponse(url, processAssociatedAccounts);
  }
  function processAssociatedAccounts(response) {
      if (response.items)
          return;
  
      var accounts = sortAccountsByReputation(this.items);
      //... DO MORE STUFF
      callback();
  }
  </code></pre>
  
  <p>A few related posts that didn't offer solutions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/23301863/how-do-i-pass-a-parameter-back-to-an-anonymous-callback-function">This one</a> is the reverse of what I want to do.</li>
  <li><a href="https://stackoverflow.com/questions/3560681/simplest-way-to-pass-value-back-from-anonymous-callback">This one</a> doesn't pass arguments.</li>
  </ul>
  
  <hr>
  
  <p>Is there a way to pass variables to an anonymous callback function instead of creating a named function?</p>