How to Skip Over an Element in .map() in JavaScript?

The .map() method in JavaScript is used for transforming arrays by applying a function to each element. In some cases, we need to skip some elements during the mapping process. The .map() method always returns an array of the same length as the original. This article cover various approaches to skip elements in .map().

Returns undefined to Skip Elements

The .map() method in JavaScript is used to create a new array by applying a function to each element of an existing array. It is ideal for transforming data, such as modifying values or creating new objects from existing ones. The .map() does not skip elements, it processes every element of the array. Even if you return undefined, .map() will still include that result in the returned array, maintaining the original array’s length.

Example: In this example, the skipped elements display undefined.

const arr = [1, 2, 3, 4];
const result = arr.map(num => {
    if (num % 2 === 0) {
        return num * 2;
    }
    // Skipped over elements will be `undefined`
});

console.log(result);

[ undefined, 4, undefined, 8 ]

Using Conditional Logic Inside .map() Method

Using conditional logic inside .map() method returns a default value for elements to be skipped. It provides a clearer intent but still retains all elements in the array.

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'];

const result = fruits.map(
	fruit => fruit !== 'Banana' ? fruit.toUpperCase() : null);

console.log(result);

[ 'APPLE', null, 'CHERRY', 'ORANGE' ]

Using .filter() in Combination with .map() Method

To truly skip elements and create a new array with only the desired results, combining .filter() with .map() is an effective approach. This involves first filtering out the unwanted elements, then mapping over the filtered array.

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers
    .filter(num => num % 2 === 0)
    .map(num => num * 2);

console.log(result);

[ 4, 8, 12 ]

romy421kumari

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions