Is this the correct example of a closure in Javascript?

Question

I am going through a book on Javascript and tried one of its example of closure.

function animateIt(id) {
   var elem= document.getElementById(id);
   var tick=0;

   var timer=setInterval(function() {
     if (tick<100) {

       elem.style.left = tick+"px";
       elem.style.top=tick+"px";
       tick++;
     } else {
       clearInterval(timer);
       assert(tick==100, "Tick Accessed and has value:- "+ tick);
       assert(elem, "element accessed");
       assert(timer, "timer accessed")
     }
   }, 10);
 }
 animateIt(box);      

but the function in timer doesn't have access to elem, tick etc. whereas the book says it should have access to the same. Please let me know.

Answer 1

This can be considered as closure, function animateIt contains variables id and elem, so if you will run animateIt for different ids it will work correctly.

Answer 2

You didn't give the whole code(box, assert) but as it seems as there is closure. assuming that function animateIt is now executed, there is a new execution context created, along with vars such as tick and elem.

When the the execution reaches here:

var timer=setInterval(function() {

a new function is created. it is an anon function. it is the function inside setInterval, and it has a reference to it's parent function(animateIt) scope object. the scope object contains the vars - elem, tick. it has a reference to the scope object because function anon sits inside function animateIt, lexically. the parent itself contains vars such as

var elem= document.getElementById(id);
var tick=0;

these vars are referenced by your anon function(inside setInterval) because they are inside the scope object of animateIt, and your anon function has a reference to it.

once animateIt function execution context is over, the function which you passed to the event queue through setInterval keeps on executing itself on and off because of setInterval, and it has an access to the vars of a function which used to "exist"(during it's execution), but now doesn't. that function is called animateIt, and closure is what saved those vars(tick,elem) in memory.

Answer 3

The tick variable which is visible inside of a unnamed function call (setInterval contains unnamed function) is a closure.

Closure is created per function call.

//source function which contain the variable: 
//lets consider it as a global function call
var tick=0;

(function() {
    //target function
    //1. closure is created on function call and 
    //2. another characterictic of closure is that 
    // source function must be parent of the target function
    console.log(tick); //so closure is equal to implicit parametrization
    //on target function call
}());

In previous example I am calling a function an implicitly a variable is added an implicitly to inner "scope" on the target fucntion call.

I use another name for "closure" (implicit parametrization on function call).

function animateIt(id) {

    var timer=setTimeout(function() {
        id="wow"; //important! there is no var keyword, so the outer variable is changed
    }, 1000);

   var timer=setInterval(function() { //on each function call a closure is created
     // in your case a built in function calls the function and 
     // on each call a closure is created
     console.log(id)
   }, 10);

 }

 animateIt("test");