JSFiddle - React, Tailwind, and code Playground

JavaScript

(function () {
   "use strict"; 
    
    let obj = { 
        a: '1', 
        b: { something: 'else' }, 
        c: 4, 
        d: { nested: { nestedAgain: true }}
    };
    let arr = [];
    let str = "";
    
    //Object.prototype[Symbol.iterator] = function() {
    obj[Symbol.iterator] = function() {
        var keys = [];
        var ref = this;
       
        for (var key in this) {
            keys.push(key);
        }
        return {
            next: function() {
                if (this._keys && this._obj && this._index < this._keys.length) {
                    var key = this._keys[this._index];
                    //console.log("Iteration " + this._index + ", key=" + key);
                    this._index++;
                    return { value: {key: key, value: this._obj[key]}, done: false };
                } else {
                    //console.log("done, index=" + this._index + ", keys=" + this._keys);
                    return { done: true };
                }
            },
            _index: 0,
            _keys: keys,
            _obj: ref
        };
    };
    
    //console.log("Array iterator:  " + arr[Symbol.iterator]);
    //console.log("String iterator:  " + str[Symbol.iterator]);
    //console.log("Object iterator:  " + obj[Symbol.iterator]);
    
    for (var i of arr) {
        console.log(i);
    }
    for (var i of str) {
        console.log(i);
    }
    for (var i of obj) {  
        console.log(JSON.stringify(i));  
    }
    
    /*var myIterable = {};
    myIterable[Symbol.iterator] = function* () {
        yield 1;
        yield 2;
        yield 3;
    };
    
    for (var i of myIterable) {
        console.log(i);
    }*/
})();