Forin loop in different browsers javascript

Question

I'm testing the for...in loop in javascript like this:

let test = ["hello"];

for (let index in test) {
  console.log(index);
}

With this example, in Chromium this prints something like this:

And in Firefox and Chrome the result is this:

Can someone explain why get different outputs in this case?

Answer 1

The reason seems to be that the page where you're trying this uncludes the Prototype framework. It has a very old school approach by enhancing the native prototypes in JavaScript to provide convenience methods.

let test = ["hello"];

for (let index in test) {
  console.log(index);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js" integrity="sha512-C4LuwXQtQOF1iTRy3zwClYLsLgFLlG8nCV5dCxDjPcWsyFelQXzi3efHRjptsOzbHwwnXC3ZU+sWUh1gmxaTBA==" crossorigin="anonymous"></script>

This prints

0
each
eachSlice
all
any
collect
detect
findAll
select
grep
include
member
inGroupsOf
inject
invoke
max
min
partition
pluck
reject
sortBy
toArray
zip
size
inspect
_reverse
_each
clear
first
last
compact
flatten
without
uniq
intersect
clone

Compare with iterating over a normal un-enhanced array:

let test = ["hello"];

for (let index in test) {
  console.log(index);
}

This prints

0

The practice of changing the native prototypes has since become a frowned upon

• partly for the reason you see here - you get a lot more results than you need or expect. Also relevant is Why is using "for...in" for array iteration a bad idea?
• another reason is that it can clash with future enhancements of native prototypes. This showed up as a real problem back when the ES6 draft wanted to include a String#contains and Array#contains methods but the MooTools library already implemented them and thus lead to a breaking change (see also on ESDiscuss). The methods had to be renamed to the less intuitive String#includes and Array#includes