Can an internal/private function call a public function?

Question

Can an internal/private function call a public function?

Just wondering if I'm missing something here, as I tried the following:

(function() {
    var thing = function() {
        var doIt = function() {
            console.log("just do it");
            this.updateValue(5);
        };

        return {
            updateValue: function(val) {
                console.log('updating value: ' + val);
            },

            go: function() {
                doIt();
            }
        }
    };

    var t = thing();
    t.go();
}())

After running this code, "just do it" appears in the console followed by an error stating that "updateValue" is not a function.

I was pondering, can an internal/private function (like "doIt") call a public function (such as "updateValue")? It could be seen as poor design, and I have restructured my code to avoid doing so. Nonetheless, I am intrigued as to whether it is feasible.

Thanks for your assistance.

javascript

Answer 1

Answer №1

To explicitly specify the context for this, you can either use call/apply as suggested by @SLaks and @Alnitak, or define the function at the beginning and then add it as a property to the returned object:

var thing = function() {
    var updateValue = function () { /* */ },
        doIt = function() {
            console.log("just do it");
            updateValue(5);
    };

    return {
        updateValue: updateValue, // some duplication here
        go: function() {
            doIt();
        }
    };
};

If you find the duplication bothersome, another approach is to do this:

var thing = function() {
    var exposed = {
        updateValue: function(val) {
            console.log('updating value: ' + val);
        },
        go: function() {
            doIt();
        }
    }, doIt = function() {
        console.log("just do it");
        exposed.updateValue(5);
    };

    return exposed;
};

Answer 2

To explicitly specify the context for this, you can either use call/apply as suggested by @SLaks and @Alnitak, or define the function at the beginning and then add it as a property to the returned object:

var thing = function() {
    var updateValue = function () { /* */ },
        doIt = function() {
            console.log("just do it");
            updateValue(5);
    };

    return {
        updateValue: updateValue, // some duplication here
        go: function() {
            doIt();
        }
    };
};

If you find the duplication bothersome, another approach is to do this:

var thing = function() {
    var exposed = {
        updateValue: function(val) {
            console.log('updating value: ' + val);
        },
        go: function() {
            doIt();
        }
    }, doIt = function() {
        console.log("just do it");
        exposed.updateValue(5);
    };

    return exposed;
};

Answer 3

Answer №2

When you write doIt(), the function is executed in the global context, making this refer to the window object.

To ensure that your custom value for this is used as the context for the function doIt, you should use doIt.call(this).

Answer 4

When you write doIt(), the function is executed in the global context, making this refer to the window object.

To ensure that your custom value for this is used as the context for the function doIt, you should use doIt.call(this).

Answer 5

Answer №3

According to the response from @SLaks, invoking this using doIt() is not correct.

Instead of that, you should attempt:

doIt.call(this);

Answer 6

According to the response from @SLaks, invoking this using doIt() is not correct.

Instead of that, you should attempt:

doIt.call(this);

Can an internal/private function call a public function?

Answer №1

Answer №2

Answer №3

Similar questions

Adding a dynamic style programmatically to an element created using createElement in Vue: A guide

Tips for identifying when v8 heap utilization in Node.js is nearing its limit

Is it possible to dispatch actions from getters in Vuex?

Using React Higher Order Components with several different components

Using Knex.js to perform a case-insensitive search on an object with the whereIL

The reduce function is displaying an undefined result

Generate a JSON structure from HTML with the help of jQuery

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Unable to adjust image opacity using jQuery

The function correctly identifies the image source without error

Update the referenced lists in ng-admin

A guide to removing functions from the render method

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

Exploring the Depths of Multidimensional JSON Arrays in PHP

How can data be shared between two functional child components in a React application?

Steps to refresh a .ejs page with updated information following an ajax request

Customizing the DatePicker with a unique button in material-ui

Troubleshooting React and Material-UI: Adjusting <slider> component for use with personalized data

Periodically transmit information to a Google Script web application

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of