How to Remove Falsy Values From an Array in JavaScript

Remove Falsy Values From an Array in JavaScript

When working with arrays in JavaScript, it’s common to encounter unwanted values like false, 0, "" (empty string), null, undefined, or NaN. These are known as falsy values—meaning they are considered false when evaluated in a Boolean context.

To clean up such arrays and keep only the truthy values, JavaScript provides some elegant solutions. This tutorial walks you through the different methods to filter out these falsy elements—step by step and beginner-friendly.

Method 1: Using Array.prototype.filter() with Boolean

This is the most common and cleanest method. By passing Boolean as the callback to filter(), we remove all values that return false when coerced to a boolean. Simple, powerful, and elegant.

const mixedArray = ["apple", false, "", 0, "banana", null, undefined, NaN, "cherry"];
const truthyArray = mixedArray.filter(Boolean);

console.log(truthyArray);

["apple", "banana", "cherry"]

Method 2: Using a Custom Callback Function

If you prefer to see the logic explicitly or want to tweak it later, you can use a custom function in filter() instead of passing Boolean.

const values = [0, "Item 1", false, "Item 2", "", null, "Item 3"];
const cleaned = values.filter(function(item) {
  return item;
});

console.log(cleaned);

["Item 1", "Item 2", "Item 3"]

Method 3: Using Arrow Functions

If you like brevity and modern syntax, arrow functions offer a neat shorthand for filtering out falsy values. It’s functionally identical to the custom function, just more concise.

const data = [null, "apple", "", 0, "banana", false, "cherry"];
const result = data.filter(item => item);

console.log(result);

["apple", "banana", "cherry"]

Understanding Falsy Values in JavaScript

Before using these methods, it's essential to understand what qualifies as a falsy value in JavaScript. These are values that evaluate to false when used in a Boolean context:

• false — the literal false boolean
• 0 and -0
• "" — an empty string
• null
• undefined
• NaN — Not a Number

Everything else is considered truthy: non-zero numbers, non-empty strings, objects, arrays, and even the string "false".

Why Remove Falsy Values?

Filtering falsy values can be incredibly helpful when:

• Cleaning user input before saving it
• Removing empty fields from a form or API response
• Preventing bugs caused by unexpected null or undefined
• Reducing clutter in UI lists or dropdowns

Final Thoughts

Cleaning arrays by removing falsy values is a practical skill that every JavaScript developer should master. Whether you're building a user interface, manipulating form data, or transforming API responses, filtering out false, null, or undefined values can keep your data tidy and predictable.

The filter(Boolean) trick is one of JavaScript’s most elegant patterns—it’s short, expressive, and readable. But if you’re aiming for clarity or custom filtering, writing your own callback function may serve better.

Keep practicing with real-world data and explore how these simple patterns make your JavaScript more resilient and expressive.