Creating an object with a unique string identifier in JavaScript

Question

Creating an object with a unique string identifier in JavaScript

In the client, I have declared a namespace and various classes within different namespaces. The challenge arises when I receive a string from the server upon page load containing "dotted" namespace.class names, and I need to obtain an instance of one of these classes.

Currently, my approach involves using eval for this purpose. However, I have noticed that it leads to memory leaks. Hence, I am exploring alternative methods to instantiate a declared object based solely on its name. Simply attempting something like

var obj = "myNamespace.myObjectName"();

does not yield the desired result.

If I have an object name stored as a string variable, I can utilize the eval() function to generate an instance of that object:

window["myNamespace"] = {};
myNamespace.myObjectName = function() { /* blah */ };

var name = "myNamespace.myObjectName";
var obj = eval("new "  + name + "()");

However, due to various reasons, I prefer not to use eval. Is there a way to create an object by its name without resorting to eval?

javascript

Answer 1

Answer №1

It seems like the name variable's content is out of your control, meaning you're stuck with the inclusion of the . in the string.

One way to handle this situation is by using .split() to break down the string into its individual parts and then utilizing .reduce() to navigate through the base object.

window["myNamespace"] = {};
myNamespace.myObjectName = function() {
  this.foo = "bar"
};

var name = "myNamespace.myObjectName";
var obj = newObjectFromStringPath(name);


document.querySelector("pre").textContent = JSON.stringify(obj, null, 4);


function newObjectFromStringPath(path, base) {
  return new (name.split(".").reduce(function(obj, name) {
    return obj != null ? obj[name] : null
}, base || window))
}

<pre></pre>

The implementation of newObjectFromStringPath is tailored to target a function specifically and invoke it as a constructor. To adapt it for fetching any value, you can simply eliminate the new keyword within that function.

Answer 2

It seems like the name variable's content is out of your control, meaning you're stuck with the inclusion of the . in the string.

One way to handle this situation is by using .split() to break down the string into its individual parts and then utilizing .reduce() to navigate through the base object.

window["myNamespace"] = {};
myNamespace.myObjectName = function() {
  this.foo = "bar"
};

var name = "myNamespace.myObjectName";
var obj = newObjectFromStringPath(name);


document.querySelector("pre").textContent = JSON.stringify(obj, null, 4);


function newObjectFromStringPath(path, base) {
  return new (name.split(".").reduce(function(obj, name) {
    return obj != null ? obj[name] : null
}, base || window))
}

<pre></pre>

The implementation of newObjectFromStringPath is tailored to target a function specifically and invoke it as a constructor. To adapt it for fetching any value, you can simply eliminate the new keyword within that function.

Creating an object with a unique string identifier in JavaScript

Answer №1

Similar questions

Adjusting map boundaries to match the raster layer dimensions

Sending Live Data from Frontend JavaScript to Django/Python Backend

Exploring iPhone Safari Web App: Discovering functions tailored for iPhone users

Using Next.js to store the authentication token in memory and the refresh token in an HTTP-only cookie

What is the best way to eliminate elements from an array depending on whether their index is odd or even?

Tips for Troubleshooting TypeScript Code in Chrome Instead of JavaScript Code?

What is the best way to style nodes in a Force Directed Graph using CSS in D3?

Keep the true number hidden in the JavaScript array

What is the reason for the inability to access a global variable type variable outside of the $.each function when used within the $

I am facing an issue with updating the state dynamically within a useState object

An error occurred when trying to reopen a BrowserWindow after clicking a button in Electron, resulting in the destruction

What are the implications of utilizing a query string in a POST request?

Is the code for uploading multiple images not functioning as expected?

Response from the Facebook API regarding group information

Determining element visibility in React

Updating variable values using buttons in PHP and Javascript

Encountered an error while attempting to execute the command npx create react app: spawn UNKNOWN error occurred

Transitioning from bootstrap 3 to 5 results in an increase in all sizes across the board

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Can someone help me figure out the issue with my Angularjs ng-repeat implementation?