Run results for: manual vs filter

Run details:

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

Browser: Firefox 57

Operating system: Mac OS X 10.14

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
classnames	26201190.0 Ops/sec
classnames flex	19576160.0 Ops/sec

Script Preparation code:

function classnames2(a, b) {
    return a ? (b ? `${a} ${b}` : a) : b || '';
}

function classnames3(a, b, c) {
    return a
        ? b
            ? c
                ? `${a} ${b} ${c}`
                : `${a} ${b}`
            : c
            ? `${a} ${c}`
            : a
        : classnames2(b, c);
}

function classnamesFlex(...classes) {
    return classes.filter(Boolean).join(' ');
}

// explicitly handling 2 arguments handles most of our use cases efficiently
function classnames(a, b, c) {
    const numArgs = arguments.length;

    if (numArgs === 1) {
        return a || '';
    } else if (numArgs === 2) {
        return classnames2(a, b);
    } else if (numArgs === 3) {
        return classnames3(a, b, c);
    } else {
        return classnamesFlex.apply(null, arguments);
    }
}

Tests:

classnames
classnames(null, "a");
classnames flex
classnamesFlex(null, "a");

Run results for: manual vs filter

classnames

classnames flex