Two Approaches To _.reduce()

Using two different approaches to the lodash reduce() function. Using _.pluck() and individual calls to _.reduce(). Or, using one all to _.reduce() with and initial accumulator.

HTML

<h1>First Approach</h1>
<ul>
    <li id="first-cpu"></li>
    <li id="first-mem"></li>
    <li id="first-disk"></li>
    <li id="first-net"></li>
</ul>

<h1>Second Approach</h1>
<ul>
    <li id="second-cpu"></li>
    <li id="second-mem"></li>
    <li id="second-disk"></li>
    <li id="second-net"></li>
</ul>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
}

JavaScript

// Sample data
var machines = [
    { cpu: 0, mem: 20, disk: 30, net: 24 },
    { cpu: 50, mem: 12, disk: 83, net: 43 },
    { cpu: 46, mem: 78, disk: 23, net: 34 },
    { cpu: 33, mem: 49, disk: 33, net: 28 },
    { cpu: 44, mem: 19, disk: 57, net: 34 }
];

// First approach uses reduce with pluck, resulting in 4 calls to reduce.
(function() {
    
    function accumulate( sum, num ) {
        return sum + num;    
    }

    var length = machines.length,
        cpu = _.reduce( _.pluck( machines, "cpu" ), accumulate ) / length,
        mem = _.reduce( _.pluck( machines, "mem" ), accumulate ) / length,
        disk = _.reduce( _.pluck( machines, "disk" ), accumulate ) / length,
        net = _.reduce( _.pluck( machines, "net" ), accumulate ) / length;

    document.getElementById( "first-cpu" ).innerHTML = "CPU " + cpu;
    document.getElementById( "first-mem" ).innerHTML = "Mem " + mem;
    document.getElementById( "first-disk" ).innerHTML = "Disk " + disk;
    document.getElementById( "first-net" ).innerHTML = "Net " + net;
    
})();

// Second approach uses an initial accumulator object, and requires only 1 reduce call.
(function() {
    
    function accumulate( totals, machine ) {
        return {
            cpu: totals.cpu + machine.cpu,
            mem: totals.mem + machine.mem,
            disk: totals.disk + machine.disk,
            net: totals.net + machine.net
        };
    }

    var length = machines.length,
        result = _.reduce( machines, accumulate, { cpu: 0, mem: 0, disk: 0, net: 0 } );

    document.getElementById( "second-cpu" ).innerHTML = "CPU " + result.cpu / length;
    document.getElementById( "second-mem" ).innerHTML = "Mem " + result.mem / length;
    document.getElementById( "second-disk" ).innerHTML = "Disk " + result.disk / length;
    document.getElementById( "second-net" ).innerHTML = "Net " + result.net / length;
    var arr = {10,10,10};
   var x= _.reduce(arr, function(amt, num){
   debugger;
    return amt +...