Why is variable assigned multiple values on forEach iteration?

Question

i am trying to make a simple list where each item is going to show after another

html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <script src = "async.js"></script>
</body>
</html>

javaScript

let list = [
    {
        name: 'one',
    },
    {
        name: 'two',
    }
]
let output = '';
function print(){
    setTimeout(()=>{
        list.forEach(function(element){
            output = `<li>${element.name}</li>`; // critical line
            document.body.innerHTML += output;
        })
    },500)
}

function add(element){
   setTimeout(() =>{
    list.push(element);
   },400)
}

add({name: 'three'});

let c=0;
setTimeout(()=>{  // waits for add function to be executed
    for(let i=0;i<list.length;i++){
        setTimeout(print,c);
        c+=1000;
    }
},1000)

The problem is that output value gets all of names every iteration and prints 3 names 3 times instead of printing 1 name at the time. Can you explain this?

You pass the whole list to print 3 times, so it prints the whole list 3 times. Not that surprising. :-) — RobG
– RobG, Commented Mar 27, 2020 at 22:06

Quentin · Accepted Answer · 2020-03-27 22:04:57Z

3

The list starts with two items.
add({name: 'three'}); adds a third
for(let i=0;i<list.length;i++){ loops over the list and calls setTimeout(print,c); three times (because there are three things in the list)
function print(){ prints each of the the three things in the list (and it runs three times because of step 3).

So… if I understand your misunderstanding correctly:

print prints every item in the list, because it loops over the list.

print doesn't print a specific item because it (a) isn't designed to print one item and (b) You haven't passed it an argument that would tell it which item to print anyway.

Possibly you want something along the lines of:

let list = [{
    name: 'one',
  },
  {
    name: 'two',
  },
  {
    name: 'three'
  }
];

let current_index = 0;

function print() {
  const element = list[current_index];
  if (!element) {
    return; // end of the list
  }
  const output = `<li>${element.name}</li>`;
  document.querySelector("ul").innerHTML += output;
  current_index++;
  setTimeout(print, 1000);
}

setTimeout(print, 1000);

<ul></ul>

… where you keep track of which element in the array you are dealing with, and increment the counter as you add the data to the HTML and not all in one immediate loop.

edited Mar 27, 2020 at 22:04

answered Mar 27, 2020 at 21:59

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Zobla Over a year ago

Thanks for such detailed answer, it was more than helpful !

Collectives™ on Stack Overflow

Why is variable assigned multiple values on forEach iteration?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related