Passing an object reference to a function

Here is another proof of Javascript spectacular flexibility. We want to draw 10 DIV in a page, representing 10 people. When we click a DIV, we want a message indicating which person was clicked. Given an object named person, we could hard code this doing :

  div.innerHTML = person.firstName+' '+person.lastName;
  div.onclick = function() {
    alert(this.innerHTML+' was clicked');
  }

But the object model would be useless in this case !
Our first try is to make a loop that creates 10 DIV and 10 objects and map each of it together. Let's look how it works :

  <div id="myGroup" style="border: 1px dashed #000; padding: 5px; width: 300px;"></div>

And the script :

  //A class Person
  function Person( firstName, lastName ) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  //A function to be executed when onclick is fired
  function clickFunction(person) {
    alert(person.firstName+' '+person.lastName+' was clicked');
  }
  //We create 10 DIV representing 10 people
  for (var i=0; i < 10; i++) {
    //Create a DIV
    var div = document.createElement('DIV');
    //Create an object
    var person = new Person('firstName'+i, 'lastName'+i);
    //Fill in the DIV with the object infos
    div.innerHTML = person.firstName+' '+person.lastName;
    //Some styling
    div.style.border = '1px solid #CCC';
    div.style.margin = '5px';
    div.style.cursor = 'pointer';
    //Set the event on the DIV
    div.onclick = function() {
      //Use the object matched with the DIV in a function
      clickFunction(person);
    }
    document.getElementById('myGroup').appendChild(div);
  }

We have a DIV named myGroup which contains our 10 DIV
In each loop, we create a Person 'var person = ...' that is referred by the 'onclick' function of the DIV.
Try clicking on the people of MyGroup, you'll be quickly disappointed.
It refers to the last Person for any DIV we click on. WHY ?
Because the variable 'person' is re-written in each loop for a new Person. In the end, it lasts only 1 Person, person number 9!

One solution could be to push each Person in an Array and refer to the position of the Person in the 'onclick' function of the DIV. But Javascript has more to offer than this hack!
In Javascript, when a function creates a local variable that is refered by other functions, the variable is stored in memory until its last use.
We are going to exploit this capability like this :

  //A class Person
  function Person( firstName, lastName ) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  //A function to be executed when onclick is fired
  function clickFunction(person) {
    alert(person.firstName+' '+person.lastName+' was clicked');
  }
  //A function that is used to create a DIV matched with an object
  function createDiv(index) {
    //Create a DIV
    var div = document.createElement('DIV');
    //Create an object
    var person = new Person('firstName'+index, 'lastName'+index);
    //Fill in the DIV with the object infos
    div.innerHTML = person.firstName+' '+person.lastName;
    //Some styling
    div.style.border = '1px solid #CCC';
    div.style.margin = '5px';
    div.style.cursor = 'pointer';
    //Set the event on the DIV
    div.onclick = function() {
      //Use the object matched with the DIV in a function
      clickFunction(person);
    }
    document.getElementById('myGroup').appendChild(div);
  }
  //We create 10 DIV representing 10 people
  for (var i=0; i < 10; i++) {
    createDiv(i);
  }

What we do here is to create an intermediate function that aims to create local variables. Now the variable 'person' is stored at each loop, event if it has the same name! And each 'onclick' function refers to the right 'person'.