Intro (feel free to skip) Hello. I am applying to a Web Developer position at Amazon and have made it through the phone screen with a recruiter and a technical phone interview using coderpad (a collaborative coding platform) with an Amazon engineer as well. During the technical interview, I was asked a question that I got wrong and I am still not sure what the solution is. (I was surprised to recently learn that I will be moving onto the onsite interview because I figured messing up on this question, which I perceive is considered easy, would be the end of my opportunity. But I guess my answers to the other questions, which, for anyone interested were about CSS Box Model, closures, hoisting, and DOM manipulation through JS, led to me passing on.) Any help on what the answer is would be much appreciated.

Interview Question

The interviewer asked me, "What is the output of this following code?":

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

Even though I thought that was a trick question, I didn't have a better answer than

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

so that is what I put down as my response. The interview told me that that response was wrong and that the the actual output, after 3 seconds would be:

//Index: 4, value: undefined
//Index: 4, value: undefined
//Index: 4, value: undefined
//Index: 4, value: undefined

He then asked me, "How can you manipulate the above code so that it does print out your answer?" Again, I was not sure (and obviously not really thinking judging my this upcoming answer that I gave), and so I just added arr and i as parameters to the timeout function so the for loop now read:

for (var i = 0; i < arr.length; i++) {
    setTimeout(function(arr, i) {
        console.log('Index: ' + i + ', value: ' + arr[i]);
    }, 3000);
}

I ran this in my console and saw that it also did not work. It just logged the following 4 times:

VM1718:4 Uncaught TypeError: Cannot read property 'undefined' of undefined

(Luckily, right as I wrote my answer in coderpad for the interviewer to see, he said that his browser tab crashed and that he had to reopen the tab and join back into the coding session. When he got back into the session with me after 10 seconds, for some reason, he just moved onto the next question. He seemed to have forgotten that he asked me another question about this timeout problem. Maybe his browser tab crashing saved my interview chances...)

My Question To You Anyone know how the for loop should be changed so that it logs each number and index? Also, what topic is this considered/ what should I read up on so I know more about the logic behind problem?

Thanks.

Edit: Grammar