Javascript Scope Closure Issue

Question

This syntax does not work(urlToUse is set as undefined rather than the current url):

var urlToUse;
    chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT}, function(tabs){
        urlToUse= tabs[0].url;
    });
    $('#itemsList').append(urlToUse)
}

Whereas this does (urlToUse is set as the current tab url). The only difference is that the last line is now inside the callback function:

var urlToUse;
    chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT}, function(tabs){
        urlToUse= tabs[0].url;
        $('#itemsList').append("<p>"+urlToUse+"</p>");
    });

However, based on this stack overflow example (#5 on the link, pasted below), the code should work :

var a = 1;

var six = (function() {
  var a = 6;

  return function() {
// JavaScript "closure" means I have access to 'a' in here,
// because it is defined in the function in which I was defined.
alert(a);
  };
})();

My reasoning is that the variable urlToUse is defined in the function in which the callback is defined, so javascript closure applies. All of this is within the else statment of $(document).ready(function(){here});