0

I am currently debugging some code right now but I cant get myself around this concept in javascript.

I have this code construct.
if(!COMPANY)
    COMPANY = {};

COMPANY.Billing = (function(COMPANY){
    //More code
})(COMPANY);

As, i understand, it creates an object called "COMPANY" and then adds a new property called "Billing" but I dont understand the idea of passing the same "COMPANY" into the arguments of the function and at the same time renaming it to "COMPANY" again. What I mean is what is the difference between the code above and the code below.

COMPANY.Billing = (function(COMPANY){
    //More code
})();

My javascript is not that deep so I would like to understand what the code construct above means. This might be some javascript design pattern but I dont know what it is

Mark Estrada
  • 9,013
  • 37
  • 119
  • 186
  • 1
    Try reading [this question](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1) on How Closures Work. It might help you. – Danilo Valente Jul 22 '14 at 04:19
  • You just made COMPANY undefined inside that function. – epascarello Jul 22 '14 at 04:21
  • The difference is in the second code block you are not passing anything to the anonymous function. It will change the inner code behavior. – S. A. Jul 22 '14 at 04:22

1 Answers1

1

It isn't renaming COMPANY; it's using it. Annotated version of your code:

if(!COMPANY)            // if COMPANY doesn't exist...
    COMPANY = {};       // initialize it to a blank object

COMPANY.Billing =       // initialize a property
    (function(COMPANY){ // this defines a function
        //More code
    })(COMPANY);        // this executes the function with COMPANY as the parameter
// COMPANY.Billing now contains the result of executing the anonymous function

This is called a closure. Example: 

foo = (function(x) {
    return ++x;
})(4);

This defines a function, then executes with parameter x = 4. So, it returns ++x, which is 5. Therefore, foo is assigned the value 5.

When you do this:

COMPANY.Billing = (function(COMPANY){
    //More code
})();

You are defining a closure and executing it, but you are passing nothing as a parameter. So, COMPANY is undefined inside the closure.

elixenide
  • 44,308
  • 16
  • 74
  • 100
  • Oh wow...that fast..so in my first case, the same object that I have declared above is passed as argument to the anonymous function? I wonder why you need to do this, as I have been reading, the COMPANY variable is global in scope so why not access it directly inside the anonymous function? Sorry if my question might be vague but I just want to understand further. Your post answers some of my doubts. Thanks. – Mark Estrada Jul 22 '14 at 04:30
  • 2
    There is a variable `COMPANY` that is global in scope, but naming your parameter `COMPANY` is as though you have `var COMPANY` inside the function. To reuse my example above, say you have `x=6; foo = (function(x) { return ++x; })();` Then `foo` is `NaN`, because the global `x` and the `x` used in the closure are different. – elixenide Jul 22 '14 at 04:32
  • Oh thank you very much. I think I got my much needed headstart to debug these files of javascript. Your explanation really really helps me understand the concept. More power to you! – Mark Estrada Jul 22 '14 at 04:49