JavaScript provides some amazing functions that can be called against your arrays to help filter them, manipulate them, or even reduce them down to a single value or grouped values.

This article is intended to help you understand how you can use these 3 methods to simplify your existing applications.

.map()

First lets discuss the .map() method. You can use this function to manipulate data within an existing array. For instance, lets assume that you have array of people.

const people = [
    { name: 'Frank', gender: 'Male' },
    { name: 'Sarah', gender: 'Female' },
    { name: 'Michael', gender: 'Male' },
    { name: 'Jessy', gender: 'Female' },
    { name: 'David', gender: 'Male' },
    { name: 'Jabari', gender: 'Male' },
];

Given the above array, lets say we want to extract an array of names? You could easily do this using the .map() method as follows:

const names = people.map(person => person.name);

This will return a new array of everyones name.

Array (6)
    0 "Frank"
    1 "Sarah"
    2 "Michael"
    3 "Jessy"
    4 "David"
    5 "Jabari"

.filter()

Another helpful method is .filter(). You can use this function when you're interested in getting a subset of your data based on a particular condition.

As an example, we'll filter our list of people but only return the males.

const people = [
    { name: 'Frank', gender: 'Male' },
    { name: 'Sarah', gender: 'Female' },
    { name: 'Michael', gender: 'Male' },
    { name: 'Jessy', gender: 'Female' },
    { name: 'David', gender: 'Male' },
    { name: 'Jabari', gender: 'Male' },
];

const men = people.filter(person => person.gender === 'Male');

As long as the condition you pass in returns true, it will include the given record into your new array.

The output of the above example would be as follows.

[
    {name: "Frank", gender: "Male"}, 
    {name: "Michael", gender: "Male"}, 
    {name: "David", gender: "Male"}, 
    {name: "Jabari", gender: "Male"}
]

.reduce()

Another super handy method is .reduce(). You can either reduce an entire array into a single value or even into groups as well.

First lets look at an example where we get the count of how many men we have in the array.

const count = people.reduce((carry, person) => {
    if(person.gender === 'Male') {
        carry++;
    }

    return carry;
}, 0)

The above example returns 4 as expected. We could add filter to the mix to make the code more readable.

For instance the following will produce the exact same result.

const count = people
    .filter(person => person.gender === 'Male')
    .reduce((carry, person) => carry += 1, 0);

Let's look at another example. Maybe instead of returning a count, we'd prefer to return a new Object of our men and women separated into their own groups. We could easily accomplish that by doing the following.

const groups = people.reduce((accumulator, person) => {
    const group = person.gender === 'Male' ? 'men' : 'women';
    accumulator[group].push(person);
    return accumulator;
}, {
    men: [],
    women: []
});

The above example would output the following:

{
    men: [
        {name: "Frank", gender: "Male"}, 
        {name: "Michael", gender: "Male"}, 
        {name: "David", gender: "Male"}, 
        {name: "Jabari", gender: "Male"}
    ], 
    women: [
        {name: "Sarah", gender: "Female"}, 
        {name: "Jessy", gender: "Female"}
    ]
}