Map and filter an array at the same time

One stone, two birds: map and filter in one line

reduce() is not just a method, it's a way of life. It helps you craft your own array, bend it to your will, element by element. Use this mighty tool when you need to both filter and map elements, without making multiple trips through your array. Efficiency, thy name is reduce().

The art of the Boolean in reducers

Logical operators aren't just for bragging to your friends. They can form the gates of your condition, allowing only those worthy (i.e., satisfying your condition) to pass.

The sharp arrow of ES6

Use ES6's arrow function syntax to make your reduce function crisp, concise, and pleasing to the eye:

const result = items.reduce((acc, item) => condition(item) ? acc.concat(transform(item)) : acc, []);


Modern tactics: flatMap and lodash, the super tools

The power of flatMap in filtering and mapping

The flatMap() method has the best of both worlds - it maps and filters in a single iteration. It's your right hand when you need a dynamic number of results per item in your array.

const modified = items.flatMap(item => condition(item) ? [transform(item)] : []);


When lodash comes to the rescue

When JavaScript seems to be playing hardball, libraries like lodash are your saviour. They come packed with utilities, out of which, _.transform for complex operations stands out.

const _ = require('lodash');

const transformed = _.transform(items, (result, value) => {
  if (condition(value)) {
    result.push(transform(value));
  }
}, []);


Performance and maintainability

Speed is key but remember, it's not Fast and Furious

Performance will vary with array size and complexity of operations. So, remember to benchmark different methods like, reduce, flatMap, and chaining filter().map().

Code that ages like fine wine

Keep readability in mind while choosing an array iteration method. reduce might let you do everything in one line, but remember, today's clever code could be tomorrow's debugging nightmare.

Jazz up your code with destructuring

Destructuring gives you direct access to properties and makes your code easier on the eyes:

const result = items.reduce((acc, { key1, key2 }) => condition(key1, key2) ? [...acc, transform(key1, key2)] : acc, []);


Quick and Clear: The coding philosophy

It's a fine balance between readability and conciseness. Always opt for methods that speak the clearest to you, and ponder if your compact code is truly worth the complex decoding it might require later.