Benchmark: Get Total of object's Children

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getTotal.01.js
getTotal.02.js
getTotal.03.js
getTotal.04.js
getTotal.05.js
getTotal.06.js
getTotal.07.js
getTotal.08.js

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 9 months ago)

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/OS: Chrome 115 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
getTotal.01.js	1346700.0 Ops/sec
getTotal.02.js	1821431.0 Ops/sec
getTotal.03.js	1830947.0 Ops/sec
getTotal.04.js	1987949.0 Ops/sec
getTotal.05.js	5673306.0 Ops/sec
getTotal.06.js	4831044.0 Ops/sec
getTotal.07.js	4845614.0 Ops/sec
getTotal.08.js	560047.3 Ops/sec

Get Total of object's Children (version: 1)

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

Comparing performance of: getTotal.01.js vs getTotal.02.js vs getTotal.03.js vs getTotal.04.js vs getTotal.05.js vs getTotal.06.js vs getTotal.07.js vs getTotal.08.js

Created: 9 months ago by: Registered User

Jump to the latest result

getTotal.01.js

getTotal.02.js

getTotal.03.js

getTotal.04.js

getTotal.05.js

getTotal.06.js

getTotal.07.js

getTotal.08.js

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A