Why does using Array.prototype.slice during iteration behave unexpectedly? [duplicate]

Question

Given an array, I want to generate its "prefixes", meaning for an array of size N, I want one array containing the first element, an array containing the first two, an array containing the first three, and so on until I get a copy of all N items in the array.

const arr = [1,2,3,4,5]

for (const i in arr) console.log(i, arr.slice(0, i))
// 0, Array []
// 1, Array [ 1 ]
// 2, Array [ 1, 2 ]
// 3, Array(3) [ 1, 2, 3 ]
// 4, Array(4) [ 1, 2, 3, 4 ]

The above is slightly wrong, since at i=0 I want [1], and at i=4 I want [1,2,3,4,5]. So I modified it to use i + 1, which results in completely unexpected behavior:

for (const i in arr) console.log(i, arr.slice(0, i+1))
// 0, Array [ 1 ]
// 1, Array(5) [ 1, 2, 3, 4, 5 ]
// 2, Array(5) [ 1, 2, 3, 4, 5 ]
// 3, Array(5) [ 1, 2, 3, 4, 5 ]
// 4, Array(5) [ 1, 2, 3, 4, 5 ]

I observed this in the JS console in Firefox, as well as Edge.

Why does it apparently jump straight to an array of length 5 on the second iteration? I confirmed that manually calling arr.slice(0, 3) returns [1, 2, 3] as expected, so why does calling it inside the for loop change the behavior?

i is not a number and is concatenating the string and number together — dale landry
– dale landry, Commented Oct 2, 2024 at 18:55

Dylan · Accepted Answer · 2024-10-02 18:57:56Z

1

Doh, apparently by using the for-in construct, the i value is a String. So i+1 is 01, 11, 21, ....

I guess I'll swap to for(let i=0; i<arr.length; i++)

Docs for for..in state:

Receives a string property name on each iteration.

edited Oct 2, 2024 at 18:57

answered Oct 2, 2024 at 18:54

Dylan

13.9k3 gold badges42 silver badges70 bronze badges

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

4 Comments

David Over a year ago

Swapping for ... in ... with for ... of ... does the trick as well, since that iterates over the values of the array. (And also makes the + 1 unnecessary)

Dylan Over a year ago

Fair, but I don't want the values in this case. I want the indexes so I can use them for slice

ShadowRanger Over a year ago

You could also just coerce to Number by changing i+1 to +i+1; the prefix plus makes i coerce to numeric before you add the 1.

Flame Over a year ago

for...of is for arrays, for...in is for objects. Ive never seen it any other way really

Alexander Nenashev · Accepted Answer · 2024-10-02 20:54:07Z

1

Using in operator for arrays isn't recommended and widely considered as bad code since it iterates properties of an array (they're rather strings). The big problem with it also when somebody monkeypatches the prototype like Array.prototype.myEach = ... (which is also bad since creates an enumerable property).

Just use a number index:

const arr = [1,2,3,4,5]

for(let i = 1; i <= arr.length; i++) console.log(i, JSON.stringify(arr.slice(0, i)))

Another option is to use Array#keys() to iterate the indexes directly (note that this will be slower than the previous for loop since an iterator involved):

const arr = [1,2,3,4,5]

for(const i of arr.keys()) console.log(i, JSON.stringify(arr.slice(0, i + 1)))

edited Oct 2, 2024 at 20:54

answered Oct 2, 2024 at 20:13

Alexander Nenashev

26.1k3 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Why does using Array.prototype.slice during iteration behave unexpectedly? [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related