Let's say I have an object obj with a function f1 that accept two parameters a and b. The function is called as follows:
obj.f1(a,b);
Now I want to make f1 accessible without calling obj as follows:
f1(a,b);
Is this possible? If so, how may I achieve this?
Edit: If yes, is there a way to make all functions in the object global without knowing the specific functions?
While its not the best idea to do this, you can add properties to the global window object (if running this in the browser, if you're using node, then you can refer to global - here I'm using globalThis so this works in both environments), and then call these without needing to prefix obj. Adding properties to window (ie: globalThis) isn't a good idea usually because you can end up overwriting pre-existing properties on the window. With that being said, here is how you may go about it:
const obj = {x: 1, y: function() {
console.log("hello");
}}
Object.entries(obj).forEach(([key, val]) => {
if(typeof val === "function")
globalThis[key] = val;
});
y();Keep in mind, if your object's methods refer to this, then when calling your method the this will get bound to the global object (ie: window), or, if you're running this in strict mode, then it will be undefined.
Here are some examples of some of the caveats mentioned above:
Modifying pre-existing properties: The window object has some pre-existing properties. One such property is the name property, which JS enforces to be a string. This means that if you have a method called name in your object, it will be converted to a string once it gets added to the window:
const obj = {x: 1, name: function() {
console.log("hello");
}}
Object.entries(obj).forEach(([key, val]) => {
if(typeof val === "function")
globalThis[key] = val;
});
console.log(typeof name); // string
name(); // Crash: "Uncaught TypeError: name is not a function"Losing the this inside your method: If your method refers to this, then you can expect your method to no longer work, as it loses its this binding:
const obj = {x: 1, y: function() {
console.log(this.x); // undefined (as `this` now refers to window)
}, z: function() {
'use strict';
console.log(this.x); // Crashes, because this is undefined when in strict-mode
}}
Object.entries(obj).forEach(([key, val]) => {
if(typeof val === "function")
globalThis[key] = val;
});
y(); // undefined
z(); // "Uncaught TypeError: Cannot read property 'x' of undefined"To help rectify the above issues with this, you can consider binding your method as you assign it to the window so its context is predefined:
const obj = {x: 1, y: function() {
console.log(this.x); // this is bound to `obj` (via the .bind() method)
}, z: function() {
'use strict';
console.log(this.x); // this is bound to `obj` (via the .bind() method)
}}
Object.entries(obj).forEach(([key, val]) => {
if(typeof val === "function")
globalThis[key] = val.bind(obj);
});
y(); // 1
z(); // 1You can destructure the properties of an object like this:
const someObject = {
f1: (a, b) => a + b,
f2: (a, b) => a * b,
defaultParams: [1, 1],
}
const {f1, f2, defaultParams} = someObject;
console.log(f1(defaultParams[0], 15) * f2(...defaultParams));Or retrieve the entries from an Object and assign them to a global scope (here window, which is not advisable).
const someObject = {
f1: (a, b) => a + b,
f2: (a, b) => a * b,
defaultParams: [1, 1],
}
Object.entries(someObject).forEach( ([key, entry]) => window[key] = entry );
console.log(f1(defaultParams[0], 15) * f2(...defaultParams));You can create an anonymous scope. In the next snippet this should be bound to the Object, so the methods are wrapped using [function].apply. Furthermore an alternative way of destructuring is used.
// this syntax creates an anonymous scope
// so f1/f2/defaultParams are *not* window properties
(() => {
const someObject = {
b: 42,
f1(a) { return a + this.b; },
f2(a) { return a * this.b; },
defaultParams: [1, 1],
}
// another way of destructuring ...
const [f1, f2, defaultParams] = [
(...params) => someObject.f1.apply(someObject, params),
(...params) => someObject.f2.apply(someObject, params),
someObject.defaultParams,
];
// or use the shorter *bind* syntax, e.g.
const f3 = someObject.f1.bind(someObject);
console.log(f1(defaultParams[0]), f2(2));
console.log(f3(defaultParams[0]));
// still NOT advisable, but coming to think of it ...
window.f2FromWithin = someObject.f2.bind(someObject);
})();
console.log(f2FromWithin(42));This is using two 'deprecated' commands: with and eval :)
// assuming this is in the node.js
with (obj) {
for (i in obj) {
eval('global.'+i+'='+i);
}
}
const f1 = obj.f1and then call it later usingf1(a, b)? this is assuming thatf1doesn't rely onthisglobalandwindowobjects dependening on your env, you could just loop over your object and copy all entries of type function intoglobalorwindow