blah.js

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
} 
/////////////////////////////////
// example with the let keyword
/////////////////////////////////
// the following is how a computer will run the above for loop

// run 1:
// set i = 0, check 0 < 4, run loop
// call setTimeout and put this callback in the timing queue:
//      timing queue:
//              0: function () { console.log('the index is 0) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW)

// run 2:
// set i = 1, check 1 < 4, run loop
// call setTimeout and put this callback in the timing queue:
//      timing queue:
//              0: function () { console.log('the index is 0) }
//              1: function () { console.log('the index is 1) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW)

// run 3:
// set i = 2, check 2 < 4, run loop
// call setTimeout and put this callback in the timing queue:
//      timing queue:
//              0: function () { console.log('the index is 0) }
//              1: function () { console.log('the index is 1) }
//              2: function () { console.log('the index is 2) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW)

// run 4:
// set i = 3, check 3 < 4, run loop
// call setTimeout and put this callback in the timing queue:
//      timing queue:
//              0: function () { console.log('the index is 0) }
//              1: function () { console.log('the index is 1) }
//              2: function () { console.log('the index is 2) }
//              3: function () { console.log('the index is 3) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW)

// run 4:
// set i = 4, check 4 < 4, EXIT loop
// exit the entire function.

// ... DO OTHER STUFF (JAVASCRIPT IS ALL ABOUT NON-BLOCKING AND ASYNC), like render this, run other functions, listen for user events, clicks, blah blah blah, and also:
// CHECK THE TIMING QUEUE!

// go through the timing queue:

// for each item, if (CURRENT_TIME - SET_TIME > INTERVAL),      CURRENT_TIME = (new Date()).getTime();
//                                                              SET_TIME     = the timestamp when you called setTimeout()
//                                                              INTERVAL     = the interval you gave setTimeout(fn, interval) = 3000 milliseconds
// run the item/function!

// so finally after 3 sec, you have:
// item 0:
//  log 'the index is 0'
// item 1:
//  log 'the index is 1'
// item 2:
//  log 'the index is 2'
// item 3:
//  log 'the index is 3'