Javascript: In which scope is this variable placed?

Question

I have the following function which is created from this StackOverflow question.

My question is regarding the parameters from the return function; (callback, ms, uniqueId).

In which scope are these variables added to when I run delayResizeEvent(func(), 500, "Unique name")?

var delayResizeEvent = (function () {
    'use strict';
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

I appreciate my wording may be a little off. If so please improve my quesetion.

You are calling `delayResizeEvent()` with three parameters, but the function signature itself does not accept any parameters. While the variables do exist in the arguments array of the function, they are not passed on to the anonymous function inside. You need to rethink what you're doing here. — Pranav Negandhi, Jul 04 '13 at 14:41
If you look at his example link to the other SO question, the Usage for the function he is working off of is similar: waitForFinalEvent(function(){ alert('Resize...'); //... }, 500, "some unique string"); — projeqht, Jul 04 '13 at 14:47
@PranavNegandhi Shrewdbeans' encapsulation of the timers variable is only possible using the surrounding self executing function. When the anonymous function executes, it created a timers object, then returns the contained function. delayResizeEvent is set to the return value, a function with 3 parameters. — Patrick Hallisey, Jul 04 '13 at 14:49
@PranavNegandhi He is using a closure here, this is the actual function signature being used: `function (callback, ms, uniqueId)` — Eudis Duran, Jul 04 '13 at 15:29

projeqht · Answer 1 · 2013-07-04T14:52:12.867

Looks like a javascript closure, in which the parameters in delayResizeEvent(func(), 500, "Unique name") are called from the outside function (delayResizedEvent), but the inside function (return function() which is an anonymous function) can access them as well. func(), 500 and "Unique Name" are in the scope of delayResizeEvent, but because of the closure created from a function within a function, the inside function can access the outside function's variables.

More on Javascript Closures. See example #7 which has a similar format to your code.

HMR · Answer 2 · 2013-07-04T15:24:27.860

In which scope are these variables added to when I run delayResizeEvent(func(), 500, "Unique name")?

The first 2 parameters are used as parameters for setTimeout, the last one is used to add or look up a key value on an object called timers, this object is available because delayResizeEvent is the return value of a function (closure). A closure is when a value is returned from a function that is or contains a function/functions. A special environment is associated with each returned function so you can access variables declared in the function body that returned it/them.

Scope of the passed variables and the timers variable is only within the function body.

You can find more info on closures here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

If you want to keep calling this function with unique id's then I suggest cleaning up the timers because it could be leaking memory:

if (timers[uniqueId]) {
    clearTimeout(timers[uniqueId]);
    delete timers[uniqueId];
}
timers[uniqueId] = setTimeout(function(){
   delete timers[uniqueId];
   callback();
}, ms);

score 1 · Answer 3 · answered Jul 04 '13 at 15:34

1

delayResizeEvent(func(), 500, "Unique name") is using a closure. The argument values are locally bound at function scope to function (callback, ms, uniqueId) only.

answered Jul 04 '13 at 15:34

Eudis Duran

742
3
16

score 1 · Answer 4 · answered Jul 04 '13 at 15:54

In which scope are these variables added to when I run delayResizeEvent(func(), 500, "Unique name")?

A new one. When the function is called, a new variable context is instantiated. It will reference the scope of the anonymous function (which contains the timer variable) as its parent context (to where lookups continue). The scope contains the 3 variables which were declared as formal parameters: callback, ms, and uniqueId.

The passed values (ie. the result of func(), the number and the string) will be bound to them, and the function code is executed. After the function finished, the scope can be garbage-collected since nothing references it any more.

Javascript: In which scope is this variable placed?

4 Answers4