Associative Array / Object can't be read in functions

Question

At the very beginning of the javascript file, I have:

var lbp = {};
lbp.defaults = {
    minLength: 40
};

I can successfully alert it afterwards, with:

alert(lbp.defaults.minLength);  

But as soon as I put it inside a function, when I alert, I get "Undefined". What gives, and how do I avoid this? Is it absolutely necessary to pass this variable into each function, for example, by doing:

function(lbp) { alert(lbp.defaults.minLength); }

I would have thought that defining it first, it would attain global scope and not be required to be passed in?

Thanks in advance for enlightening me :)

====================================

EDIT: The problem seems like it might be my initialize function is itself defined within lbp. Is there any way to use this function var, and still use lbp vars inside it?

lbp.initialize = function() {
        alert(lbp.defaults.minLength);  
};

The full bit of code looks like this:

<script type="text/javascript">

var lbp = {
    defaults: {
        minLength: 40
    }
};

lbp.initialize = function() {
    alert(lbp.defaults.minLength);  
};
    window.onload = lbp.initialize;
</script>

Answer 1

This works for me from javascript console in Firefox:

javascript:var lbp={}; lbp.defaults={minLength: 40};function xx() { alert(lbp);alert(lbp.defaults);alert(lbp.defaults.minLength); }; xx();

Gives output [object Object], [object Object], 40.

So, it seems there might be some problem with some associated code, which is not shown?

Answer 2

Are you actually passing lbp as the argument? Otherwise the parameter with the same name will hide the global variable.

Answer 3

Use this.

var lbp = {
    defaults: {
        minLength: 40
    }
};

lbp.initialize = function() {
    alert(this.defaults.minLength);  
};

window.onload = function() { lbp.initialize(); };

If you call initialize as a method of lbp, this will point to lbp. When you assign a function to an event handler, such as window.onload, you are essentially copying the body of that function to the object on which the event handler is defined. So,

window.onload = lbp.initialize

is the same as

window.onload = function() {
    alert(this.defaults.minLength);  
};

Now, this is pointing to window, which is obviously not what we want. By wrapping the call to lbp.initialize() in a function, we preserve the context of this within that function and we can make sure that it always points to lbp. Check out this for a more complete explanation.

Answer 4

In the original code where you are trying to use lbp in a function. You are passing lbp in as an argument. This would hide the lbp from the global scope with a local (to the function) variable of the same name (unless when calling the function you passed lbp in again).

//this is what you have and will not alert a thing other
//and will probably throw an error
function(lbp) { alert(lbp.defaults.minLength; }
//should just be this with no argument. this will allow
//the function to see lbp in the global scope.
function() {  alert(lbp.defaults.minLength; }

by passing lbp as a parameter in the first function it is not seen inside the function as the global object, but the local argument.