How to use map and filter simultaneously on an array using JavaScript ?

Given an array and the task is to use filter and map function simultaneously to the given array. First lets look at map and filter functions in brief:

  • filter() method: This method returns a new array containing the elements that passes a certain test performed
    on an original array.

    Syntax:

    let newArray = oldArray.filter((currentValue, index, array) {
        // Returns element to new Array
    });
    

    Used Parameters and variables:

    • newArray: The array that is returned.
    • oldArray: The filter function runs onto every element of this array.
    • currentValue: The current element’s value.
    • index: The current element’s array index..
    • array: The array object to which the current element belongs to.
  • map() method: This method is used to apply a function on every element in an array and returns a new array of
    same size as the input array.



    Syntax:

    let newArray = oldArray.map((currentValue, index, array) {
        // Returns element to new Array
    });
    

    Used Parameters and variables:

    • newArray: The array that is to be returned.
    • oldArray: The map function runs onto every element of this array.
    • currentValue: The current element’s value.
    • index: The current element’s array index.
    • array: The array object to which the current element belongs to.

Approach: Firstly, by using filter() function we will retrieve those elements from an array that satisfies the given condition. As the filter() method will return the array with the required elements. Now we will apply map() method to perform the specified operations on all elements of the array returned by filter() method.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    /* Printing the name of students who play
       basketball using filter and map method 
       simultaneously. */
  
    // Taking an array of Student object
    let students = [
        { id: "001", name: "Anish", sports: "Cricket" },
        { id: "002", name: "Smriti", sports: "Basketball" },
        { id: "003", name: "Rahul", sports: "Cricket" },
        { id: "004", name: "Bakul", sports: "Basketball" },
        { id: "005", name: "Nikita", sports: "Hockey" }
    ]
  
    /* Applying filter function on students array to
       retrieve those students Objects who play 
       basketball and then the new array returned by
       filter method is mapped in order to get the name
       of basketball players instead of whole object.*/
    let basketballPlayers = students.filter(function (student) {
        return student.sports === "Basketball";
    }).map(function (student) {
        return student.name;
    })
  
    console.log("Basketball Players are:");
      
    // Printing out the name of Basketball players
    basketballPlayers.forEach(function (players) {
        console.log(players);
    });
</script>

chevron_right


Output:

Basketball Players are:
Smriti
Bakul

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.