javascript for loop behaving weirdly when updating and logging an array inside the loop

Question

I have the following JavaScript code

let logs = [];
for (let j = 0; j < 10; j++) {
  logs[j] = { j };
  console.log('logs', logs);
}

I expect the output to be as follows

logs [ { j: 0 } ]
logs [ { j: 0 }, { j: 1 } ]
logs [ { j: 0 }, { j: 1 }, { j: 2 } ]
logs [ { j: 0 }, { j: 1 }, { j: 2 }, { j: 3 } ]
logs [ { j: 0 }, { j: 1 }, { j: 2 }, { j: 3 }, { j: 4 } ]
logs [ { j: 0 }, { j: 1 }, { j: 2 }, { j: 3 }, { j: 4 }, { j: 5 } ]...

And this is what I get when I run this code in the nodejs console.

But when I check in browser, I get the following output

logs [ { j: 0 },
  { j: 1 },
  { j: 2 },
  { j: 3 },
  { j: 4 },
  { j: 5 },
  { j: 6 },
  { j: 7 },
  { j: 8 },
  { j: 9 } ]

for every iteration

you have to add 2 loops 1 for the vertical and another for horizontal. — vikscool
– vikscool, Commented Aug 13, 2018 at 10:18
You tagged this as node, what version are you running? Is this really all that is logged out, or ist your console just scrolling away? — Luca Kiebel
– Luca Kiebel, Commented Aug 13, 2018 at 10:18
@vikscool the loop works, put it in a node console or in your browser — Luca Kiebel
– Luca Kiebel, Commented Aug 13, 2018 at 10:19
You need to write a nested loop for this. The first loop needs to take care of the row number and the second loop needs to take care of the column number. — R.D
– R.D, Commented Aug 13, 2018 at 10:21
@Luca I'm using node 8.9.4. No that is not all that is logged out.. I should've probably mentioned that — troglodyte07
– troglodyte07, Commented Aug 13, 2018 at 10:42

31piy · Accepted Answer · 2018-08-13 10:19:18Z

3

You cannot control how browser displays the console.log outputs. One way to show the values like you mentioned is to stringify the objects to JSON (read what is JSON), and then show it on the console.

let logs = [];
for (let j = 0; j < 10; j++) {
  logs[j] = { j };
  console.log('logs', JSON.stringify(logs));
}

answered Aug 13, 2018 at 10:19

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

Comments

Nisarg Shah · Accepted Answer · 2018-08-13 10:21:19Z

The code is actually doing what you expect it to. See the result in snippet below:

let logs = [];
for (let j = 0; j < 10; j++) {
  logs[j] = {
    j
  }
  console.log('logs', logs)
}

Notice that the result shown in stack-snippet is different from the one shown in the browser. That's because stack-snippet's console evaluates the variable logs immediately, whereas (most) browsers evaluate the value when you look at them. So by the time you look at them, the variable has 10 elements in the array.

A simple change to verify this would be to stringify the array before logging to console. The snippet below should produce the expected results:

let logs = [];
for (let j = 0; j < 10; j++) {
  logs[j] = {
    j
  }
  console.log('logs', JSON.stringify(logs));
}

Related: Is Chrome's JavaScript console lazy about evaluating arrays?

Collectives™ on Stack Overflow

javascript for loop behaving weirdly when updating and logging an array inside the loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related