1

I'm working on a simple webpage project using html, css and javascript. I got a bug, then I located where is the problem:

const myPictures = document.querySelectorAll("div#captcha table img")
console.log(myPictures)
for(let i in myPictures)
    console.log(i)

And there is the console output:

enter image description here

I don't get what's going on here. I thought it will go until 8 only.

palmarbg
  • 159
  • 7
  • Use `hasOwnProperty` to filter inheritted properties. – Code Spirit Jun 13 '22 at 13:23
  • 2
    *"The for...in statement iterates over all enumerable properties of an object"* [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) – derpirscher Jun 13 '22 at 13:24
  • Why would you use a for in loop? Use `forEach` – epascarello Jun 13 '22 at 13:25
  • @CodeSpirit or just not use `for..in` since it's not what it's for here. – VLAZ Jun 13 '22 at 13:25
  • You are maybe confusing the `for .. in` loop with the [`for .. of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loop. Whereas the first iterates over the properties of an object, the second is specifically designed to iterate over the values of an iterable object (like a `NodeList` or an `array`) – derpirscher Jun 13 '22 at 13:33
  • @VLAZ Its perferctly fine to use here (in JS anything is an object anyways) even though there may be easier solutions. Nonetheless you should still always include `hasOwnProperty` in all for..in loops. – Code Spirit Jun 13 '22 at 13:47
  • @CodeSpirit having to use `hasOwnProperty()` suggests it's not correct. It's not "fine", it's just trying to fit a square peg in a round hole. Or a `for..in` into traversing a collection, if you wish. There are more appropriate constructs and alternatives for iterating over a NodeList (or any other array-like or collection). Just because something *can* be used, doesn't mean it *should*. – VLAZ Jun 13 '22 at 13:51
  • @VLAZ Using `hasOwnProperty` in for..in loops is best practice and recommended. In the end arrays are objects too in JS. Maybe now his NodeList is iterable but on the next object he will have the same issue where inherited props are printed requiring the usage of `hasOwnProperty` in the loop. https://eslint.org/docs/rules/guard-for-in – Code Spirit Jun 13 '22 at 13:54
  • @CodeSpirit `hasOwnProperty` is best practice *because `for..in` is bad at iterating collections*. The entire reason to use it is because `for..in` is not the correct tool for the job. You're arguing in favour of using a hammer because it sort of works on screws. – VLAZ Jun 13 '22 at 13:59
  • @CodeSpirit Yes, using `hasOwnPropery` in `for .. in` loops may be required for various reasons. But that doesn't change the fact, that `for .. in` loops are generally not best practice for iterating over iterable objects (or collections) like a `NodeList`. That's what a `for .. of` loop is there for, or even a simpe standard `for` loop. – derpirscher Jun 13 '22 at 14:25

0 Answers0