tl;dr:
I am looking to modify the appearance of a function, specifically in how it is displayed when using `console.log` in browsers like Firefox or Chrome. My goal is to alter the arguments and name that are shown, as well as adjust properties such as `.length` and `.name`. Is this achievable?
The longer version :
I aim to replicate and customize the behavior of a specific function by injecting additional instructions before and after its execution. Below is an example of my code:
function customizeFunction(funcToCustomize) {
return function(...args) {
// Additional instructions, for instance:
console.log('Calling', funcToCustomize.name);
// The actual function execution
let returnValue = funcToCustomize.call(this, ...args);
// Or simply funcToCustomize(...args) if preferred
// Instructions upon completion of the call :
console.log('success, no error encountered during call');
return returnValue;
}
}
I have tested this code snippet in the Firefox console with the following input:
let original = function (x,y) {
console.log(x+y);
};
let custom = customizeFunction(original);
custom(2,3);
/* Output :
Calling original
5
success, no error encountered during call debugger eval code:12:17
undefined
*/
The functionality works correctly. However, whenever I execute:
console.log(custom);
The output displays function customizeFunction(args) instead of function original(x,y). Are there properties that can be adjusted to show either function original(x,y) or function custom_original(x,y) ?
Furthermore, while original.length returns 2, custom.length shows 0. Is there a way to modify this value as well?