JSFiddle - React, Tailwind, and code Playground

JavaScript

var normalArray = [1];
var obj = {};

var originalSymbol = Symbol.iterator;
Symbol.iterator = Symbol('Symbol.iterator');

obj[originalSymbol] = function () {
    console.log('original iterator');
    return [].keys();
};
obj[Symbol.iterator] = function () {
    console.log('wtf, does the engine not keep a reference to the original Symbol.iterator?');
    return [].keys();
};
for (var key of obj) { console.log(key, obj[key]); }

console.log(Array.prototype[originalSymbol] === Array.prototype[Symbol.iterator], 'how are these equal when the second one never existed?');
normalArray[originalSymbol] = function () {
    console.log('overwriting the original iterator');
    return [].keys();
};
// since line 12 was logged, and not line 6, that means this should not work:
for (var item of normalArray) { console.log('this still works somehow?', item); }

normalArray[Symbol.iterator] = normalArray[originalSymbol];
// maybe since line 18 was logged, builtin non-object instances maybe use the original iterator value, so the next line shouldn't log:
for (var item of normalArray) { console.log('why does this work when my custom iterator used the new Symbol.iterator value?', item); }