FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Classnames

20mins

classnames is a utility function to conditionally join CSS class names together.

Your task: Implement a classNames(...args) function that:

  • Accepts strings, objects, arrays, or a mix of them.
  • Returns a single space-separated string of class names.
  • Ignores falsey values (false, null, undefined, 0, "").
  • Flattens arrays recursively.
  • Includes object keys if their values are truthy.

Examples

classNames('foo', 'bar'); // 'foo bar' classNames('foo', { bar: true }); // 'foo bar' classNames({ foo: true, bar: false, qux: true }); // 'foo qux' classNames('a', ['b', { c: true, d: false }]); // 'a b c' classNames( 'foo', { bar: true, duck: false }, 'baz', { quux: true }, ); // 'foo bar baz quux' classNames(null, false, 'bar', undefined, { baz: null }, ''); // 'bar'

Code Editor

JavaScript Function

00:00
Loading...

Test Cases

No test results yet

Click "Run" to execute tests