how to pass loop variables in JavaScript callback?

JavaScript is NOT block scope, the loop always ends before callback executed if written in java-like way.
solution

for (var i = 0; i < max; i++){
    (function(index){
        // do your stuff here
        // use the index variable as it is assigned the 
        // the value of i.
     }(i)

• check if an array has an element

var myArray =["I", "you","turtle"];
alert(myArray.indexOf("turtle")) // will return 2;
return myArray.splice(myArray.indexOf("turtle"), 1) // will return turtle and delete it from array

splice() 是從array中刪除所選element 并返回
slice() 是用來選擇element

• loop an object

for (var key in p) {
  if (p.hasOwnProperty(key)) { // to check if it is not in prototype
    alert(key + " -> " + p[key]);
  }
}

• closure sweet
  two ways of writing functions like this

var name = "The window"
var object = {
    name: "My object",
    getName: function(){
        return this.name;
    }
};
console.log(object.getName()); logs My object
var func = new Object();
func.method = object.getName; // "this" will refers to immediate context
console.log(func.method()); // logs undifined
func.name = "hello";
console.log(func.method()); // logs hello

there are two ways to fix this problem

// first is to use a bind
func.method = object.getName.bind(object);
console.log(func.method()); //logs My object
//
// second is to use closure;
var name = "The window";
var object  = {
    name: "My object",
    getName: function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
};
var func = object.getName();
console.log(func());

• Memory leaks
  Storing a scope in which an HTML element is stored effectively ensures that the element cannot be destroyed.

function assignHandler(){
    var element = document.getElementById("someElement"); // reference to DOM element 
    element.onclick = function(){
        alert(element.id); // reference to activation object 
    };
}

This code creates a closure as an event handler on element, which in turn creates a circular reference. The anonymous function keeps a reference to the assignHandler() function's activation object, which prevents the reference count for element from being decremented.
solution:

function assignHandler(){
    var element = document.getElementById("someElement");
    var id = element.id;
    element.onclick = function(){
        alert(id);
    };
    element = null;
}

• mimicking block scope
  basic syntax

(function(){
    // block code here;
})();

and this can be used for private scopes

function outputNumbers(count){
    (function(){
        for (var i = 0; i < count; i++) {
            alert(i);
        }
    })();

    alert(i); // cause an error
}

This technique is often used in the global scope outside of functions to limit the number of variables and functions added to the global scope. to avoid naming collisions.