Cannot figure out how to use "for ... in" in JavaScript

Question

The following code expects that all the properties of this.triggeredTests are arrays and calculates their total length:

    let savedLen = 0;

    const values = Object.values(this.triggeredTests);

    for (let i = 0; i < values.length; i += 1) {
      savedLen += values[i].length;
    }

if I try to rewrite this code with for ... in:

    for (const val in values) {
      savedLen += val.length;
    }

I got some annoying errors:

  ✘  http://eslint.org/docs/rules/guard-for-in          The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype
  src\components\entity\Test.vue:171:9
          for (const val in values) {
          ^

  ✘  http://eslint.org/docs/rules/no-restricted-syntax  for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array
  src\components\entity\Test.vue:171:9
          for (const val in values) {
          ^


✘ 2 problems (2 errors, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-restricted-syntax
  1  http://eslint.org/docs/rules/guard-for-in

Is it possible to make this for ... in work?

I am to sure what compiler I use, but at least I know that I am working in Node.js v8.12.0 environment with NPM.

EDIT1:

If I use for ... of:

    for (const val of values) {
        savedLen += val.length;
    }

I am getting another error:

    ✘  http://eslint.org/docs/rules/no-restricted-syntax  iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations
    src\components\entity\Test.vue:171:9
            for (const val of values) {
            ^

EDIT2:

This does not produce errors:

    const values = Object.values(this.triggeredTests);
    const sumCalculator = (accumulator, currentValue) => accumulator + currentValue.length;
    const savedLen = values.reduce(sumCalculator, 0);

Answer 1

I believe you are confusing syntax with python, node is enumerating values of iterable objects using for-of

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Answer 2

Your error are indeed due to eslint and not for loop in javascript. You could probably paste what you have into chrome dev tools and it would work just fine without the compilation.

Specifically these lints

• https://eslint.org/docs/rules/guard-for-in
• https://eslint.org/docs/rules/no-restricted-syntax

Both of these guard against oddness in for loops related to objects in that it will iterate over all the elements.

In this case if that is a basic array, i would recommend using

values.forEach(iterator)

Answer 3

I wouldn't describe the error as annoying here - it's trying to protect you from doing something you don't intend. Take the following example code:

Array.prototype.someFunc = function () { }

const someObject = { a: 'A', b: 'B', c: 'C' };
const someObjectValues = Object.values(someObject);

for (const v in someObjectValues) {
    console.log(v);
}

There are at least two problems here:

1. v will be the index of the element: instead of A, B and C, you'll get 0, 1 and 2.
2. You'll also get someFunc, which is clearly not intended.

The simplest solution here is to take note of the linting errors and leave the code as it was.

Answer 4

You are looping through an array. The for...of loop is what you are looking for. If you want to use for...in then try this

 for (const val in values) {
      savedLen += values[val].length;
    }

Also have a look here for some good info on both loops https://bitsofco.de/for-in-vs-for-of/