Classnames — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Classnamesmedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

Classnames

medium20 min

Implement classNames(...values), a utility that joins CSS class names conditionally. Accept class strings, non-zero numbers, conditional objects, and nested arrays, then return one class-name string in traversal order.

Objects contribute their enabled keys, arrays recursively contribute their contents, and falsy values contribute nothing. The returned string must have no leading or trailing whitespace.

Requirements

Export classNames as the default function. Accept any number of arguments and return a string; no arguments returns an empty string.
Include non-empty strings and non-zero numbers converted to strings. Trim leading and trailing whitespace on each string or object key; ignore whitespace-only fragments. Preserve internal spaces in a fragment.
Ignore falsy arguments: false, null, undefined, empty strings, 0, and NaN. Standalone true contributes no class token.
For objects, include each own enumerable string key whose value is truthy. Use normal JavaScript property enumeration order; inherited, non-enumerable, and symbol keys are ignored.
Recursively visit nested arrays from left to right using the same rules. Empty arrays and objects contribute no tokens.
Keep accepted tokens in traversal order and join fragments with a single space. Preserve duplicate tokens; later false object values do not remove earlier tokens.
Do not modify any input arrays or objects. Frozen inputs and null-prototype dictionaries must work.
Do not use classnames, clsx, or another library to implement the function. This is a function exercise, not a UI challenge.
Inputs are strings, numbers, booleans, null/undefined, arrays, and class dictionaries. Cycles, custom toString behavior, functions, symbols as values, BigInt values, and class instances are outside scope.

Examples

Example 1

Input: classNames('foo', 'bar')
Output: 'foo bar'

Example 2

Input: classNames('foo', { bar: true })
Output: 'foo bar'

Example 3

Input: classNames({ 'foo-bar': true })
Output: 'foo-bar'

Example 4

Input: classNames({ 'foo-bar': false })
Output: ''

Example 5

Input: classNames({ foo: true }, { bar: true })
Output: 'foo bar'

Example 6

Input: classNames({ foo: true, bar: true })
Output: 'foo bar'

Example 7

Input: classNames({ foo: true, bar: false, qux: true })
Output: 'foo qux'

Example 8

Input: classNames('a', ['b', { c: true, d: false }])
Output: 'a b c'

Example 9

Input: classNames('foo', { bar: true, duck: false }, 'baz', { quux: true })
Output: 'foo bar baz quux'

Example 10

Input: classNames(null, false, 'bar', undefined, { baz: null }, '')
Output: 'bar'

classNames(...values) returns a string. Traverse nested arrays in order and include own object keys with truthy values.

What the tests check

Joins string arguments
Mixes strings and conditional objects
Includes hyphenated keys with truthy values
Excludes keys with false values
Accepts multiple object arguments
Includes multiple keys in one object
Skips disabled keys while preserving order
Recursively processes arrays
Handles mixed argument types
Ignores all falsy arguments
Returns an empty string with no arguments
Returns an empty string for empty containers
Handles deeply nested mixed arrays
Converts non-zero numbers to class tokens
Uses truthiness rather than strict true for object values
Ignores standalone true values
Preserves repeated tokens
Does not revoke a token disabled later
Trims fragments and ignores whitespace-only tokens
Preserves spaces within a class fragment
Includes only own enumerable string keys
Supports null-prototype dictionaries and special keys
Preserves JavaScript key enumeration order
Leaves frozen arguments unchanged
Visits shared arrays each time they appear

References

classnames on GitHub clsx on GitHub

FunctionsRecursionObjectsArraysConditional class namesTruthy and falsy valuesRecursive traversalProperty enumeration

Back

Preparing your workspace…