Map, Filter and Reduce in JavaScript- Explained

In This article I will talk about the fundamentals of Map, Filter and Reduce function required for Beginners. I will explain it with help of extensive examples.

The json file we are going to use :-

    [{
        "name": "Aritra",
        "age": 12,
        "school": "TIGPS",
        "subject": "Maths",
        "hobby": "Football"
    },
    {
        "name": "Subham",
        "age": 16,
        "school": "DPS",
        "subject": "English",
        "hobby": "Cricket"
    },
    {
        "name": "Jitendra",
        "age": 15,
        "school": "TIGPS",
        "subject": "History",
        "hobby": "Tennis"
    },
    {
        "name": "Anamika",
        "age": 11,
        "school": "DPS",
        "subject": "English",
        "hobby": "Chess"
    },
    {
        "name": "Rakesh",
        "age": 16,
        "school": "SSJ",
        "subject": "Science",
        "hobby": "Football"
    },
    {
        "name": "Ritwiik",
        "age": 13,
        "school": "DPS",
        "subject": "Maths",
        "hobby": "Cricket"
    },
    {
        "name": "Shreya",
        "age": 12,
        "school": "SSJ",
        "subject": "Maths",
        "hobby": "Batminton"
    },
    {
        "name": "Sumedha",
        "age": 11,
        "school": "DPS",
        "subject": "Hindi",
        "hobby": "Batminton"
    }
]        

Note:- Map, Filter and Reduce all three returns a new array after their operation.

Map Function

import school from './list.json' assert { type: 'json' }; //importing the json file
let MappedList = school.map((student) => 
    let name = student.name;
    let subject = student.subject;
    return ({ name, subject })
})
console.log(MappedList); //shows in the console        

The callback function takes a single argument student which represents each object in the school array. Inside the callback function, the name and subject properties are extracted from each student object and assigned to name and subject variables respectively.

The callback function returns an object with the name and subject as an object.

Output
[
{name: 'Aritra', subject: 'Maths'}
{name: 'Subham', subject: 'English'}
{name: 'Jitendra', subject: 'History'}
{name: 'Anamika', subject: 'English'}....]        

Filter

import school from './list.json' assert { type: 'json' }; //importing the json file
let FilteredList = school.filter((student) => 
    return student.age > 13
})
console.log(FilteredList);        

The callback function takes a single argument student which represents each object in the school array. Inside the callback function, a conditional statement checks if the age property of the student object is greater than '13'. If the condition is true, then the callback function returns the student object.

[
{name: 'Subham', age: 16, school: 'DPS', subject: 'English', hobby: 'Cricket'}
{name: 'Jitendra', age: 15, school: 'TIGPS', subject: 'History', hobby: 'Tennis'}
{name: 'Rakesh', age: 16, school: 'SSJ', subject: 'Science', hobby: 'Football'}
]        

Reduce

import school from './list.json' assert { type: 'json' }; //importing the json file
let ReducedList = school.reduce((acc, student) => 
    if (acc[student.school]) {
        acc[student.school] = ++acc[student.school]
    }
    else {
        acc[student.school] = 1;
    }
    return acc;
}, {})        

Reduce Function takes two argument, one is the callback function and he other is initialValue.

This Initial value must be specified for working with objects values. If the array only contains values like [10,12,34,11] then initialValue may not be specified. By default it takes the first value as initialValue

The code returns an object when it counts the number of student in each school

The callback function takes two arguments: acc (short for accumulator) which represents the accumulated result of the previous iterations, and student which represents the current object being iterated over. The initial value of the accumulator is {}.

Inside the callback function, an if statement checks if the school property of the student object is already a property of the acc object (i.e., if the school has already been counted). If it is, then the number of students in that school is incremented by 1. Otherwise, a new property is created in the acc object with the school name, and its value is set to 1.

The callback function returns the acc object after each iteration, which is then passed as the first argument to the next iteration. The final result of the .reduce() method is an object that contains a count of the number of students in each school.

{  //Output
DP : 4
SSJ : 2
TIGPS : 2S}