История изменений

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    // тут i принадлежит глобальному скопу и всегда 4, потому как этот код вызвается в следующей итерации основного цикла все 4 раза
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 10);
}

// Index: 4, element: undefined

// Но стоит заменить var на let
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    // тут i принадлежит локальному скопу (внутри итерации)
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 10);
}

// Index: 0, element: 10
// Index: 1, element: 12
// Index: 2, element: 15
// Index: 3, element: 21

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 10);
}

// Index: 4, element: undefined

// Но стоит заменить var на let
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 10);
}

// Index: 0, element: 10
// Index: 1, element: 12
// Index: 2, element: 15
// Index: 3, element: 21