Calling a private/nested javascript function from an outer scope

Question

I have my javascript code like this . Inside that I have an init() function and in that function I have an options JSON object and in that object I have a function defined as objectselected(). How I call that function in a button click event

I have tried like this WorkFlow.init().options.Objectselected() but it is not working,

var WorkFlow = {
connectionData: [],
    selectedTouchpoints: [],
    init: function () {
        var options = {
            palleteId: "myPaletteElement",
            elementId: "playAreaContainer",
            TextStoreList: ['One', 'Two', 'Three'],
            LinkTextStoreList: $('#drpLinkType option').map(function () {
                return this.text;
            }).get(),
            shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
            diagramUpdate: function (e) {

            },
            objectSelected: function (e) {
            },

            linkUpdate: function (e) {

            },
            initialize: function () {

                }



        myGraph = new Graph(options);
        options.initialize();
    },
}

How to call that function.

Answer 1

You need to return options as it is inside init function's scope

var WorkFlow = {
    connectionData: [],
        selectedTouchpoints: [],
        init: function () {
            var options = {
                palleteId: "myPaletteElement",
                elementId: "playAreaContainer",
                TextStoreList: ['One', 'Two', 'Three'],
                LinkTextStoreList: $('#drpLinkType option').map(function () {
                    return this.text;
                }).get(),
                shapeList: ['RoundedRectangle', 'Circle', 'Rectangle', 'Ellipse', 'Square', 'Diamond', 'Card', 'Database'],
                diagramUpdate: function (e) {

                },
                objectSelected: function (e) {
                },

                linkUpdate: function (e) {

                },
                initialize: function () {

                }

            myGraph = new Graph(options);
            options.initialize();
            return options;
        },
    }

And call it as WorkFlow.init().objectSelected();

Answer 2

One way around is you can return options and than call it.

init: function () {
        var options = {
            ...your code..}
        return options;
    },

and call it than

var options = WorkFlow.init();
options.Objectselected();

Answer 3

Building on Patrick's comment, you'd need to return options from the init function:

var WorkFlow = {
connectionData: [],
    selectedTouchpoints: [],
    init: function () {
        var options = {
            palleteId: "myPaletteElement",

            ...    

        options.initialize();
        return options;            
    },
}

Answer 4

As it stands, you have no access to options because it's a local variable - that is, local to its scope.

To access its contents, you'll need to return it from init() .

Think about it:

WorkFlow.init()

Currently this returns undefined , because your init() returns nothing. You're trying to chain like in jQuery, but that relies on the API always returning the instance. Your path finds a dead-end at init() .

To fix this, have init() return options - or at least the part of it you want to access from outside - an "export".

So (basic example)

init: function() {
    var options {
        my_func: function() { }, //<-- we want outside access to this
        private: 'blah' //<-- this can stay private - leave it out of the export
    }
    //return an export, exposing only what we need to
    return {
        my_func: options.my_func
    }
}