How to skip over an Element or an Index in .map() in JS

# Table of Contents

1. How to skip over an Element in .map() in JavaScript
2. Skip over an element in .map() using Array.reduce()
3. How to skip over an Element in .map() using Array.flatMap()
4. Skip over an element using Array.forEach()
5. How to skip over an Index in .map() in JavaScript
6. How to skip over an Index in .map() using Array.reduce()
7. Skip over an index using Array.forEach()

# How to skip over an Element in .map() in JavaScript

To skip over an element in Array.map() in JavaScript:

1. Use the Array.filter() method to exclude the elements you want to skip over.
2. Use the Array.map() to map over the remaining array elements.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = arr
  .filter(employee => {
    if (employee.id === 2) {
      return false;
    }

    return true;
  })
  .map(employee => {
    return employee.name;
  });

console.log(names); // 👉️ [ 'alice', 'carl' ]

The function we passed to the Array.filter() method gets called with each element from the array.

Otherwise, the element gets excluded from the returned array.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const filtered = arr.filter(employee => {
  if (employee.id === 2) {
    return false;
  }

  return true;
});

// [
//   { id: 1, name: 'alice', salary: 500 },
//   { id: 3, name: 'carl', salary: 600 }
// ]
console.log(filtered);

The code sample checks if the id property of each object is equal to 2.

If the condition is met, false is returned and the corresponding element is excluded from the array.

The last step is to call the Array.map() method on the returned from the filter() method array.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const filtered = arr.filter(employee => {
  if (employee.id === 2) {
    return false;
  }

  return true;
});

// [
//   { id: 1, name: 'alice', salary: 500 },
//   { id: 3, name: 'carl', salary: 600 }
// ]
console.log(filtered);

const names = filtered.map(employee => {
  return employee.name;
});

console.log(names); // 👉️ [ 'alice', 'carl' ]

The function we passed to the Array.map() method gets called with each element (object) from the array.

On each iteration, we access the name property and return its value.

# Skip over an element in .map() using Array.reduce()

You can also use the Array.reduce() method to skip over an element in Array.map().

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = arr.reduce((accumulator, current) => {
  if (current.id !== 2) {
    accumulator.push(current.name);
  }

  return accumulator;
}, []);

// 👇️ ['alice', 'carl']
console.log(names);

The function we passed to the Array.reduce() method gets called with each element (object) in the array.

On each iteration, we use the strict inequality (!==) operator to check if the id property of the current element is not equal to 2.

If the condition is met, we push the name of the current element into the accumulator array.

After the last iteration, the accumulator array contains the values of the name properties for the objects that don't have an id of 2.

This approach is a bit faster than using Array.map() and Array.filter() because we only iterate over the array once.

# How to skip over an Element in .map() using Array.flatMap()

You can also use the Array.flatMap() method to skip over elements in Array.map().

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = arr.flatMap(employee => {
  if (employee.id === 2) {
    return [];
  }

  return employee.name;
});

// 👇️ [ 'alice', 'carl' ]
console.log(names);

The Array.flatMap() method returns a new array that is formed by applying a callback function to each element of the array and then flattening the result.

The flatMap() method is often used as a way to add or remove items during a map.

If you need to keep the item, return a 1-element array.

If you need to add items, return a multiple-element array.

If you want to remove an item, return an empty array.

In the code sample, we check if the id property of the current object has a value of 2.

If the condition is met, we return an empty array to remove the item.

Copied!
const names = arr.flatMap(employee => {
  if (employee.id === 2) {
    return [];
  }

  return employee.name;
});

// 👇️ [ 'alice', 'carl' ]
console.log(names);

Otherwise, we access the name property of the object and return the result.

The flatMap() method returns a new array that contains the names of the matching elements.

# Skip over an element using Array.forEach()

You can also skip over an element using the Array.forEach() method.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const newArray = [];

arr.forEach(element => {
  if (element.id !== 2) {
    newArray.push(element.name);
  }
});

console.log(newArray); // 👉️ [ 'alice', 'carl' ]

The function we passed to the forEach() method gets called with each element from the array.

On each iteration, we check if the element's id is not equal to 2.

If the condition is met, we push the element's name value into a new array.

# How to skip over an Index in .map() in JavaScript

Use the Array.flatMap() method if you need to skip over an index in Array.map().

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = arr.flatMap((employee, index) => {
  if (index === 1) {
    return [];
  }

  return employee.name;
});

// 👇️ [ 'alice', 'carl' ]
console.log(names);

The Array.flatMap() method returns a new array that is formed by applying a callback function to each element of the array and then flattening the result.

The flatMap() method is often used as a way to add or remove items during a map.

• If you need to keep the item, return a 1-element array.

• If you need to add items, return a multiple-element array.

• If you want to remove an item, return an empty array.

On each iteration, we check if the current index is 1.

If the condition is met, we return an empty array to remove the item.

Otherwise, we return the name value of the element.

The same approach can be used if you need to skip multiple indices in Array.map().

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const indicesToSkip = [1, 2];

const names = arr.flatMap((employee, index) => {
  if (indicesToSkip.includes(index)) {
    return [];
  }

  return employee.name;
});

// 👇️ [ 'alice' ]
console.log(names);

On each iteration, we check if the array of indices to skip contains the current index.

If the condition is met, we return an empty array to skip the current element.

# How to skip over an Index in .map() using Array.reduce()

You can also use the Array.reduce() method to skip over an index in .map().

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = arr.reduce((accumulator, current, index) => {
  if (index !== 1) {
    accumulator.push(current.name);
  }

  return accumulator;
}, []);

// 👇️ [ 'alice', 'carl' ]
console.log(names);

The function we passed to the Array.reduce() method gets called with the accumulated array, the current array element and the current index.

The accumulator parameter is initially set to an empty array because that's what we passed as the second argument to the Array.reduce() method.

On each iteration, we check if the current index is not equal to 1.

If the condition is met, the item is pushed into the accumulator array.

# Skip over an index using Array.forEach()

You can also skip over an index using the Array.forEach() method.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = [];

arr.forEach((element, index) => {
  if (index !== 1) {
    names.push(element.name);
  }
});

console.log(names); // 👉️ [ 'alice', 'carl' ]

The function we passed to the Array.forEach() method gets called with each element and the current index.

On each iteration, we check if the current index is not equal to 1.

If the condition is met, we push the value of the name property to the names array.

If you need to skip multiple indices, store them in an array.

Copied!
const arr = [
  {id: 1, name: 'alice', salary: 500},
  {id: 2, name: 'bobby hadz', salary: 400},
  {id: 3, name: 'carl', salary: 600},
];

const names = [];

const indicesToSkip = [1, 2];

arr.forEach((element, index) => {
  if (!indicesToSkip.includes(index)) {
    names.push(element.name);
  }
});

console.log(names); // 👉️ [ 'alice' ]

We stored the indices we wanted to skip in an array and used the Array.includes() method to check if the current index is not contained in the array.

If the condition is met, we push the name of the current element into the new array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Remove first or first N elements from Array in JavaScript
• Remove last or last N elements from an Array in JavaScript
• Remove Duplicates from an Array of Objects in JavaScript
• Remove Null or Undefined Values from an Array in Javascript