Is it possible to invoke this JavaScript function like this?

Question

Is it possible to invoke this JavaScript function like this?

Is there a way to call a function like item_edit.say hello by passing it as a string on the window object (similar to the last line in the snippet below)?

var arc={ view: { item_edit: {} } };

arc.view.item_edit={
  say_hello: function(){
    alert('hello there');
  }

}

var f_name='say_hello';
var g_name='item_edit.say_hello';

var str=window.arc.view.item_edit[f_name]();  // <- this works
var str2=window.arc.view[g_name]();  // <- this is what I'm interested in; currently doesn't work

Do you have any suggestions on how to make this work?

Thank you in advance.

Update #1: I should mention that I probably don't want to use eval, although upon further consideration, it may actually be the most sensible approach (and is, in fact, what eval was designed for).

javascript

Answer 1

Answer №1

Yes, the Google closure library implements a similar functionality in its goog.provide method when not undergoing optimization by the compiler.

function getPropertyValue(obj, key) {
  var keys = key ? key.split('.') : [];
  var index, length = keys.length;
  for (index = 0; index < length - 1; ++index) {
    obj = obj[keys[index]];
  }
  var property = index < length ? obj[keys[index]] : obj;
  return property.apply(obj);
}

Additionally, on browsers where the Date.now function returns the current timestamp,

getPropertyValue(window, 'Date.now', [])

This will retrieve and return the current timestamp.

Answer 2

Yes, the Google closure library implements a similar functionality in its goog.provide method when not undergoing optimization by the compiler.

function getPropertyValue(obj, key) {
  var keys = key ? key.split('.') : [];
  var index, length = keys.length;
  for (index = 0; index < length - 1; ++index) {
    obj = obj[keys[index]];
  }
  var property = index < length ? obj[keys[index]] : obj;
  return property.apply(obj);
}

Additionally, on browsers where the Date.now function returns the current timestamp,

getPropertyValue(window, 'Date.now', [])

This will retrieve and return the current timestamp.

Answer 3

Answer №2

Here is a solution utilizing the .reduce() method.

var str2 = g_name.split('.').reduce(function(obj, key) {
    return obj[key];
}, window.arc.view);

To ensure compatibility with older browsers and add safety measures, some shim might be necessary.

If you find yourself performing this task frequently, consider adding the function to your library for future reuse.

function keyToObj(obj, key) {
    return obj[key];
}

You can then use it in this way:

var str2 = g_name.split('.').reduce(keyToObj, window.arc.view);

@MikeSamuel highlighted an issue regarding the context (this value) when using this method.

To address this, a specialized version tailored for method invocations could be created.

function keyToMethod(obj, key, i, arr) {
    return i === arr.length - 1 && typeof obj[key] === "function"
                              ? function() {
                                    return obj[key].apply(obj, arguments);
                                }
                              : obj[key];
}

This updated function returns a new function that executes the method from the correct object.

var str2 = g_name.split('.').reduce(keyToMethod, window.arc.view)();

Further enhancements could involve checking if the default this value is being used by the returned function and utilizing the provided value if not.

Answer 4

Here is a solution utilizing the .reduce() method.

var str2 = g_name.split('.').reduce(function(obj, key) {
    return obj[key];
}, window.arc.view);

To ensure compatibility with older browsers and add safety measures, some shim might be necessary.

If you find yourself performing this task frequently, consider adding the function to your library for future reuse.

function keyToObj(obj, key) {
    return obj[key];
}

You can then use it in this way:

var str2 = g_name.split('.').reduce(keyToObj, window.arc.view);

@MikeSamuel highlighted an issue regarding the context (this value) when using this method.

To address this, a specialized version tailored for method invocations could be created.

function keyToMethod(obj, key, i, arr) {
    return i === arr.length - 1 && typeof obj[key] === "function"
                              ? function() {
                                    return obj[key].apply(obj, arguments);
                                }
                              : obj[key];
}

This updated function returns a new function that executes the method from the correct object.

var str2 = g_name.split('.').reduce(keyToMethod, window.arc.view)();

Further enhancements could involve checking if the default this value is being used by the returned function and utilizing the provided value if not.

Answer 5

Answer №3

What do you think of the following:

let variableTwo = eval('window.arc.display.' + g_name + '()');

Answer 6

What do you think of the following:

let variableTwo = eval('window.arc.display.' + g_name + '()');

Is it possible to invoke this JavaScript function like this?

Answer №1

Answer №2

Answer №3

Similar questions

jQuery ajax issue: Unable to locate file using relative path

Attempting to display a collection of 16 diverse images by utilizing the Math.random function in conjunction with a

Using Multer: Specifying multiple destinations with the destination property

Ionic 2's Navigation Feature Failing to Function

The GIF Loader fails to animate while an AJAX request is in progress

How to prevent the parent element from scrolling when changing the value of a number input by scrolling

Capture any clicks that fall outside of the specified set

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

A guide to JavaScript: Fetching and Parsing JSON Data from an API

Learn how to send dynamic data to another HTML element using Ajax's success function

The tooltip being displayed is plain and lacks any design elements

The code in check.js causes a square of dots to emerge on the screen in Skype

What is the proper way to send an AJAX request with the data type set to

Eslint is not functioning properly on the local machine

When implementing asynchronous form control validation in Angular 2, several API requests are triggered

Module specifiers that are considered relative must always commence with either "./", "../", or just "/"

Navigating through the realm of Android development entails understanding how to manage a multi-object function in JavaScript when using

Can studying Titanium Appcelerator enhance my comprehension of NodeJS?

Can Angular i18n facilitate language switching?

What is the best way to store a personalized configuration for a user within a Node module?