Question

I’m having a hard time grasping the concept of closures and variable scope in JS. Specifically, how do I access the deeply nested styleData variable in a class and then an object created from that class?

I’m sure I have a few other things wrong here, so please chime in and correct me where you see fit. Thanks!

var BuildJSON = {
    convert: function() {
        $.ajax({
            type: "GET",
            url: "style2.xml",
            dataType: "xml",
            success: function(xml) {
                var styleData = $.xml2json(xml);
                return styleData; // Do I need to return this somehow?
            }
        //How to get access to styleData??
        });                 
    },

    styleData: this.convert();
};

var myClass = function() {
    this.info = BuildJSON.styleData;
};

var myObject = new myClass;

alert(myObject.info.Style[0].name);

Answer 1

Closures in JavaScript are functions, so anything declared within a function scope will ONLY be visible inside that function.

In your example styleData is local, it belongs to the success function, and can’t be accessed anywhere else. The easiest solution is to declare that variable at the top of the BuildJSON scope, in this case since you’re declaring that object as an object literal you can initialize it as a property of that object:

this.styleData = '',

...

success: function(xml) {
  BuildJSON.styleData = $.xml2json(xml);
}

The “problem” with this approach is that styleData is public, and maybe that’s not what you want. In case you want to use that variable inside BuildJSON but not make it publicly accessible, the module pattern comes to the rescue.

var BuildJSON = (function(){
  var styleData = '', // local
      convert = function(){ ... } // You can use style data here

  return {
    convert: convert // Return only stuff you want to be public
  }
}())