JSFiddle - React, Tailwind, and code Playground

by outis

HTML

<button onclick="bench();">Benchmark</button>
<dl>
    <dt>old</dt>
    <dd><input id="old_time"/> ms</dd>
    <dt>recursive</dt>
    <dd><input id="recur_time"/> ms</dd>
    <dt>iterative</dt>
    <dd><input id="iter_time"/> ms</dd>
</dl>

JavaScript

function makeDeepObject() {
    var root = {};
    var current = root;
    for (var i = 33, max = 136; i < max; i++) {
        var key = String.fromCharCode(i);
        var newObject = {};
        for (var j = 0; j < 25; j++) {
            newObject['a' + j] = {x: 1};
        }
        current[key] = newObject;
        for (; j < 50; j++) {
            newObject['z' + j] = {y: 2};
        }
        current = newObject;
    }
    return root;
}

window.test = makeDeepObject();


function clone_recursive(object) {
    var result = {};
    for (var key in object) {
        var value = object[key];
        if (typeof value === 'object') {
            result[key] = clone_recursive(value);
        } else {
            result[key] = value;
        }
    }
    return result;
}
    function clone_iterative(object) {
        var result = {};
        var stack = [result, object];
        var curr, base;
        while (curr = stack.pop()) {
            var base = stack.pop();
            for (var key in curr) {
                var value = curr[key];
                if (typeof value === 'object') {
                    stack.push(base[key] = {});
                    stack.push(value)
                } else {
                    base[key] = value;
                }
            }
        }
        return result;
    }
function clone_old(object) {
    var result = {};
    var queue = [{base: result, value: object}];
    var item;
    while (item = queue.shift()) {
        var current = item.value;
        var base = item.base;
        for (var key in current) {
            var value = current[key];
            if (typeof value === 'object') {
                var resultValue = base[key] = {};
                queue.push({base: resultValue, value: value});
            } else {
                base[key] = value;
            }
        }
    }
    return result;
}


window.bench = function(runs) {
    var start;
    var temp;
    
    if (! runs) {
        runs = 100;
    }
    
   ...