Classnames II — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Classnames IIhard

00:00

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

JavaScript interview question

Classnames II

hard30 min

Extend the class-name utility to deduplicate CSS classes, remove classes explicitly disabled later, and resolve function values. Process arguments and nested arrays in order to produce a clean class string.

This version uses an ordered set of individual CSS tokens. A later falsy object flag removes its class, and a later truthy flag can enable it again.

Requirements

Export classNames(...values) as the default function. Accept strings, numbers, conditional dictionaries, nested arrays, and zero-argument functions.
Split string arguments and dictionary keys on whitespace into individual tokens. Return unique active tokens separated by one space, with no boundary whitespace.
Ignore falsy standalone values and standalone true. Convert non-zero numbers to strings.
Visit arrays recursively from left to right. Process own enumerable string dictionary keys in normal JavaScript key order.
Truthy object values enable their key tokens; falsy values remove them, including tokens enabled earlier. Reenabling a removed token appends it to the end. Enabling an already active token keeps its position.
Call a standalone function once with no arguments and recursively process its return value. Call a function stored as an object flag once and use the truthiness of its result to enable or disable that key.
Propagate function exceptions. Do not mutate inputs; frozen and null-prototype records must work.
Do not use classnames or clsx. Cycles, asynchronous factories, custom toString methods, BigInt, symbols as values, and class instances are outside scope.

Examples

Example 1

Input: classNames("a", "b", "a")
Output: "a b"

Example 2

Input: classNames("a b", { a: false }, () => "c")
Output: "b c"

Example 3

Input: classNames(() => ["a", { b: () => true }])
Output: "a b"

classNames(...values) returns unique active CSS tokens after ordered additions and removals.

What the tests check

Joins and deduplicates classes
Deduplicates tokens across fragments
Recursively resolves arrays
Removes classes disabled by later objects
Removes classes using any falsy flag
Moves reenabled classes to the end
Keeps the position of an already enabled class
Invokes standalone function values
Recursively resolves factory results
Uses function conditions in dictionaries
Invokes each factory only once per occurrence
Invokes dictionary predicates once
Ignores falsy standalone values
Converts non-zero numbers to tokens
Splits and normalizes whitespace
Removes all tokens in a compound key
Ignores inherited and hidden keys
Supports null-prototype and special keys
Does not mutate frozen arrays or dictionaries
Returns an empty string for empty inputs
Propagates factory errors
Applies nested removals in traversal order

References

classnames library

FunctionsRecursionSetsObjectsDeduplicationConditional removalsFunction valuesOrdered traversal

Back

Preparing your workspace…