Removing Elements with Array.map in JavaScript

In JavaScript, the Array.map() method is commonly used to iterate over an array and modify each item in the array. While the filter() method is often used for this, the map() method can also be used for this.

In this blog post, we'll explore how to use map() method to remove elements from an array.

Approach 1: Removing Odd Numbers

<script>
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const evenNumbers = numbers.map(num => num % 2 === 0 ? num : null);
 console.log(evenNumbers); // Output: [null, 2, null, 4, null, 6, null, 8, null, 10]
</script>

Explanation:

1. The map() method is used to iterate over the numbers array.
2. For each item, the code checks if the number is even using the modulo operator %. If the number is even, then it is returned as it is. If the number is odd, then null is returned.
3. The new array evenNumbers contains both even numbers and also null values, where the odd numbers used to be.
4. To remove the null values, you can use the filter() method:
   

   <script>
    const cleanedEvenNumbers = evenNumbers.filter(num => num !== null);
    console.log(cleanedEvenNumbers); // Output: [2, 4, 6, 8, 10]
   </script>

5. This way, you can use map() method to transform the array, and then filter() method to remove the unwanted (null) elements.

Approach 2: Removing Specific Elements using Array.map

<script>
 const fruits = ['apple', 'banana', 'orange', 'pear', 'banana'];
 const uniqueFruits = fruits.map(fruit => fruit !== 'banana' ? fruit : null);
 console.log(uniqueFruits); // Output: ['apple', null, 'orange', 'pear', null]
</script>

Explanation :

1. The map() method is used to iterate over the fruits array.
2. For each fruit, the code checks if the fruit is not banana. If it's not, the fruit is returned as it is. If it's banana, null is returned.
3. The new array uniqueFruits contains the unique fruits and null values where the banana elements used to be.
4. To remove the null values, you can use the filter() method:
   

   <script>
     const cleanedUniqueFruits = uniqueFruits.filter(fruit => fruit !== null);
     console.log(cleanedUniqueFruits); // Output: ['apple', 'orange', 'pear']
   </script>