classNames

Benchmark created on


Test runner

Ready to run.

Testing in
TestOps/sec
array custom
const cx = (...args) => {
  const classSet = new Set();
  args.forEach(arg => {
    if (typeof arg === 'string') {
      arg.split(' ').forEach(cls => classSet.add(cls));
    }
  });
  return [...classSet].join(' ');
};

cx('one two three', 'four five six', 'seven eight nine');
ready
Built-ins
const cx = (...args) => {
  return [...new Set(args.join(' ').split(' '))].join(' ');
};

cx('one two three', 'four five six', 'seven eight nine');
ready
package
const hasOwn = {}.hasOwnProperty;

function classNames () {
	let classes = '';

	for (let i = 0; i < arguments.length; i++) {
		const arg = arguments[i];
		if (arg) {
			classes = appendClass(classes, parseValue(arg));
		}
	}

	return classes;
}

function parseValue (arg) {
	if (typeof arg === 'string') {
		return arg;
	}

	if (typeof arg !== 'object') {
		return '';
	}

	if (Array.isArray(arg)) {
		return classNames.apply(null, arg);
	}

	if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
		return arg.toString();
	}

	let classes = '';

	for (const key in arg) {
		if (hasOwn.call(arg, key) && arg[key]) {
			classes = appendClass(classes, key);
		}
	}

	return classes;
}

function appendClass (value, newClass) {
	if (!newClass) {
		return value;
	}

	return value ? (value + ' ' + newClass) : newClass;
}

classNames('one two three', 'four five six', 'seven eight nine');
ready
package/dedupe
// Don't inherit from Object so we can skip hasOwnProperty check later.
function StorageObject () {}
StorageObject.prototype = Object.create(null);

function classNames () {
	const classSet = new StorageObject();
	appendArray(classSet, arguments);

	let classes = '';

	for (const key in classSet) {
		if (classSet[key]) {
			classes += classes ? (' ' +  key) : key;
		}
	}

	return classes;
}

function appendValue (classSet, arg) {
	if (!arg) return;
	const argType = typeof arg;

	if (argType === 'string') {
		appendString(classSet, arg);
	} else if (Array.isArray(arg)) {
		appendArray(classSet, arg);
	} else if (argType === 'object') {
		appendObject(classSet, arg);
	}
}

const SPACE = /\s+/;

function appendString (classSet, str) {
	const array = str.split(SPACE);
	const length = array.length;

	for (let i = 0; i < length; i++) {
		classSet[array[i]] = true;
	}
}

function appendArray (classSet, array) {
	const length = array.length;

	for (let i = 0; i < length; i++) {
		appendValue(classSet, array[i]);
	}
}

const hasOwn = {}.hasOwnProperty;

function appendObject (classSet, object) {
	if (
		object.toString !== Object.prototype.toString &&
		!object.toString.toString().includes('[native code]')
	) {
		classSet[object.toString()] = true;
		return;
	}

	for (const k in object) {
		if (hasOwn.call(object, k)) {
			// Set value to false instead of deleting it to avoid changing object structure.
			// https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/#de-referencing-misconceptions
			classSet[k] = !!object[k];
		}
	}
}

classNames('one two three', 'four five six', 'seven eight nine');
ready
last one
const cx = (...args) => {
  const matches = {};
  let classList = '';
  args.forEach((arg, k) => {
    if (typeof arg === 'string') {
      if(!matches[arg]) {
        arg.split(' ').forEach(cls => {
          if(!matches[cls]) {
            matches[cls] = true;
            classList += `${cls} `;
          }
        });
      }
    }
  });
  return classList.trim();
};
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.