Question

What is the best to use global variables outside of a callback function?

    var icon; 
    $(function(){

      $.get('data.xml', function(xml){

           icon = xml.documentElement.getElementsByTagName("icon");
           //this outputs a value
           console.log(icon);
       });
       //this is null
       //How can this maintain the value set above?
       console.log(icon);
    });

Answer 1

The code you have provided is perfectly valid — and, in fact, icon does “maintain” it’s value. The problem, likely, is that get() runs asynchronously — only calling the anonymous function after 'data.xml' has been fully loaded from the server. So the real-world sequence of execution looks something like this:

1. call get('data.xml', function(xml){...}) (starts loading data.xml)
2. call console.log(icon) (icon is still null at this point)
3. (data.xml finished loading) now the anonymous function is called, which assigns the value to icon: icon = xml.documentElement.getElementsByTagName("icon").

If you want to do something with the value of icon, after the ‘data.xml’ has been fetched, then you’ll need to do it inside the anonymous callback function. Like this:

var icon; 
$(function(){

  $.get('data.xml', function(xml){
       icon = xml.documentElement.getElementsByTagName("icon");
       console.log(icon);
   });
});

good luck!

---

Note: you can still use icon from code that is outside the anonymous function, but you’ll need to wait to access it, until after the anonymous function has been run. The best way to do this is to put the dependent code into its own function, and then call that function from within the callback function:

var icon; 
$(function(){

  $.get('data.xml', function(xml){
       icon = xml.documentElement.getElementsByTagName("icon");
       loadIcon();
   });

   function loadIcon() {
       console.log(icon);
       // ... do whatever you need to do with icon here
   }
});