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

What is the best way to reset a dropdown list value in angular?

Customizing the styling of a TextField component in ReactJS using material-ui

Implementing a 'Load More' button for a list in Vue.js

steps for linking a directive variable to a controller

What is the best way to invoke an API two times, passing different parameters each time, and then merge both responses into a single JSON object using a callback function?

Combining Rails 4 with coffeescript while encountering an issue with the jQuery sortable detatch functionality

Using Express to Deliver Static Content to Subdirectories

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

Show or hide the expand/collapse button based on the height of the container

Searching for specific data within an embedded documents array in MongoDB using ID

What is the best way to retrieve and parse XML using node.js?

Next.js encountered a Runtime Error: Trying to access properties of undefined (specifically 'status') and failing

Japanese Character File Naming Convention

Unable to retrieve variable using the require statement

Generate a compressed file from a readable source, insert a new document, and transfer the output

Issues with jQuery chaining and toggle not executing as expected

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Should I use React with Spring Boot or just Spring Boot for this project?

The ng-model failed to display the updated value until a click was made somewhere on the page

Transfer information to an ExpressJS server in order to display a fresh view