What are the purpose of default arguments in JavaScript IIFE from a TypeScript module?

Question

If I create a simple TypeScript module named test it would look like the following:

module test
{
    export class MyTest {
        name = "hello";
    }
}

The resulting JavaScript creates an IIFE that looks like the following:

var test;
(function (test) {
    var MyTest = (function () {
        function MyTest() {
            this.name = "hello";
        }
        return MyTest;
    })();
    test.MyTest = MyTest;
})(test || (test = {}));

What I can't understand are what is the purpose of the following line at the end of the IIFE that contains arguments for the function:

(test || (test = {}));

The resulting function also takes in the parameter test:

(function (test) {

I understood when using the arguments to pass in say a 'jQuery object like })(jquery); and the resulting function could take the alias like (function ($) {. However I just am not seeing the purpose of the (test || (test = {})); arguments.

I understand that test.MyTest = MyTest; is exposing the public method MyTest, but why (test || (test = {})); and how do those arguments work?

Answer 1

It a method of extending an already existing object, or initially defining it if it is not already defined. Let's break it down.

var test;

This line declares the variable test so that when used later, it will not throw an ReferenceError. It's value will either be undefined, or whatever value test already has.

(test || (test = {}))

This section passes the value of test if test is truthy (i.e. not undefined), or assigns test to a new object, and passes that object to the function. This way, each file that uses this code can extend a common namespace object, rather than overwriting the namespace.

Answer 2

To expand on what others have said and to answer some of your other inline questions:

By "open-ended", they are referring to the ability to continue to add members to the object at a later point. If you could only create & extend an object within a single source file, then we could guarantee the order of initialization and make the code much simpler, however you could have the below code in script1.ts and script2.ts, and include them in a page in any order, so we can't know whether M1 has been initialized or not when the script runs.

script1.ts

module M1 {
    export module M2 {
        export function F1(){return 42;}
    }
}

script2.ts

module M1 {
    export module M2 {
        export function F2(){return "test";}
    }
}

While redeclaring a variable is unattractive, it is harmless (see http://es5.github.io/#x10.5). The value until initialized is 'undefined', which means the second part of the expression "M1 || (M1 = {})" is evaluated and returned, and the newly initialized object is passed as the argument the first time this is hit, else the existing value at the start of the expression is passed as the argument for subsequent declarations.

I deliberately used nested modules in my example to show this doesn't just apply to variables, but to properties of objects also. The code generated for the "script1" file above (and similar for "script2") is:

script1.js

var M1;
(function (M1) {
    var M2;
    (function (M2) {
        function F1() {
            return 42;
        }
        M2.F1 = F1;
    })(M2 = M1.M2 || (M1.M2 = {}));
})(M1 || (M1 = {}));

Here the nested module M2 is provided as the argument to the immediate function as "M1.M2 || (M1.M2 = {}", which again, provides the existing value of M1.M2 if it exists, else initializes it to an empty object and then provides this. This object property, which represents module M1.M2, is referenced by the parameter M2 inside the nested function which then adds more members (its exports) onto it.

I hope this helps clarify.

Answer 3

It allows you to make modules open ended. e.g.

(function (test) {
    var MyTest = (function () {
        function MyTest() {
            this.name = "hello";
        }
        return MyTest;
    })();
    test.MyTest = MyTest;
})(test || (test = {}));


(function (test) {
    var SecondTest = (function () {
        function SecondTest() {
            this.name = "hello";
        }
        return SecondTest;
    })();
    test.SecondTest= SecondTest;
})(test || (test = {}));

First time test will be undefined and thus gets assigned {}. Next time it is already defined and that is what we extend with SecondTest

Answer 4

Does this help?

var test;

function IIFE(test) {
    var MyTest = (function () {
        function MyTest() {
            this.name = "hello";
        }
        return MyTest;
    })();
    test.MyTest = MyTest;
}

test = test || {}
IIFE(test);

Since var test gets pulled to the top and does not "unassign" or override any existing test, if test is defined in the same scope as the IIFE it will be used instead of the empty object.