How can a Javascript object become iterable with for…of statement? [duplicate]

Answer 1

To use for...of loop you should define an appropriate iterator for your object using [Symbol.iterator] key.

Here is one possible implementation:

let options = {
  male: 'John',
  female: 'Gina',
  rel: 'Love',
  [Symbol.iterator]: function * () {
    for (let key in this) {
      yield [key, this[key]] // yield [key, value] pair
    }
  }
}

Though, in most cases it'll be better to iterate over objects using plain for...in loop instead.

Alternatively you could convert your object to iterable array using Object.keys, Object.values or Object.entries (ES7).

Answer 2

If you dont want to use generator syntax, you can use another way define iterator function.

    var options = {
        male: 'John',
        female: 'Gina',
        rel: 'Love',
        [Symbol.iterator]: function () {
            var self = this;
            var values = Object.keys(this);
            var i = 0;
            return {
                next: function () {
                    return {
                        value: self[values[i++]],
                        done: i > values.length
                    }
                }
            }
        }
    };

    for (var p of options) {
        console.log(`Property ${p}`);
    }

Answer 3

Plain objects (options in this case) are not iterable in ES6. You need to either define an iterator for your object or do something like:

for(let k of Object.keys(options)) {
  console.log(`Property ${k}, ${options[k]}`);
};