Passing a function expression into new Function() with a variable

Question

This is the most confusing thing ever. The title probably doesn't make much sense. I did my best. Hope I can be clear. Ok i am looking at the tic-tac-toe example from google channel api.

in the javascript portion.

they have something like this;

sendMessage = function(param) {
  alert(param);
  //this part actually sends message to server, 
  //for simplicity lets assume it pops up alert.    
  }

init = function(){
  var input = 3;
  var submitButton = document.getElementById('submitButton');
  submitButton.onclick = new Function('sendMessage(' + input + ')');
}

setTimeout(init, 100);

this pops up an alert and prints 3. I am not sure how this works. But it works. If one can explain that, that would be great too. I could not find anywhere else use of new Function() like this.

The problem is, if the input is a string,

var input = "test";

this does not work, and there is no alert that pops up.

thanks for any explanation and help.

It works, and it's extremely ugly. Are you sure Google recommends that, and not w3schools? Hint: Function()~~eval() — John Dvorak
– John Dvorak, Commented Feb 16, 2013 at 7:28

John Dvorak · Accepted Answer · 2013-02-16 07:45:53Z

The Function constructor works by evaluating its argument as a function body.

... = new Function('sendMessage(' + input + ')');

is similar to

... = eval("function(){sendMessage("+input+")}";

For numeric inputs, this works, since their textual representation works as a numeric literal. For textual inputs, it doesn't. A limited support can be gained by doing

... = new Function('sendMessage("'+input+'")');

A more general way would be to use

... = new Function('sendMessage("'+JSON.stringify(input)+'")');

However, I recommend using an immediately invoked function expression (IIFE) instead to avoid any form of eval and the dependence on the JSON object, which does not exist in very old browsers (IE<8):

... = (function(input){
  return function(){
    sendMessage(input)
  }
})(input)

Or, if the input variable doesn't change, you don't need to capture its value:

... = function(){ sendMessage(input) }

Or, if you don't use this inside sendMessage, you can use bind (IE8 needs shimming):

... = sendMessage.bind(undefined, input)

Keith A · Accepted Answer · 2013-02-16 07:37:56Z

0

the parameter to function gets evaluated.. that is to say it is executed. that's why it works.

when you pass a string it didnt work simply because that string you pass will be treated as an object or a variable instead of a string.. and we all know it doesnt exist.

i.e

this works:

submitButton.onclick = new Function('sendMessage(3)');

this does not:

submitButton.onclick = new Function('sendMessage(test)'); //because test does not exist

but this will

submitButton.onclick = new Function('sendMessage("test")');

so if you change your code to:

submitButton.onclick = new Function('sendMessage("' + input + '")');

then all is well

answered Feb 16, 2013 at 7:37

Keith A

8117 silver badges12 bronze badges

Comments

loxxy · Accepted Answer · 2013-02-16 07:40:09Z

0

When the input is a string, the function call becomes :

sendMessage(string)

which should actually be :

sendMessage("string") or sendMessage('string')

sendMessage = function(param) {
  alert(param);   
  }

init = function(){
  var input = '"string"';
  var submitButton = document.getElementById('submitButton');
  submitButton.onclick = new Function('sendMessage(' + input + ')');
}

setTimeout(init, 100);

Here is fiddle to see how you could use.

edited Feb 16, 2013 at 7:40

answered Feb 16, 2013 at 7:28

loxxy

13.2k2 gold badges28 silver badges57 bronze badges

3 Comments

Phil Bozak Over a year ago

So you should be setting var input = "'text'";

btevfik Over a year ago

it works. but i still dont get how new Function() works like that. the argument is supposed to be the function body. how is 'sendMessage(' + input + ')' is the function body?

loxxy Over a year ago

You are actually casting & invoking sendMessage as a Function.

Collectives™ on Stack Overflow

Passing a function expression into new Function() with a variable

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related