How to skip over an element in .map()?

Advanced techniques for skipping elements

Besides returning null or undefined, let's delve into alternative techniques that go beyond the one-liner solution.

Utilizing .flatMap() for combined map and filter

ES2019 introduced .flatMap(), a method that combines the functionality of .map() and .flat(). It can conveniently exclude elements while transforming an array.

const files = ['file1.js', 'file2.json', 'file3.js'];
// Hey, Json! You can't sit with us!
const scriptFiles = files.flatMap(f => f.endsWith('.json') ? [] : f);
console.log(scriptFiles); // ['file1.js', 'file3.js']


Combining .filter() and .map()

A clear and detailed execution can be implemented by chaining .filter() and .map(). Greatly helps with readability and understanding.

const numbers = [1, 2, 3, 4, 5];
const squaredEvens = numbers.filter(n => n % 2 === 0).map(n => n * n);
console.log(squaredEvens); // [4, 16]


Applying reduce

.reduce() method can be used as an alternative to .map() with the bonus of avoiding intermediate array creation.

const items = [-1, 0, 1, 2];
const positiveSquares = items.reduce((acc, item) => {
    // Say "Hello" to positives only, good vibes matter!
    if (item > 0) acc.push(item * item);
    return acc;
}, []);
console.log(positiveSquares); // [1, 4]


Performance considerations

Factor in the performance cost when choosing your method. Specifically, .filter() can be costlier due to creating an additional loop over the data.

Performance benchmarking

To assess and compare the various methods, you may want to use profiling tools or run benchmark tests.

| Method        | Description                     | Performance |
|---------------|---------------------------------|-------------|
| .map().filter | Two separate passes over array  | Slower      |
| .flatMap()    | Single integrated pass          | Faster      |
| .reduce()     | Custom accumulator              | Faster      |

Pre-optimized solutions

• Arrow functions are not only shorter, they are faster too!
• When possible, reduce steps and minimize intermediate arrays.
• Fancy words ahead! Consider using transducers, as expounded by Rich Hickey, for optimized transformations that avoid creating unnecessary intermediates.
• Wonder about fmap and the bind operator? Check out functional programming libraries or concepts for potent solutions.

Staying contemporary and clean

The better you understand modern JavaScript, the more refined and graceful your code becomes. Here's a bunch of handy tips to maintain clean and efficient code.

Incorporate latest JavaScript enhancements

Upgrade your battle-axe to a lightsaber by using ES6 features, which encompass arrow functions, destructuring, and template literals for a leap in code readability.

Make the utility belt more resourceful

Augment your artillery with utility libraries such as Lodash or Ramda. They offer robust, pre-made functions to tackle common array operations.

Never stop learning

Embrace new JavaScript features with open arms such as optional chaining (?.) and nullish coalescing operator (??). They gently shift how you handle array transformations, leading you towards more elegant solutions.