Run results for: Get Total of object's Children

Run details:

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser: Chrome 115

Operating system: Chrome OS 14541.0.0

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
getTotal.01.js	1362131.4 Ops/sec
getTotal.02.js	1763258.6 Ops/sec
getTotal.03.js	1567120.4 Ops/sec
getTotal.04.js	1940327.4 Ops/sec
getTotal.05.js	5703014.5 Ops/sec
getTotal.06.js	4761816.0 Ops/sec
getTotal.07.js	4776120.0 Ops/sec
getTotal.08.js	564464.9 Ops/sec

Script Preparation code:

var input = [
    { "label": "A", "value": 50, "children": [
            { "label": "C", "value": 25, "children": [
                    { "label": "C1", "value": 12.5, "children": [
                            { "label": "C1a", "value": 6.25},
                            { "label": "C1b", "value": 6.25}
                        ]},
                    { "label": "C2", "value": 12.5}
                ]}
        ]},
    { "label": "B", "value": 50},
    { "label": "D", "value": 25}
]

Tests:

getTotal.01.js
/* 01. Current implementation. Working but too complex */ total = (function getTotal(data) { return data .map(item => item.children ? getTotal(item.children) : item.value) .reduce((a, b) => a + b, 0) })(input)
getTotal.02.js
/* 02. Split out the implementation and call */ let total = 0 const getTotal = data => data .map(item => item.children ? getTotal(item.children) : item.value) .reduce((a, b) => a + b, 0); total = getTotal(input)
getTotal.03.js
/* 03. Write ternary operator out as if/else statement */ let total = 0 const getTotal = data => data .map(item => { if (item.children) { return getTotal(item.children) } else { return item.value } }) .reduce((a, b) => a + b, 0); total = getTotal(input)
getTotal.04.js
/* 04. Replace reduce with forEach */ let total = 0 const getTotal = data => data .map(item => { if (item.children) { return getTotal(item.children) } else { return item.value } }) .forEach(item => total += item || 0) total = getTotal(input)
getTotal.05.js
/* 05. Move map logic into forEach */ let total = 0 const getTotal = data => data.forEach(item => { if (item.children) { getTotal(item.children) } else { total += item.value } }) total = getTotal(input)
getTotal.06.js
/* 06. Move variable into function scope */ const getTotal = data => { let total = 0 data.forEach(item => { if (item.children) { total += getTotal(item.children) } else { total += item.value } }) return total } const total = getTotal(input)
getTotal.07.js
/* 07. A better idea... */ const getTotal = data => { let total = 0; data.forEach(item => { if (item.children) { total += getTotal(item.children) } else if (item.value) { total += item.value } }) return total; } const total = getTotal(input)
getTotal.08.js
/* 08. Flatmap */ const getTotal = data => { let total = 0; data.flatMap(item => { if (item.value) { total += item.value } if (item.children) { total += getTotal(item.children) } }) return total; } const total = getTotal(input)

Run results for: Get Total of object's Children

Benchmarks to go with https://gist.github.com/Potherca/039581984faab7b0f23d2043729a14f4

getTotal.01.js

getTotal.02.js

getTotal.03.js

getTotal.04.js

getTotal.05.js

getTotal.06.js

getTotal.07.js

getTotal.08.js