Why does jQuery each() function behave like it's asynchronous?

Question

I saw like many people answered that jQuery each() function isn't asynchronous. But I don't understand why this function behaves a certain way. Could anybody explain why this code:

var otherArray = [1, 2, 3, 4, 5];

var array = [];
console.log(array);

$(otherArray).each(function () {
    array[1] = $(this);
});

has this output:

But that code:

var otherArray = [1, 2, 3, 4, 5];

var array = [];
console.log(array);

$(otherArray).each(function () {
    // array[1] = $(this);
})

has that output:

https://stackoverflow.com/questions/11214430/wrong-value-in-console-log — Jeff, Jan 12 '19 at 21:22
You overwrite the same array element each iteration by hard coding the index `1`. Try using the index parameter of the `each` callback instead — charlietfl, Jan 12 '19 at 23:22
@charlietfl it doesn't matter. Problem is that console.log() displays incorrect value. — Andrew Shaban, Jan 13 '19 at 11:03
@Jeff Thanks, Jeff. It solves my issue. It appears that in Chrome there is just a bug. — Andrew Shaban, Jan 13 '19 at 11:05

score 1 · Answer 1 · answered Jan 12 '19 at 21:24

1

The console you see in Chrome/Firefox doesn't actually provide an exact snapshot of what an object was at the time of console.log. See this answer.

The code is indeed running synchronously. To verify this, print a "primitive" value, e.g. the length of the array:

var otherArray = [1, 2, 3, 4, 5];

var array = [];
console.log(array.length);

$(otherArray).each(function () {
  array[1] = $(this);
});

Should print 0 as expected.

answered Jan 12 '19 at 21:24

Aurel Bílý

7,068
1
21
34

Yes, it prints length correctly. But when you need to have array itself printed, the better way to use `console.log(JSON.parse(JSON.stringify(array)));` – Andrew Shaban Jan 13 '19 at 11:10

Why does jQuery each() function behave like it's asynchronous?

1 Answers1