Run results for: Potherca: Get total of Children

Test name	Executions per second
getTotal.01.js	3608038.0 Ops/sec
getTotal.02.js	2766598.8 Ops/sec
getTotal.03.js	2395519.5 Ops/sec
getTotal.04.js	4171380.2 Ops/sec
getTotal.05.js	6006430.5 Ops/sec
getTotal.06.js	4774035.5 Ops/sec
getTotal.07.js	5343143.0 Ops/sec
getTotal.08.js	2982498.5 Ops/sec

getTotal.01.js

const 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}
]

/* 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

const 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}
]

/* 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

const 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}
]

/* 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

const 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}
]

/* 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

const 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}
]

/* 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

const 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}
]

/* 06. Move variable into function scope */

total = 0

const getTotal = data => {
    let total = 0

    data.forEach(item => {
        if (item.children) {
            total += getTotal(item.children)
        } else {
            total += item.value
        }
    })

    return total
}

total = getTotal(input)

getTotal.07.js

const 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}
]

/* 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;
}

let total = getTotal(input)

getTotal.08.js

const 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}
]

/* 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;
}

let total = getTotal(input)

Run results for: Potherca: Get total of 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