Skip to main content

pickBy()

pickBy<T>(object, predicate): Partial<T>

Creates a new object with properties that satisfy the predicate.

note

Only enumerable string keys are included (Symbol keys are ignored).

Type Parameters​

T: T extends Record<PropertyKey, any>​

The type of the input object.

Parameters​

object: T​

The object to pick properties from.

predicate: (value, key, object) => boolean​

Function to test each property: (value, key, object) => boolean.

Returns: Partial<T>​

A new object with only the properties that pass the predicate.

See Also​

Since​

2.0.0

Performance​

O(n) time & space where n is number of properties.

Also known as​

filter (Effect) · filterKey (Radashi) · pickBy (Lodash, es-toolkit, Remeda, Ramda) · ❌ (Modern Dash, Antfu)

Example​

const obj = { a: 1, b: 'hello', c: 3, d: null };

// Pick by value type
pickBy(obj, (v) => typeof v === 'string');
// => { b: 'hello' }

// Pick by key pattern
pickBy(obj, (_, key) => String(key).startsWith('a'));
// => { a: 1 }

// Pick non-null values
pickBy(obj, (v) => v != null);
// => { a: 1, b: 'hello', c: 3 }

How it works?​

Creates a new object with properties that satisfy a predicate.

Filter by Type​

Filter Non-Null​

pick vs pickBy​

pickpickBy
Selects byKey namesPredicate function
Use caseKnown keysDynamic filtering

Use Cases​

Filter properties dynamically 📌​

Create a new object with properties that satisfy a predicate function. Useful for cleaning objects by value.

const validOnly = pickBy(data, (val) => isValid(val));

Extract numeric properties only​

Filter an object to keep only properties with numeric values. Useful for separating metrics from metadata in mixed objects.

const metrics = pickBy(stats, (value) => typeof value === 'number');
// { views: 1200, clicks: 89 } — excludes string/boolean fields

Remove null or undefined values 📌​

Clean up an object by removing empty properties. Essential for generating clean query parameters or JSON payloads.

const cleanObj = pickBy(data, (value) => value != null);

Filter available venue sections for event booking​

Filter venue sections to show only available areas during ticket sales. Essential for event booking platforms managing real-time seat availability.

const venueSection = {
  vipBox: { available: 0, price: 500, capacity: 20 },
  orchestra: { available: 45, price: 200, capacity: 150 },
  mezzanine: { available: 0, price: 150, capacity: 200 },
  balcony: { available: 89, price: 80, capacity: 300 },
  standing: { available: 150, price: 50, capacity: 500 },
};

// Show only sections with available seats
const availableSections = pickBy(venueSection, (section) => section.available > 0);
// => { orchestra: {...}, balcony: {...}, standing: {...} }

// Filter premium sections for VIP customers
const premiumSections = pickBy(venueSection, (sec) => sec.price >= 150);
// => { vipBox: {...}, orchestra: {...}, mezzanine: {...} }

// Find sections with bulk availability for group bookings
const groupFriendly = pickBy(venueSection, (sec) => sec.available >= 20);
// => { orchestra: {...}, balcony: {...}, standing: {...} }

Filter visible table columns by user preference​

Pick only the columns the user has chosen to display in a data table. Essential for data table components with column visibility toggles.

const allColumns = {
  name: { label: "Name", visible: true, width: 200 },
  email: { label: "Email", visible: true, width: 250 },
  role: { label: "Role", visible: false, width: 120 },
  status: { label: "Status", visible: true, width: 100 },
  lastLogin: { label: "Last Login", visible: false, width: 180 },
  createdAt: { label: "Created", visible: false, width: 150 },
};

const visibleColumns = pickBy(allColumns, (col) => col.visible);
// => { name: {...}, email: {...}, status: {...} }

renderTableHeaders(Object.values(visibleColumns));

Extract enabled feature flags​

Pick only the enabled features from a feature flag configuration. Essential for feature flag systems and conditional rendering.

const featureFlags = {
  darkMode: true,
  newDashboard: false,
  betaSearch: true,
  legacyNav: false,
  aiAssistant: true,
};

const enabledFeatures = pickBy(featureFlags, (enabled) => enabled);
// => { darkMode: true, betaSearch: true, aiAssistant: true }

const featureList = Object.keys(enabledFeatures);
// => ["darkMode", "betaSearch", "aiAssistant"]

Filter chart series with data​

Keep only chart series that have actual data points to display. Perfect for dynamic dashboards where some metrics may be empty.

const chartSeries = {
  revenue: [100, 200, 300],
  expenses: [80, 150, 250],
  refunds: [],
  taxes: [10, 20, 30],
  bonuses: [],
};

const activeSeries = pickBy(chartSeries, (values) => values.length > 0);
// => { revenue: [...], expenses: [...], taxes: [...] }
renderMultiLineChart(activeSeries);