Falsy Bouncer

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Remove all falsy values from an array while preserving order. Use a boolean filter to drop false, 0, empty string, null, undefined, and NaN without mutating the input. Concepts: arrays, filtering, truthy-falsy, functional.

Arguments

arr: any[] — An array containing any types of elements, including falsy values.

Returns

any[] —

A new array with all falsy values removed.

Examples

// Basic examples
compact([0, 1, false, 2, '', 3]) // => [1, 2, 3]

// Works with only truthy values
compact(['a', true, 42]) // => ['a', true, 42]

// Handles null and undefined
compact([null, undefined, 'x']) // => ['x']

// Handles NaN
compact([NaN, 1, 2]) // => [1, 2]

Solution

Overview

Use the Boolean constructor as a predicate to filter out falsy values. This keeps only truthy entries, preserves order, and avoids manual checks for null, undefined, or empty strings. It’s a concise, idiomatic solution that’s easy to read and easy to explain in interviews. Key concepts: arrays, filtering, truthy-falsy.

Approach 1: Using filter(Boolean) (concise and expressive)

Return arr.filter(Boolean) (or arr.filter(v => Boolean(v))). This keeps values like 1, '0', and {} while removing false, 0, '', null, undefined, and NaN. The method returns a new array, so the original is not mutated, and the runtime is linear in the array length.

export default function compact(arr) {
  return arr.filter(Boolean);
}

export default function compact(arr: any[]): any[] {
  return arr.filter(Boolean);
}

Approach 2: Manual filtering with explicit check

Idea: explicitly iterate and push only truthy elements to a new array. Slightly longer but very clear for beginners.

How it works:

Initialize an empty array result = [].
Loop over each element el in arr and check if it is truthy using if (el).
If the condition is true, push el into result.
After the loop finishes, return result.

Why use it: makes the truthy/falsy check very explicit and shows how filter works under the hood. Also runs in O(n) time and uses O(n) space.

export default function compact(arr) {
  const result = [];
  for (const el of arr) {
    if (el) result.push(el);
  }
  return result;
}

export default function compact(arr: any[]): any[] {
  const result: any[] = [];
  for (const el of arr) {
    if (el) result.push(el);
  }
  return result;
}

Notes & Pitfalls

Pitfalls

Avoid this pattern if you need to keep values like `0` or `''` — this function removes all falsy values by design.
Be aware that `NaN` is also falsy and will be removed.

Edge cases

Empty array → returns `[]`.
Array with all falsy values → returns `[]`.
Mixed types → only truthy ones remain.

Techniques

Using Boolean coercion in array filtering.
Understanding truthy/falsy evaluation in JavaScript.
Preserving array order during filtering.

Common mistakes on this challenge

Falsy filtering is incomplete
`compact` should remove all falsy values (`0`, `false`, `""`, `null`, `undefined`, `NaN`).
- Filter with truthiness (`Boolean(value)`) to remove every falsy entry.
- Verify that `NaN` is removed as well.
- Keep original order of remaining values.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide