Passing variables VS passing values

Question

I would love to understand the difference between:

var the_timeout = setTimeout("alert(the_string);", 60000);

and:

  var the_timeout = setTimeout("alert(" + the_string + ");",60000);

I understand that the first passes the variable, and the second passes the value - but what does that mean exactly and why does it matter? Why is the value passed in the second example?

Also (I hope this is the same subject), why does this work:

var timeout=setTimeout("someFunction();", 3000)

While this doesn't:

var timeout=setTimeout(someFunction(),3000);

When calling a function, someFunction() works, so why do I have to add quotes when using setTimeout()?

Answer 1

I think you're confusing the distinction between pass-by-value and pass-by-reference with this. In the examples you mentioned, there is no difference.

However,

var timeout=setTimeout("someFunction();", 3000)

Works and:

var timeout=setTimeout(someFunction(),3000);

Doesn't because in the second case, someFunction() would run so that it can then pass the result/return value to setTimeout . That's why you pass it as a string so that setTimeout can eval it on its own. Unless, of course, if someFunction() itself returns a function that setTimeout can use as a callback.

However, as zerkms pointed out in a comment, you should pass callbacks instead:

var timeout = setTimeout(function() { someFunction(); }, 3000);

This also has the effect that setTimeout can then call the callback whenever it wants. A major benefit is that you can pass any regular function so that you can benefit from the editor you may be using, instead of packing it all into a string:

var myTrigger = function() {
  someFunction();
};

var timeout = setTimeout(myTrigger, 3000);

Answer 2

This will parse execute the code within the string, 60 seconds later.

var the_string = "Hello";
setTimeout("alert(the_string);", 60000);
the_string = "Goodbye";

This means alert(the_string) is executed, just as if it was regular code. So it would alert "Goodbye". This is because when the code is eventually executed, the updated value of the_string is used since you are passing the variable.

But this does something subtly different.

var the_string = "Hello";
setTimeout("alert(" + the_string + ");",60000);
the_string = "Goodbye";

Now we are creating a new snippet of code on the fly. The snippet we are creating is alert(Hello); . But Hello is a variable with no value because you didn't get the quotes right.

But lets say you meant this:

var the_string = "Hello";
setTimeout("alert('" + the_string + "');",60000);
the_string = "Goodbye";

Now this will work, because the code it generates is alert('Hello'); . Which at first glance appears to do the same thing. But because the generated code now includes literally a hardcoded string, so when the_string changes, the change doesn't make it into generated code because it was hardcoded into the snippet.

Based on that, this is simple:

setTimeout("someFunction();", 3000)

The code in the string is executed after the delay. In this case, someFunction() is executed.

But this is totally different:

setTimeout(someFunction(),3000);

In this case, someFunction() is executed immediately , and it's return value is passed as the first argument to the setTimeout() function. So it won't do what you expect at all.

---

Most of this has to do with the quirks of eval and generated code, as setTimeout(string,delay) is a form of eval . And none of this is a problem if you don't use eval , and you don't pass a string to setTimeout() .

Passing a string to setTimeout leads to eval , eval leads to wierd crazy bugs, wierd crazy bugs lead to pain, pain leads to sufferrriing .

Instead you pass a function instead. It's better in every single way.

// pass an anonymous function to run some code later
var the_string = "Hello";
setTimeout(function() {
  alert(the_string);
}, 60000);
the_string = "Goodbye";
// alerts "Goodbye" 60 seconds later


// pass an anonymous function to run some code
setTimeout(function() {
  someFunction();
}, 3000);

// or pass a reference to a function to execute, note lack of ()
setTimeout(someFunction, 3000);