# Closures

## Closures

### Use case

```javascript
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });
}
```

The code prints two times `You clicked element #NODES_LENGTH`where `NODES_LENGTH` is the number of the nodes retrieved.

**The value of the variables in closures isn’t static**, **hence the value of `i` isn’t the value at the time the handler was added** (0 for the first button in the list, 1 for the second, and so on). At the time the handler will be executed, on the console will be printed the current value of the variable `i`, that is equal to the length of the nodes list.

### Solutions

**First solution:** use an **IIFE** to create another closure so that the value of `i` will be the one expected:

```javascript
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', (function(i) {
      return function() {
         console.log('You clicked element #' + i);
      }
   })(i));
}
```

**Second solution**: move the function outside the loop. :

```javascript
function handlerWrapper(i) {
   return function() {
      console.log('You clicked element #' + i);
   }
}

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', handlerWrapper(i));
}
```