Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
classNames
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=602249" width="100%" height="500px"></iframe>
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
16946464.0 Ops/sec
Filter
9746966.0 Ops/sec
Replace false
9438107.0 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"); }