0

What is the difference in the use of the below methods?

First Method :

for(var i = 0; i < 10; i++) {
    (function(e){
        setTimeout(function() {
            console.log(e); 
        }, 1000);
    })(i);
}

for(var i = 0; i < 10; i++) {
    createTimeoutFunction(i);
}

Second Method :

function createTimeoutFunction(e){ 
    setTimeout(function() {
        console.log(e); 
    }, 1000);
}

for(var i = 0; i < 10; i++) {
    createTimeoutFunction(i);
}

I am new to node js and in using closures. Though both methods return the same output but the second method runs with error. I am not understanding why do we need to use two loops as in the first method. Can't we just execute as like the second method?

user850234
  • 3,373
  • 15
  • 49
  • 83
  • 6
    the First Method is a little bit buggy because `createTimeoutFunction` doesn't exist – EaterOfCode Aug 22 '12 at 11:24
  • What kind of error does the second method give you? – raina77ow Aug 22 '12 at 11:33
  • @raina77ow If i try the above code in the terminal for the second method it prints `Array Boolean Date Error EvalError Function Infinity JSON Math NaN Number Object RangeError ReferenceError RegExp String SyntaxError TypeError URIError decodeURI decodeURIComponent encodeURI encodeURIComponent eval isFinite isNaN parseFloat parseInt undefined ` 10 times for `function createTimeoutFunction(e){`. Why is this so? – user850234 Aug 22 '12 at 11:42
  • @user850234 I suppose it's because of REPL nature. How it behaves when you change the first line to `var createTimeoutFunction = function(e)...`? – raina77ow Aug 22 '12 at 11:56
  • @user850234 BTW, is there any error when you just run it (with `node somescript.js`)? – raina77ow Aug 22 '12 at 11:57
  • @raina77ow when i run with `node somescript.js` there is no error. – user850234 Aug 22 '12 at 12:01

2 Answers2

1

Remove the second for in your first method, because unless you want the loop to run twice, it is redundant as everything is already happening in the first. The second loop fails because createTimeoutFunction is never defined outside of the scope of the first loop, as opposed to the second method.

Other than that, they both will produce the same result, the only difference being in the second method createTimeoutFunction is reusable.

See also: How do JavaScript closures work?

Community
  • 1
  • 1
Mahn
  • 16,261
  • 16
  • 62
  • 78
0

A closure in javascript works the same regardless of the environment or interpreter that you're using.

A closure provides a specific variable scope in which that set of code executes. Your closure will have access (obviously) to anything defined within itself, as well as any objects defined in any enclosing closure.

The problem with you code up there is that in the first example createTimeoutFunction isn't defined anywhere -- when you call it it will fail. In that example:

(function(e){
    setTimeout(function() {
        console.log(e); 
    }, 1000);
})(i);

The function being defined within this closure is an anonymous function. It has no name property and can't be referenced.

The second version defines a global variable createTimeoutFunction which is then accessible in ANY closure on the page since it's part of the global object. (Well I'm assuming that since you're not showing that this code is enclosed by anything else).

tkone
  • 22,092
  • 5
  • 54
  • 78