Skip to main content

Js Flatmap Filter

Source: .agents/references/coding-standard/vercel-react-best-practices/rules/js-flatmap-filter.md

Metadata​

  • title: Use flatMap to Map and Filter in One Pass
  • impact: LOW-MEDIUM
  • impactDescription: eliminates intermediate array
  • tags: javascript, arrays, flatMap, filter, performance

Content​

Use flatMap to Map and Filter in One Pass​

Impact: LOW-MEDIUM (eliminates intermediate array)

Chaining .map().filter(Boolean) creates an intermediate array and iterates twice. Use .flatMap() to transform and filter in a single pass.

Incorrect (2 iterations, intermediate array):

const userNames = users
  .map(user => user.isActive ? user.name : null)
  .filter(Boolean)

Correct (1 iteration, no intermediate array):

const userNames = users.flatMap(user =>
  user.isActive ? [user.name] : []
)

More examples:

// Extract valid emails from responses
// Before
const emails = responses
  .map(r => r.success ? r.data.email : null)
  .filter(Boolean)

// After
const emails = responses.flatMap(r =>
  r.success ? [r.data.email] : []
)

// Parse and filter valid numbers
// Before
const numbers = strings
  .map(s => parseInt(s, 10))
  .filter(n => !isNaN(n))

// After
const numbers = strings.flatMap(s => {
  const n = parseInt(s, 10)
  return isNaN(n) ? [] : [n]
})

When to use:

  • Transforming items while filtering some out
  • Conditional mapping where some inputs produce no output
  • Parsing/validating where invalid inputs should be skipped