var Component=(()=>{var b=Object.create;var l=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),C=(s,e)=>{for(var n in e)l(s,n,{get:e[n],enumerable:!0})},i=(s,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of v(e))!k.call(s,a)&&a!==n&&l(s,a,{get:()=>e[a],enumerable:!(c=A(e,a))||c.enumerable});return s};var T=(s,e,n)=>(n=s!=null?b(j(s)):{},i(e||!s||!s.__esModule?l(n,"default",{value:s,enumerable:!0}):n,s)),x=s=>i(l({},"__esModule",{value:!0}),s);var d=w((E,o)=>{o.exports=_jsx_runtime});var H={};C(H,{default:()=>m,frontmatter:()=>V});var r=T(d());var t=MDXCodeBlock;var h=`/** * @param {...(any|Object|Array)} args * @return {string} */ export default function classNames(...args) { // Each recursive call returns one space-joined segment; the parent call keeps // those segments in the original left-to-right order. const classes = []; args.forEach((arg) => { // Ignore falsey values. if (!arg) { return; } const argType = typeof arg; // Handle string and numbers. if (argType === 'string' || argType === 'number') { classes.push(arg); return; } // Arrays recurse before objects because \`typeof []\` is \`'object'\`. if (Array.isArray(arg)) { classes.push(classNames(...arg)); return; } // Only own truthy keys contribute classes. if (argType === 'object') { for (const key in arg) { if (Object.hasOwn(arg, key) && arg[key]) { classes.push(key); } } return; } }); return classes.join(' '); } `;var u=`export type ClassValue = | ClassArray | ClassDictionary | string | number | null | boolean | undefined; export type ClassDictionary = Record; export type ClassArray = Array; export default function classNames(...args: Array): string { // Each recursive call returns one space-joined segment; the parent call keeps // those segments in the original left-to-right order. const classes: Array = []; args.forEach((arg) => { // Ignore falsey values. if (!arg) { return; } const argType = typeof arg; // Handle string and numbers. if (argType === 'string' || argType === 'number') { classes.push(String(arg)); return; } // Arrays recurse before objects because \`typeof []\` is \`'object'\`. if (Array.isArray(arg)) { classes.push(classNames(...arg)); return; } // Only own truthy keys contribute classes. if (argType === 'object') { const objArg = arg as ClassDictionary; for (const key in objArg) { if (Object.hasOwn(objArg, key) && objArg[key]) { classes.push(key); } } return; } }); return classes.join(' '); } `;var p=`export type ClassValue = | ClassArray | ClassDictionary | string | number | null | boolean | undefined; export type ClassDictionary = Record; export type ClassArray = Array; export default function classNames(...args: Array): string { const classes: Array = []; // Thread the same accumulator array through every recursive call. function classNamesImpl( classesArr: Array, ...args: Array ) { args.forEach((arg) => { // Ignore falsey values. if (!arg) { return; } const argType = typeof arg; // Handle string and numbers. if (argType === 'string' || argType === 'number') { classesArr.push(String(arg)); return; } // Arrays recurse before objects because \`typeof []\` is \`'object'\`. if (Array.isArray(arg)) { for (const cls of arg) { classNamesImpl(classesArr, cls); } return; } // Only own truthy keys contribute classes. if (argType === 'object') { const objArg = arg as ClassDictionary; for (const key in objArg) { if (Object.hasOwn(objArg, key) && objArg[key]) { classesArr.push(key); } } return; } }); } classNamesImpl(classes, ...args); return classes.join(' '); } `;var g=`export type ClassValue = | ClassArray | ClassDictionary | string | number | null | boolean | undefined; export type ClassDictionary = Record; export type ClassArray = Array; export default function classNames(...args: Array): string { const classes: Array = []; // Every recursive call writes into the same outer collection. function classNamesImpl(...args: Array) { args.forEach((arg) => { // Ignore falsey values. if (!arg) { return; } const argType = typeof arg; // Handle string and numbers. if (argType === 'string' || argType === 'number') { classes.push(String(arg)); return; } // Arrays recurse before objects because \`typeof []\` is \`'object'\`. if (Array.isArray(arg)) { for (const cls of arg) { classNamesImpl(cls); } return; } // Only own truthy keys contribute classes. if (argType === 'object') { const objArg = arg as ClassDictionary; for (const key in objArg) { if (Object.hasOwn(objArg, key) && objArg[key]) { classes.push(key); } } return; } }); } classNamesImpl(...args); return classes.join(' '); } `;var f=`export type ClassValue = | ClassArray | ClassDictionary | string | number | null | boolean | undefined; export type ClassDictionary = Record; export type ClassArray = Array; const hasOwn = Object.prototype.hasOwnProperty; export default function classNames(...args: Array): string { const classes: Array = []; for (let i = 0; i < args.length; i++) { const arg = args[i]; if (!arg) continue; const argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(String(arg)); } else if (Array.isArray(arg)) { if (arg.length) { const inner = classNames(...arg); if (inner) { classes.push(inner); } } } else if (argType === 'object') { if (arg.toString === Object.prototype.toString) { const objectArg = arg as ClassDictionary; for (const key in objectArg) { if (hasOwn.call(objectArg, key) && objectArg[key]) { classes.push(key); } } } else { classes.push(arg.toString()); } } } return classes.join(' '); } `;var V=void 0;function y(s){let e={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:"Clarification questions"}),` `,(0,r.jsx)(e.p,{children:"These clarifications define which input shapes the class-name flattener should accept and which ones it should ignore."}),` `,(0,r.jsxs)(e.blockquote,{children:[` `,(0,r.jsx)(e.p,{children:"Can there be duplicated classes in the input? Should the output contain duplicated classes?"}),` `]}),` `,(0,r.jsx)(e.p,{children:"Yes, there can be. In this case, the output will contain duplicate classes. However, this case is not tested."}),` `,(0,r.jsxs)(e.blockquote,{children:[` `,(0,r.jsxs)(e.p,{children:["What if a class was added and then later turned off? E.g. ",(0,r.jsx)(e.code,{children:"classNames('foo', { foo: false })"}),"?"]}),` `]}),` `,(0,r.jsxs)(e.p,{children:["In the library implementations, the final result will be ",(0,r.jsx)(e.code,{children:"'foo'"}),". However, this case is not tested."]}),` `,(0,r.jsx)(e.h2,{children:"Solution"}),` `,(0,r.jsx)(e.p,{children:"The subtle part is the recursive nature of the function. Separate the solution into two parts:"}),` `,(0,r.jsxs)(e.ol,{children:[` `,(0,r.jsx)(e.li,{children:"Handling each data type."}),` `,(0,r.jsx)(e.li,{children:"Recursing for array types."}),` `]}),` `,(0,r.jsxs)(e.p,{children:["Use a ",(0,r.jsx)(e.code,{children:"classes"})," data structure to collect all classes for the lifetime of the function and make them available to recursive calls. The solution uses an ",(0,r.jsx)(e.code,{children:"Array"})," for the collection, but a ",(0,r.jsx)(e.code,{children:"Set"})," also works."]}),` `,(0,r.jsx)(e.p,{children:"To recursively process each argument and collect the classes, a few approaches come to mind:"}),` `,(0,r.jsxs)(e.ol,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Pure recursive function"}),": Recursive calls do not depend on external values nor modify the arguments."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Inner recursive helper that modifies an external value"}),": The collection is defined at the top level of the function. Inner recursive functions modify the external top-level collection by adding to that collection."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Inner recursive helper that modifies the argument"}),": The collection is defined at the top level of the function, passed as an argument into recursive calls, and recursive calls add to the argument."]}),` `]}),` `,(0,r.jsx)(e.p,{children:"Handle each data type as follows:"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Falsy values"}),": Ignore."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"String"}),": Add it to the ",(0,r.jsx)(e.code,{children:"classes"})," collection."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Number"}),": Add it to the ",(0,r.jsx)(e.code,{children:"classes"})," collection."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Array"}),": Recursively invoke the ",(0,r.jsx)(e.code,{children:"classNames"})," function or inner recursive function."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Object"}),": Loop through the key/value pairs and add keys with truthy values to the ",(0,r.jsx)(e.code,{children:"classes"})," collection."]}),` `]}),` `,(0,r.jsxs)(e.p,{children:["The data-type order is part of the property. Check falsy values before anything else, then arrays before generic objects, because arrays also report ",(0,r.jsx)(e.code,{children:"typeof value === 'object'"}),". Object values are conditions; object keys are the class names."]}),` `,(0,r.jsxs)(e.p,{children:["For the nested example ",(0,r.jsx)(e.code,{children:"classNames('a', ['b', { c: true, d: false }])"}),", the recursion behaves like this:"]}),` `,(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Value being processed"}),(0,r.jsx)(e.th,{children:"Contribution"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"'a'"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"a"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"['b', { c: true, d: false }]"})}),(0,r.jsx)(e.td,{children:"recurse into each item"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"'b'"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"b"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"{ c: true, d: false }"})}),(0,r.jsxs)(e.td,{children:[(0,r.jsx)(e.code,{children:"c"})," only"]})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:"final join"}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"a b c"})})]})]})]}),` `,(0,r.jsx)(e.h3,{children:"Approach 1: Pure recursive function"}),` `,(0,r.jsxs)(e.p,{children:["In this approach, the ",(0,r.jsx)(e.code,{children:"classNames"})," function calls itself and its return value is a string that can be composed by parent recursive calls."]}),` `,(0,r.jsx)(t,{languages:{jsx:h,tsx:u}}),` `,(0,r.jsx)(e.h3,{children:"Approach 2: Inner recursive helper that modifies an external value"}),` `,(0,r.jsxs)(e.p,{children:["In this approach, an inner ",(0,r.jsx)(e.code,{children:"classNamesImpl"})," helper function is defined and it accesses the top-level ",(0,r.jsx)(e.code,{children:"classes"})," collection within recursive calls. The helper function does not return anything; its main purpose is to process each argument and add them to ",(0,r.jsx)(e.code,{children:"classes"}),"."]}),` `,(0,r.jsx)(t,{children:g}),` `,(0,r.jsx)(e.h3,{children:"Approach 3: Inner recursive helper that modifies the argument"}),` `,(0,r.jsxs)(e.p,{children:["In this approach, an inner ",(0,r.jsx)(e.code,{children:"classNamesImpl"})," helper function is defined and it accepts a ",(0,r.jsx)(e.code,{children:"classesArr"})," argument. The ",(0,r.jsx)(e.code,{children:"classesArr"})," is modified and passed along within recursive calls and all ",(0,r.jsx)(e.code,{children:"classNamesImpl"})," calls reference the same instance of ",(0,r.jsx)(e.code,{children:"classesArr"}),". The helper function does not return anything; its main purpose is to process each argument and add them to the ",(0,r.jsx)(e.code,{children:"classesArr"})," argument."]}),` `,(0,r.jsx)(t,{children:p}),` `,(0,r.jsx)(e.h2,{children:"Edge cases"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:["Falsy values are ignored before type handling, so ",(0,r.jsx)(e.code,{children:"null"}),", ",(0,r.jsx)(e.code,{children:"undefined"}),", ",(0,r.jsx)(e.code,{children:"false"}),", ",(0,r.jsx)(e.code,{children:"''"}),", and ",(0,r.jsx)(e.code,{children:"0"})," do not add classes."]}),` `,(0,r.jsx)(e.li,{children:"Non-zero numbers are converted to class tokens."}),` `,(0,r.jsxs)(e.li,{children:["Arrays must be handled before objects because ",(0,r.jsx)(e.code,{children:"typeof []"})," is ",(0,r.jsx)(e.code,{children:"'object'"}),"."]}),` `,(0,r.jsx)(e.li,{children:"Object keys are included only when their own value is truthy; prototype keys are skipped."}),` `,(0,r.jsx)(e.li,{children:"Duplicate class names are preserved in this version. De-duplication is a follow-up, not part of the base rule."}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Follow-up: De-duplicating classes"}),` `,(0,r.jsxs)(e.p,{children:["The provided solution does not handle de-duplicating classes, which would be a nice optimization. Without de-duplication, ",(0,r.jsx)(e.code,{children:"classNames('foo', 'foo')"})," returns ",(0,r.jsx)(e.code,{children:"'foo foo'"}),", which is unnecessary as far as the browser result is concerned."]}),` `,(0,r.jsxs)(e.p,{children:["In some cases, de-duplication can also affect the result, e.g. in the case of ",(0,r.jsx)(e.code,{children:"classNames('foo', { foo: false })"}),", ",(0,r.jsx)(e.code,{children:"{ foo: false }"})," appears later in the arguments, so the user probably did not mean for ",(0,r.jsx)(e.code,{children:"'foo'"})," to appear in the final result."]}),` `,(0,r.jsxs)(e.p,{children:["This can be handled by using ",(0,r.jsx)(e.code,{children:"Set"})," to collect the classes from the start, adding or removing classes where necessary."]}),` `,(0,r.jsxs)(e.p,{children:["De-duplicating classes is usually out of scope for interviews, but it is a possible follow-up question. The de-duplicating functionality is covered in ",(0,r.jsx)(e.a,{href:"/questions/javascript/classnames-ii",children:"Classnames II"}),"."]}),` `,(0,r.jsx)(e.h2,{children:"Techniques"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsx)(e.li,{children:"Familiarity with JavaScript value types and how to check for them"}),` `,(0,r.jsx)(e.li,{children:"Recursion"}),` `,(0,r.jsxs)(e.li,{children:["Converting from ",(0,r.jsx)(e.code,{children:"Array"}),"s to ",(0,r.jsx)(e.code,{children:"Set"}),"s and vice versa (for the unique classes follow-up)"]}),` `,(0,r.jsx)(e.li,{children:"Handling of variadic arguments"}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Notes"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"typeof []"})," gives ",(0,r.jsx)(e.code,{children:"'object'"}),", so arrays need to be handled before objects."]}),` `,(0,r.jsxs)(e.li,{children:["These scenarios are usually out of scope, but they are worth mentioning:",` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Stack overflow"}),": Possibility of stack overflow. This applies to any recursive solution"]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Circular references"}),": Possibility of circular references for arrays and objects. This applies to any input which has arbitrary depth"]}),` `]}),` `]}),` `,(0,r.jsxs)(e.li,{children:["The base question preserves duplicates. Removing a class because a later object has ",(0,r.jsx)(e.code,{children:"{ className: false }"})," belongs to a different conflict-resolution model."]}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Library implementation"}),` `,(0,r.jsxs)(e.p,{children:["For reference, this is how the ",(0,r.jsxs)(e.a,{href:"https://github.com/JedWatson/classnames",children:[(0,r.jsx)(e.code,{children:"classnames"})," npm package"]})," is implemented:"]}),` `,(0,r.jsx)(t,{children:f}),` `,(0,r.jsx)(e.h2,{children:"Resources"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:"https://github.com/JedWatson/classnames",children:[(0,r.jsx)(e.code,{children:"classnames"})," library on GitHub"]})}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsxs)(e.a,{href:"https://github.com/lukeed/clsx",children:[(0,r.jsx)(e.code,{children:"clsx"})," library on GitHub"]}),": A newer version that serves as a faster and smaller drop-in replacement for ",(0,r.jsx)(e.code,{children:"classnames"}),"."]}),` `]})]})}function m(s={}){let{wrapper:e}=s.components||{};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(y,{...s})}):y(s)}return x(H);})(); ;return Component;