Javascript data structures

Question

Hi,

I would like to know if it is possible to do something like this:

if (mb == null || typeof (mb) != "object") {
    var mb = new Object();
}


mb = {
    tests: {
        onAnimals: {
            test: function() {
                return "";
            }
        }
        onHumans: {
            test: function() {
                return "";
            }
        }
    }
}

Bu when I tries it, I can see Tests, but when I dot further in, I can't se onAnimals / onHumans.

javascript is still new to me, so hope you can help.

Answer 1

You're missing a comma before onHumans. I've assumed mb to be a global variable; you can use var instead if that's what you need. Also, it's easier to read if you structure it differently, like this:

window.mb = window.mb || {};
window.mb = {
  tests: {
    onAnimals: {
      test: function(){
        return "";
      }
    },
    onHumans: {
      test: function(){
        return "";
      }
    }
  }
};

Answer 2

Your code is mostly valid, and you don't even have to do the initial if-check. Just type var mb = { ..., and you'll start set mb to a new object, regardless of whether it was one before, or undefined, or something else...

What you're missing is a comma after the onAnimals declaration tho:

mb = {
    tests: {
        onAnimals: {
            test: function() {
                return "";
            }
        },
        onHumans: {
            test: function() {
                return "";
            }
        }
    }
}

Answer 3

You don't need to declare the variable as an object beforehand, simply using the brackets like that is all you need. You do have a syntax error, missing a commas before "onHumans", but aside from that, it looks good to me. You should be able to reach the functions via mb.tests.onAnimals.test and mb.tests.onHumans.test

Answer 4

You are missing a comma before onHumans

if (mb == null || typeof (mb) != "object") {
    var mb = new Object();
}

mb = {
    tests: {
        onAnimals: {
            test: function() {
                return "animal";
            }
        },
        onHumans: {
            test: function() {
                return "human";
            }
        }
    }
}

alert(mb); //[object Object]
alert(mb.tests); //[object Object]
alert(mb.tests.onAnimals); //[object Object]
alert(mb.tests.onHumans); //[object Object]
alert(mb.tests.onAnimals.test()); //animal
alert(mb.tests.onHumans.test()); //human

Answer 5

As stated in some of the comments above testing for the existence of the variable mb is redundant when you just re-declare it to append your methods and properties.

If you are testing for the existence of the variable to add additional methods to the object you should use a method like jQuery's extend or ExtJs's apply method.

jQuery:

window.mb = $.extend(window.mb||{}, {
    tests: {
        onAnimals: {
            test: function() {
                return "";
            }
        },
        onHumans: {
            test: function() {
                return "";
        }
    }
});

Ext:

window.mb = Ext.apply(window.mb||{}, {
    tests: {
        onAnimals: {
            test: function() {
                return "";
            }
        },
        onHumans: {
            test: function() {
                return "";
        }
    }
});

This snippet of code will either append the tests object to the existing mb variable or create the mb variable then append the tests object to it.