Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is JavaScript's For...In loop not recommended for arrays? [duplicate]

I read somewhere (sorry, I can't find the link) that the For...In loop is not recommended for arrays. It is said here: http://www.openjs.com/articles/for_loop.php that it is meant for associative arrays, and in http://www.w3schools.com/js/js_loop_for_in.asp that is for iterating through all the properties of an object (It does not say that it can be used on arrays). I do not know who to believe. I don't want this question to become a debate. I just want to know if I could use this in my code without unforeseen side effects. Thanks!

like image 371
John Bautista Avatar asked Mar 11 '11 06:03

John Bautista


People also ask

Can you use for in loops for arrays?

For Loop to Traverse Arrays. We can use iteration with a for loop to visit each element of an array. This is called traversing the array. Just start the index at 0 and loop while the index is less than the length of the array.

Which loop works only on arrays?

The foreach loop works only on arrays, and is used to loop through each key/value pair in an array.

What are the pros and cons of for loop in JavaScript?

Pros: It's straightforward. You loop through every single element for a given string or array . Cons: It's very restricting, you can't determine where to start or how long you want to go on for. Incrementing is always set to one at a time.

Which loop is more efficient in JavaScript?

The fastest loop is a for loop, both with and without caching length delivering really similar performance.


1 Answers

An array is an object, and array elements are simply properties with the numeric index converted to string. For example, arr[123] refers to a property "123" in the array object arr.

The for ... in construct works on all objects, not just arrays, and that is cause for confusion.

When somebody for ... in an array, most often the programmer intends to iterate just all the elements, even most likely in order. For example, if the array holds a bunch of numbers, then the programmer most likely intends to iterate a stream of numbers. The semantics is so similar to array iteration in other programming languages that it is very easy to get confused.

In JavaScript, this construct does not iterate array elements in order. It iterates all the array's property names (including the names of inherited prototype functions, any properties added to it, any other non-element properties added to it etc.), and not in order at all. In earlier browsers, it will even find the property length, although in recent browsers these properties are now defined to be hidden for this exact reason -- people keep tripping on it!

With the array of integers above, you get not a stream of numbers, but a stream of text strings. And not the element values, but the names of the properties (which are just the numeric indices not in any order). This is most likely not what the programmer means, if he/she comes from another programming language. If the elements stored in the array happen to be similar numeric values, it confuses the hell out of everybody.

That's why you shouldn't do it. You shouldn't use a language construct that looks like it does obvious things, but actually does things that are completely different. It creates bugs that are very obscure and very difficult to find.

like image 96
Stephen Chung Avatar answered Oct 05 '22 23:10

Stephen Chung