JavaScript output is different from my answer

Question

This question was asked during the interview at work interview my answer was recorded as wrong.

Asked Question : What is the output of this code block ?

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

My answer is :

index 0 element 10
index 1 element 12
index 2 element 15
index 3 element 21

but it is not correct. What is the right answer ?

Use let instead of var. Or, even better, use forEach instead — CertainPerformance
– CertainPerformance, Commented May 25, 2018 at 5:07
@CertainPerformance I think the OP was supposed to show the output of given code, not write the code :p — Jaromanda X
– Jaromanda X, Commented May 25, 2018 at 5:08
This question was asked - what is the question that was asked. We know what you are asking, but you haven't actually stated the question you answered wrong — Jaromanda X
– Jaromanda X, Commented May 25, 2018 at 5:11
@CertainPerformance yea I know but I asked different question please read my question — user9844692
– user9844692, Commented May 25, 2018 at 5:12

Melih Altıntaş · Accepted Answer · 2018-05-25 05:18:34Z

3

this is the most popular javascript interview question.

Answer is Index: 4, element: undefined(printed 4 times).

The reason for this is because the setTimeout function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index i. After 3 seconds go by, the function is executed and it prints out the value of i, which at the end of the loop is at 4 because it cycles through 0, 1, 2, 3, 4 and the loop finally stops at 4.arr[4] does not exist, which is why you get undefined.

edited May 25, 2018 at 5:18

answered May 25, 2018 at 5:07

Melih Altıntaş

2,5451 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neeraj Wadhwa Over a year ago

Can you please explain that why index inside setTimeout() turns out to be 4?

Melih Altıntaş Over a year ago

@NeerajWadhwa I gave my answer in more detail

Ravi Shankar Bharti · Accepted Answer · 2018-05-25 05:20:19Z

Answer will be :

Index: 4, element: undefined
Index: 4, element: undefined
Index: 4, element: undefined
Index: 4, element: undefined

Explanation :

setTimeout is used here to print to console, with timeout of 3000 milliseconds or 3 seconds, by that time for loop will be long over, and at the end of the for loop, value of i will be 4.

Since the function inside setTimeout has the access to variable 'i' (Its called closure, read about it more here), it will print the value of i = 4. And since there is no such index 4 in the arr, it is undefined.

I hope this clears your doubt.

Aswin · Accepted Answer · 2018-05-25 05:35:53Z

For your answer using setTimeOut() function, You need to use IIFE - immediately-invoked function expression. Like this

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

Because, it for every loop, the entire inner function will get executed and then only the next loop runs. Else, setTimeout function will create timeout events, but loop will be completed and the value of i after loop completion will be here 4 only and the corresponding array element is not there. So, it will be undefined.

For learning about this scenario, Here are some links.

Learn about JS Closure - freecodecamp
Example of Closure concept with setTimeout - Medium

Collectives™ on Stack Overflow

JavaScript output is different from my answer

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related