Executing a function on the window object in JavaScript

Question

Executing a function on the window object in JavaScript

I have come across the following code and am seeking guidance on how to get the last line to function correctly. The API I am using currently employs _view appended as its namespacing convention, but I would prefer to switch to something like arc.view.$function_name. Thank you!

var arc={};
arc.view={
  say_hello: function(){
    alert("I want to say hello");
  }
}
function say_goodbye(){
  alert("goodbye to you");
}

arc.view.say_hello(); // works
window['say_goodbye'](); // works
// Is it possible to make this work?
window['arc.view.say_hello']();

javascript jquery

Answer 1

Answer №1

window['arc']['view']['greet_person']();

alternatively

window.arc.view.greet_person()

or

window['arc'].view['greet_person']()

You can use either the dot syntax or bracket syntax to achieve the same result. Dot syntax is simply a shorthand version of using brackets for property lookup, so all three examples above are equivalent. The bracket syntax should be used when the property name is dynamic or would cause issues with the dot syntax. For example:

var dynamicMethodName = someObject.getMethodName();
someOtherObject[dynamicMethodName]();

or

someOtherObject["a key string with spaces and {special characters}"]();

Answer 2

window['arc']['view']['greet_person']();

alternatively

window.arc.view.greet_person()

or

window['arc'].view['greet_person']()

You can use either the dot syntax or bracket syntax to achieve the same result. Dot syntax is simply a shorthand version of using brackets for property lookup, so all three examples above are equivalent. The bracket syntax should be used when the property name is dynamic or would cause issues with the dot syntax. For example:

var dynamicMethodName = someObject.getMethodName();
someOtherObject[dynamicMethodName]();

or

someOtherObject["a key string with spaces and {special characters}"]();

Answer 3

Answer №2

Give this a shot:

jsFiddle link

window["arc"]["view"]["say_hello"]();

Answer 4

Give this a shot:

jsFiddle link

window["arc"]["view"]["say_hello"]();

Answer 5

Answer №3

When utilizing the square bracket notation, you are essentially calling a function within the window object named arc.view.say_hello, instead of a function within the "view" property of the object "arc". To clarify:

window["arc.view.say_hello"] = function () { alert("hi") };

window["arc.view.say_hello"](); // "hi"

If you intend to invoke a function as described, you must unravel the chain of objects. One approach is to create a utility function for this purpose. For instance:

var arc={};
arc.view={
  say_hello: function(){
    alert("I want to say hello");
  }
}
function say_goodbye(){
  alert("goodbye to you");
}

function call(id) {
    var objects = id.split(".");
    var obj = this;

    for (var i = 0, len = objects.length; i < len && obj; i++)
        obj = obj[objects[i]];

    if (typeof obj === "function")
        obj();
}

call("say_goodbye");
call("arc.view.say_hello");

The utility function can be extended to utilize arguments or simply return a reference to the function.

Answer 6

When utilizing the square bracket notation, you are essentially calling a function within the window object named arc.view.say_hello, instead of a function within the "view" property of the object "arc". To clarify:

window["arc.view.say_hello"] = function () { alert("hi") };

window["arc.view.say_hello"](); // "hi"

If you intend to invoke a function as described, you must unravel the chain of objects. One approach is to create a utility function for this purpose. For instance:

var arc={};
arc.view={
  say_hello: function(){
    alert("I want to say hello");
  }
}
function say_goodbye(){
  alert("goodbye to you");
}

function call(id) {
    var objects = id.split(".");
    var obj = this;

    for (var i = 0, len = objects.length; i < len && obj; i++)
        obj = obj[objects[i]];

    if (typeof obj === "function")
        obj();
}

call("say_goodbye");
call("arc.view.say_hello");

The utility function can be extended to utilize arguments or simply return a reference to the function.

Executing a function on the window object in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

How can I reduce the burden of dependencies on users with a pre-built NPM package?

I need to find a way to transfer user input data from the frontend to ExpressJS in order to make an API call using an endpoint

Error: The iOS 14.2 system is unable to locate the variable "webkit."

The problem arises when trying to use the Jquery click event on buttons that have been generated

Looking to extract data from a Json object and add it into a table

Tips for resolving Vue.js static asset URLs in a production environment

JS implementing a listener to modify a Google Map from a separate class

Is passportjs responsible for managing user registration?

What is the best way to include a file attachment using a relative path in Nodemailer?

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

Can dates in the form of a String array be transmitted from the server to the client?

Attempting to grasp the sequence in which setTimeout is ordered alongside Promise awaits

Ways to conceal the picture

Incorporating server-side rendered components into a Vue.js parent component

axios: prevent automatic sorting of objects according to keys

Next.js API Endpoint Call Resulting in Empty Object Returned by Fetch Function

fluctuating random percentage in JavaScript/jQuery

`I'm encountering issues when trying to pass an array through localStorage into a new array`

Oops! It seems like there's a problem with reading the 'strEmail' property of undefined. Do you have any ideas on how to fix this issue

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's