Run results for: classNames

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Browser: Firefox 138

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Reduce	192728.0 Ops/sec
Filter and join	86013.7 Ops/sec
Join and replace false	84137.9 Ops/sec
Join only valid strings	153744.8 Ops/sec
Reduce but no template string	147800.0 Ops/sec
Reduce but with optimized parameters	282750.8 Ops/sec
Push valid to array and join	90827.7 Ops/sec
Filter and reduce	88922.9 Ops/sec
Reduce but no leading space	152753.2 Ops/sec
Reduce but no leading space 2	150806.3 Ops/sec

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"); }

Run results for: classNames

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