Run results for: classNames

Test name	Executions per second
✓ Helper function for each className	109,020,304 Ops/sec
Reduce but no template string	22,668,918 Ops/sec
Reduce but with optimized parameters	22,206,242 Ops/sec
Reduce	21,684,004 Ops/sec
Join only valid strings	15,350,356 Ops/sec
Filter and join	9,785,092 Ops/sec
Join and replace false	9,487,267 Ops/sec

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