Benchmark: classNames - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Reduce
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Filter and join
const classes = (...classNames) => classNames.filter(Boolean).join(' '); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Join and replace false
const classes = (...classNames) => classNames.join(' ').replace('false', ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Join only valid strings
const classes = (...classNames) => classNames.join(' '); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 ? 'nope' : null, undefined, true ? 'this goes in' : null, "false"===false ? "get out" : null, "another class", "another string"); }
Reduce but no template string
const classes = (...classNames) => classNames.reduce((res, className) => (className ? res + " " + className : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but with optimized parameters
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub another class another string', 1 === 2 && 'nope', true && 'this goes in', "false"===false && "get out"); }
Push valid to array and join
const classes = (...classNames) => { const res = []; classNames.forEach((cn) => { if (cn){ res.push(cn); } }) return res.join(" "); } for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Filter and reduce
const classes = (...classNames) => classNames.filter(Boolean).reduce((res, className) => `${res} ${className}`, ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but no leading space
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res}${res?" ":""}${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but no leading space 2
const classes = (...classNames) => classNames.reduceRight((res, className) => (className ? `${className} ${res}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Filter and join
Join and replace false
Join only valid strings
Reduce but no template string
Reduce but with optimized parameters
Push valid to array and join
Filter and reduce
Reduce but no leading space
Reduce but no leading space 2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce	309222.0 Ops/sec
Filter and join	116749.7 Ops/sec
Join and replace false	78562.0 Ops/sec
Join only valid strings	123683.3 Ops/sec
Reduce but no template string	392297.7 Ops/sec
Reduce but with optimized parameters	689848.9 Ops/sec
Push valid to array and join	129383.7 Ops/sec
Filter and reduce	201246.3 Ops/sec
Reduce but no leading space	307326.1 Ops/sec
Reduce but no leading space 2	326627.1 Ops/sec

Related benchmarks:

classNames (version: 10)

Comparing performance of: Reduce vs Filter and join vs Join and replace false vs Join only valid strings vs Reduce but no template string vs Reduce but with optimized parameters vs Push valid to array and join vs Filter and reduce vs Reduce but no leading space vs Reduce but no leading space 2

Created: one year ago by: Registered User

Jump to the latest result

Reduce

Filter and join

Join and replace false

Join only valid strings

Reduce but no template string

Reduce but with optimized parameters

Push valid to array and join

Filter and reduce

Reduce but no leading space

Reduce but no leading space 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A