title: Incrementing counter in a javascript iterator
body: <p>I am trying to increment a counter on the js iterator.
  Naturally, the index is re-initialized. Wondering what the standard practice is for keeping a counter in scope in js iterator without re-initializing the index variable.</p>
  
  <p>One thought is to keep the index as a global property inside Customers, but somehow I feel that's not a good way to do it
  Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log(`Custom Iterator`)
  
  let store = {
    customers: [{
      id: 1,
      name: `Ali`,
      food: [1, 3],
    }, {
      id: 2,
      name: `Usman`,
      food: [2]
    }],
    foods: [{
      id: 1,
      name: `Waffles`
    }, {
      id: 2,
      name: `Fries`
    }, {
      id: 3,
      name: `Pizza`
    }]
  }
  
  let Customers = {
    [Symbol.iterator]: () =&gt; {
      return {
        index: 0,
        next: () =&gt; {
         let index = 0;
         console.log(index);
          while (index &lt;= store.customers.length) {
            return {
              value: store.customers[index],
              done: false
            }
            index++;
          }
          return {
            done: true
          }
        }
      }
    }
  }
  
  let iterator = Customers[Symbol.iterator]();
  console.log(iterator.next().value);
  console.log(iterator.next().value);
  console.log(iterator.next().value);
  
  
  /* for (let customer of Customers) {
    console.log(customer);
  } */</code></pre>
  </div>
  </div>
  </p>