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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Reduce

8.6M/s

Reduce but with optimized parameters

311K/s

Join only valid strings

163K/s

Reduce but no template string

152K/s

Filter and join

92K/s

Join and replace false

88K/s

Fastest: Reduce (97.4x faster)

View exact numbers

✓ Reduce: 8,582,938 ops/sec
• Reduce but with optimized parameters: 311,479 ops/sec
• Join only valid strings: 163,035 ops/sec
• Reduce but no template string: 151,851 ops/sec
• Filter and join: 91,683 ops/sec
• Join and replace false: 88,111 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Reduce but with optimized parameters

690K/s

Reduce but no template string

392K/s

Reduce but no leading space 2

327K/s

Reduce

309K/s

Reduce but no leading space

307K/s

Filter and reduce

201K/s

Push valid to array and join

129K/s

Join only valid strings

124K/s

Filter and join

117K/s

Join and replace false

79K/s

View exact numbers

Test name	Executions per second
✓ Reduce but with optimized parameters	689,849 Ops/sec
Reduce but no template string	392,298 Ops/sec
Reduce but no leading space 2	326,627 Ops/sec
Reduce	309,222 Ops/sec
Reduce but no leading space	307,326 Ops/sec
Filter and reduce	201,246 Ops/sec
Push valid to array and join	129,384 Ops/sec
Join only valid strings	123,683 Ops/sec
Filter and join	116,750 Ops/sec
Join and replace false	78,562 Ops/sec

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

Go 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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Go 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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

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`