Skip to main content

How to Skip Elements When Mapping an Array in JavaScript

A common goal in JavaScript is to create a new array by transforming the elements of an existing one, but only for elements that meet a certain condition. A frequent mistake is trying to "skip" elements from within an Array.prototype.map() callback. However, map() is designed to always return a new array with the exact same length as the original.

This guide will clarify why you can't directly skip elements in map() and teach you the three best modern methods for achieving this goal: chaining filter().map(), using the powerful reduce() method, and the elegant flatMap() method.

The Core Problem: map() Cannot Skip Elements​

The map() method iterates over an array and calls a function for each element, creating a new array from the return values. If you try to return nothing (or undefined) for an element you want to skip, that undefined value will be added to the new array.

Example of code with problem:

const numbers = [10, 20, 30, 40];

// Problem: We want to double the numbers, but skip 20.
const result = numbers.map(num => {
  if (num === 20) {
    // There's nothing we can return here to "skip" it.
    // Returning nothing results in undefined.
    return;
  }
  return num * 2;
});

console.log(result);

Output: (This is not what we want!)

[ 20, undefined, 60, 80 ]

To correctly filter and map, you need a different approach.

This is the most intuitive and readable method. It's a simple two-step process: first, you filter the array to get only the elements you want, and then you map over the result.

The logic:

  1. Use filter() to create a new, shorter array containing only the elements that pass your condition.
  2. Chain map() onto the filtered array to transform each of the remaining elements.

Solution:

const employees = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }, // We want to skip this one
  { id: 3, name: 'Charlie' },
];

const names = employees
  .filter(employee => employee.id !== 2)
  .map(employee => employee.name);

console.log(names);

Output:

[ 'Alice', 'Charlie' ]
note

This method is highly expressive and easy for other developers to understand at a glance.

While filter().map() is very readable, it iterates over your data twice (once to filter, once to map). For very large arrays, the Array.prototype.reduce() method can be more performant as it accomplishes both tasks in a single pass.

The logic is based on the use of reduce() to build a new array from scratch (the "accumulator"). For each element in the original array, decide whether to push its transformed value into the accumulator or to do nothing.

Solution:

const employees = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const names = employees.reduce((accumulator, currentEmployee) => {
  // If the employee's ID is not 2, transform it and add it to the array.
  if (currentEmployee.id !== 2) {
    accumulator.push(currentEmployee.name);
  }
  return accumulator;
}, []); // Start with an empty array as the accumulator.

console.log(names);

Output:

[ 'Alice', 'Charlie' ]
note

This method is a powerful pattern for combining filtering and mapping into a single, efficient operation.

Method 3 (Modern & Concise): flatMap()​

The Array.prototype.flatMap() method provides an elegant and modern solution. It's like map(), but it "flattens" the result. The trick is that if you return an empty array ([]) for an element, it will be flattened away to nothing, effectively removing it from the final result.

The logic:

  • For elements you want to keep and map, return them in a single-element array (e.g., [employee.name]).
  • For elements you want to skip, return an empty array ([]).

Solution:

const employees = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const names = employees.flatMap(employee => {
  if (employee.id === 2) {
    return []; // Skip this element by returning an empty array
  }
  return [employee.name]; // Keep this element by returning it in an array
});

console.log(names);

Output:

[ 'Alice', 'Charlie' ]
note

This method is very concise and is becoming a popular choice for this task.

How to Skip Based on Index Instead of Value​

All of the methods above can be easily adapted to skip based on an element's index. The callback functions for filter, reduce, and flatMap all receive the index as their second argument.

A Solution that uses reduce as an example:

const data = ['a', 'b', 'c', 'd'];
const indexToSkip = 2; // We want to skip 'c'

const result = data.reduce((acc, currentItem, index) => {
  if (index !== indexToSkip) {
    acc.push(currentItem.toUpperCase());
  }
  return acc;
}, []);

console.log(result);

Output:

[ 'A', 'B', 'D' ]

Conclusion​

While map() itself cannot skip elements, JavaScript provides several excellent patterns for combining filtering and mapping.

  • filter().map(): The most readable and intuitive approach. Choose this for clarity.
  • reduce(): The most performant approach for very large arrays, as it iterates only once.
  • flatMap(): A modern and concise alternative that is both elegant and powerful.

The best choice depends on your priority: readability, performance, or modern syntax.

Table of Contents