Explicitly scope a variable inside a function

Question

I'm reading this article and there is a paragraph:

If you ever find yourself needing to explicitly scope a variable inside a function you can use an anonymous function to do this. You can actually create an anonymous function and then execute it straight away and all the variables inside will be scoped to the anonymous function:

 (function() {
        var myProperty = "hello world";
        alert(myProperty);
  })();
 alert(typeof(myProperty)); // undefined

I met with this already but still need some clarification why should I need to explicitly scope a variable inside a function when variables are implicitly scoped inside a function in Javascript.

Could you explain the purpose of this?

thank you

maybe because you don't want to overwrite the value of a global variable? — Achshar
– Achshar, Commented Sep 13, 2011 at 12:49
@Achshar Yes, but I couldn't imagine this situation. Raynos example opened my eyes. — xralf
– xralf, Commented Sep 13, 2011 at 12:59

Raynos · Accepted Answer · 2011-09-13 12:35:25Z

3

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

// alerts 10, 10 times

for (var i = 0; i < 10; i++) {
  (function(i) {
    // explicitly scope i
    setTimout(function() { console.log(i) }, 10);
  })(i);
}

When generating functions inside other functions and accessing variables up the scope chain through closure scope it may be useful to "explicitly scope" a variable inside the outer function.

Although this is an anti pattern. The correct solution would be

var generateLogger = function(i) {
  return function() { console.log(i); };
}

for (var i = 0; i < 10; i++) {
  setTimeout(generateLogger(i), 10);
}

Since generating functions in a loop is inefficient and bad practice.

There are no real use cases of "explicitly scoping" variables that can't be avoided by not creating functions inside other functions.

answered Sep 13, 2011 at 12:35

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

6 Comments

apscience Over a year ago

Thank you for answering the OP's question and providing an actual example

xralf Over a year ago

@Raynos : Thank you, now it's clear. There is only one strange thing. The output in the first example is (54, 10, ... 10) and (undefined, 0, ..., 9). Why there is one more extra value? and why in the first case it isn't (54, 0, ..., 0), the last value of i overwrites the preceding values?

Raynos Over a year ago

@xralf the 54 and undefined are the value of executing the "expression" that is the for loop in the console. 54 is the return value of the last setTimeout and undefined i the return value of the anonymous function.

Raynos Over a year ago

@xralf in the first example it's 10, ... 10 because the setTimeout function prints the current value of i after 10 milliseconds. the current value of i is 10 when those functions execute.

xralf Over a year ago

@Raynos This could be a bug in the future when the for loop should execute 10 times but it executes 11 times, it's good to know this pitfall.

|

Collectives™ on Stack Overflow

Explicitly scope a variable inside a function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related