Почему arr[i] is undefined?

Question

[dicem]

(function(w, d, u) { 
	"use strict"; 

	var arr = [
		{
			id: 1,
			name: 'John'
		},
		{
			id: 2,
			name: 'Peter'
		},
		{
			id: 3,
			name: 'Kate'
		}
	]; 

	for (var i = 0; i < arr.length; i++) {
		var div = d.createElement('div');
		console.log(i);
		div.addEventListener('click', function(){
			alert('Div number is ' + i + '. Name is: ' + arr[i].name);
		})
		div.style.cssText = 'width:30px;height:30px;border:1px solid red';
		d.body.appendChild(div); 
	} 
})(window, document, undefined)

Почему при клике на созданные дивы консоль пишет: arr[i] is undefined?

Answer 1

[Владимир Проскурин]

У вас к концу цикла i равна arr.length, а arr[arr.length] - не может существовать никогда.
Поменяйте
for (var i = 0; i < arr.length; i++) {
на
for (let i = 0; i < arr.length; i++) {

Comments

[Макс]

И разве "use strict"; не должен идти 1 строкой?

[lloydbanks]

Макс, use strict может использоваться и для локальной области

[Макс]

lloydbanks, спасибо нашел, что

use strict

также можно указывать в начале функций, тогда строгий режим будет действовать только внутри функции.

[dicem]

огромное спасибо за ответ, обязательно вникну в области видимости

Answer 2

[JorJeG]

либо без ES6 синтаксиса

(function(i) {
  div.addEventListener('click', function(){
    alert('Div number is ' + i + '. Name is: ' + arr[i].name);
  });
})(i);