CODEWITHSUNDEEP
javascriptscopeclosures
bflemi3
bflemi3

Reputation: 6790

Understanding javascript functions, scope and closures

Can someone explain in detail what this snippet of js does?

(function (window) {
    var test = window['test'] = {};
    test.utils = new(function(){ ... })();
})(window);

I understand that the function is not globally scoped. I understand that it is creating a variable called test that points to a property in the window object that is an empty object. I also understand that utils is a property of test.

I don't understand what the purpose of the last part is (window); or why the utils function is being designated as new.

Please explain.

Upvotes: 3

Views: 162

Answers (4)

Matías Fidemraizer
Matías Fidemraizer

Reputation: 64943

First of all, this is a self-invoked function.

It's invoked itself giving the window object as function input argument in order to ensure that, inside the whole function, window will have the expected meaning. 

test.utils = new(function(){ ... })(); <--- This is an object constructor.

When the function is called using the new operator, it turns into an object constructor.

For example:

var conztructor = function() {
   this.name = "Matias";
};

var obj = new conztructor();
alert(obj.name); // <--- This will alert "Matias"!

The purpose of (window); is creating a new variable and reference holding the JavaScript Window object instance, avoiding that other libraries may reuse the window (or any other) identifier and your own library may break because of this situation.

This is nice in order to avoid altering global scope identifiers that may be used by other libraries.

UPDATE

In response to some comments, run this code:

http://jsfiddle.net/wChh6/5/

Upvotes: 1

sdespont
sdespont

Reputation: 14025

When you define a function with last parentetheses, the function is executed itself after loading with the parameter given, in your case window

(function (window) {
    var test = window['test'] = {};
    test.utils = new(function(){ ... })();
})(window);

JS function definition : meaning of the last parentheses

Upvotes: 0

Justin Ethier
Justin Ethier

Reputation: 134255

What is happening here is that a new anonymous function is being declared. The last part with (window) makes a call to that function, passing window as a parameter.

Inside, the call to test.utils = new(function(){ ... })(); creates a new object (with contents defined by the function passed to new) and assigns it to test.utils.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075625

It creates a function and calls it immediately, passing in window. The function receives an argument called window and then creates an empty object on it which is available both as a property on window called test and as a local variable called test. Then it creates an object by calling a function via new and assigns that object to test.utils.

I don't understand what the purpose of the last part is (window);...

It doesn't really serve any purpose in the code you've quoted, because the symbol passed into the main (outer) function, window, is the same as the name of the argument receiving it. If their names were different, then it would serve a purpose, e.g.:

(function(wnd) {
})(window);

That would make window available within the function as wnd.

or why the utils function is being designated as new.

utils won't be a function (at least, not unless the code you've replaced with ... is doing something really strange), it will be an object created by calling that function.

The whole thing could be rewritten more clearly:

(function(window) {

    var test;

    test = {};
    window['test'] = test;

    test.utils = new NiftyThing();

    function NiftyThing() {
    }

})(window);

That still does the window thing for no reason, but hopefully it makes it clear what the new(function() { ... })(); bit was doing.

Upvotes: 2

Related Questions