passing parameter to closure function in javascript

Question

MyLibrary.MyModule =
        (
            function initialise() {
                this.id = id;
                this.c = document.getElementById(id);
                this.ctx = this.c.getContext('2d');

                this.properties = {
                    setup: {
                        backgroundColour: options.setup.backgroundColour || 'black'
                    },

                    scale: {
                        show: options.scale.show || true,
                        colour: options.scale.color || 'white'
                    },
                }
                console.log(properties.setup.baseFontSize);
            }
        )(id, options);

I'm calling this code using

new MyLibrary.MyModule('c',options);

but the 'id' and options seems to be not defined.
can someone help?

Answer 1

Your MyLibrary.MyModule itself is undefined. This is because you're invoking an anonymous function with no return value to assign to it.

I assume you meant to do this instead:

MyLibrary.MyModule = function initialise(id, options) {
            this.id = id;
            this.c = document.getElementById(id);
            this.ctx = this.c.getContext('2d');

            this.properties = {
                setup: {
                    backgroundColour: options.setup.backgroundColour || 'black'
                },

                scale: {
                    show: options.scale.show || true,
                    colour: options.scale.color || 'white'
                },
            }
            console.log(properties.setup.baseFontSize);
        };

Now you can do:

var inst = new MyLibrary.MyModule('c',options);

...and the 'c' and options will be received as arguments to the constructor.

If your purpose for the immediately invoked function expression was to close around some default value that the constructor could reference, then the IIFE would need to return a function that references that value.

Answer 2

As written, I don't think that's going to do anything like what you want. You're initializing "MyLibrary.MyModule" to be basically nothing; there's no return value from that "initialize" function, and you're calling it as if it did have one.

I can't tell what you're trying to do, but:

MyLibrary.MyModule = (function whatever() { /* ... */ })(id, options);

means, "call the function whatever with an argument list consisting of the values of variable "id" and variable "options", and then set the property "MyModule" on the object referred to by "MyLibrary" to whatever value is returned from that function call."

When the smoke clears, "MyLibrary.MyModule" won't be a function, as far as I can tell. Perhaps if you explain what you want it to mean, then someone can help fix it.

Answer 3

You want something like this:

MyLibrary.MyModule = function(id, options) {
    this.id = id;
    this.c = document.getElementById(id);
    this.ctx = this.c.getContext('2d');

    this.properties = {
        setup: {
            backgroundColour: options.setup.backgroundColour || 'black'
        },

        scale: {
            show: options.scale.show || true,
            colour: options.scale.color || 'white'
        },
    }
};