TypeScript call function in dynamic (anonymous) function

Question

I am trying to create a dynamic function in TypeScript which calls an already existing function like:

let dynamicFunction = new Function("existingFunction(\"asdf\");");

function existingFunction(name: string) {
    console.log(name);
}

While debugging in chrome dynamicFunction looks like this:

(function() {
existingFunction("asdf");
})

When I try to execute dynamicFunction, it says "Uncaught ReferenceError: existingFunction is not defined", which is no surprise because it's a different scope, but how can I actually call exisitingFunction inside dynamicFunction?

Any help would be greatly appreciated!

Edit:

to be more precise: I've got a typescript file which contains one module. This module exports a function which should return the created dynamic function. The created dynamicFunction is then used in another module which actually contains the exisitingFunction.

I've chosen this approach because I need to convert a given string to an executable condition, which will be executed many times.

For example: convert string "VALUE==1" to:

function () {
    return exisitingFunction("VALUE") == 1;
}

A short example of how it should look like:

parser.ts:

export module Parser {
   export function getFunction(expression: string) {
      // Calculating condition...
      let condition = "existingFunction(\"VALUE\") == 1;"
      return new Function(condition);
   }
}

condition.ts:

import { Parser } from "./parser";
class Condition {
    // getting the DynamicFunction
    private _dynamicFunction = Parser.getFunction("VALUE==1");

    someFunctionInsideCondition() {
       // Calling the DynamicFunction
       this._dynamicFunction();
    }
}

// Maybe this function should be somewhere else?
function existingFunction(name: string) {
    console.log(name);

    return 1;
}

I hope this explains my problem a little bit better.

I don't understand exactly what you're trying to do but, maybe let dynamicFunction = existingFunction("asdf"); is what you want. — Elmer Dantas
– Elmer Dantas, Commented Dec 21, 2016 at 11:40

alebianco · Accepted Answer · 2016-12-22 09:57:36Z

1

From the Function documentation

Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was called. This is different from using eval with code for a function expression.

so you'll have to pass existingFunction as an argument or define it in the global space.

try with

var existingFunction = function(name: string) {
    console.log(name);
}

Also have a look at eval which will give you access to the current scope ...

--- Update

After the question update and considering your comment about not wanting to use eval because of security concerns (with which i totally agree)

The problem is that in the generated function's scope, this is undefined. Making your existingFunction part of the global scope is already a bad idea and between Typescript and the modules architecture doesn't seem possible at all.

So why not passing a context to the generated function?

This will allow you to control how much of your application to expose to the generated function, while giving it access to external methods.

Something along the lines of:

class Parser {
    static getFunction(expression) {
        let condition = new Function("context", "context.existingFunction(\"VALUE\") == 1;");
        return condition;
    }
}

class Condition {
    constructor() {
        this._dynamicFunction = Parser.getFunction("VALUE==1");
    }

    someFunctionInsideCondition() {
        // Calling the DynamicFunction
        this._dynamicFunction(this);
    }

    existingFunction(name) {
        console.log("hello " + name);

        return 1;
    };
}



let c = new Condition();
c.someFunctionInsideCondition();

Of course your context can be a different object instead of this, where you keep all your utility functions.

I had to donwpile (compile it down, my own word) to es2015 to make the example run here, but I made it originally in Typescript and works fine

edited Dec 22, 2016 at 9:57

answered Dec 21, 2016 at 11:55

alebianco

2,57520 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sarah Over a year ago

Thank you. This explains why I can't access "existingFunction", but that does not acutally solve my problem. Maybe have a look on my edit. I explained my problem more precisely.

alebianco Over a year ago

I think it may be because of the modules. I'll have a look later tonight. In general i think you might have more luck in returning just a string and then using eval to execute it

Sarah Over a year ago

yes, eval with the formated string could work, but as I am dealing with sensitive data I would rather not use eval.

Sarah Over a year ago

Thank you very much! I just tried that in my own project and now everything works just fine. It really bugs me that it would have been that simple.

Louis · Accepted Answer · 2016-12-21 17:50:04Z

0

I would skip the usage of new Function and instead do it as follows.

The parser.ts file would contain this:

export class FunctionGenerator {
    constructor(private fn: Function) {}

    makeFunction(args: string): Function {
        const [variable, val] = args.split("==");
        return () => this.fn(variable) == val;
    }
}

This is basically a factory that allows creating a series of functions that call the function passed when the factory is created. You can then use makeFunction for the specific checks you want to perform. (Note that I used == like in your question. I much prefer using === unless there's a reason against it.)

It can then be used like this:

import * as parser from "./parser";

let vars = {};

// This is a simulation of your funciton. It just plucks values from `vars`.
function existingFunction(name: string) {
    return vars[name];
}

function resetVars() {
   vars = {
    "VALUE": 1,
    "FOO": 2,
    "BAR": 3,
   };
}

function test(gen) {
    const fn1 = gen.makeFunction("VALUE==1");
    console.log(fn1(), "should be true");

    const fn2 = gen.makeFunction("BAR==3");
    console.log(fn2(), "should be true");

    vars["BAR"] = 7;
    // Call the same function again, but with a new value in `vars`.
    console.log(fn2(), "should be false");

    const fn3 = gen.makeFunction("BAR==1000");
    console.log(fn3(), "should be false");
}

resetVars();
const gen = new parser.FunctionGenerator(existingFunction);
test(gen);

answered Dec 21, 2016 at 17:50

Louis

152k28 gold badges288 silver badges332 bronze badges

1 Comment

Sarah Over a year ago

That would work if the statements would always be that simple. The problem is, those statements can get very complex in combination with && or || and of course braces and other functions (e.g. getCurrentDate, Multiplication/Division, Addition/Subtraction) But thank you anyway!

Collectives™ on Stack Overflow

TypeScript call function in dynamic (anonymous) function

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related