Understanding map, filter, reduce in JavaScript with an Covid Care facility scenario.

Problem: Imagine you are working on a Software Application for a Covid Care facility which tests the patients' oxygen levels and provides the summary of the Covid Patients.

Here is the flow at Covid Care Facility (Sample Code):

1. The patient showcases his ID proof depicting his Name and Age at Registration Counter. The registration counter is interested in Names only as it is testing patients of all ages.
2. Process 1: Get the names of all the Patients.
3. Process 2: Every patient is sent for Sanitization and Oxygen Check.
4. Process 3: Get the list of patients who have SpO2 level below than 85
5. Process 4: Provide a COUNT Total Patients
6. Process 5: Provide a COUNT of Covid Suspects
7. Process 6: Provide a COUNT of Healthy People

So, let's understand, if we are making use of JavaScript in the application, how can we make use of 'map', 'filter' and 'reduce'. First thing that we need to understand is all of the three methods i.e. 'map', 'filter' and 'reduce' work on array. Since, we have patients data in our case, this is an array.

    	
        	let patientsData = [
              {"name": "John", "age": "35"},
              {"name": "Maria", "age": "40"},
              {"name": "Ken", "age": "25"},
              {"name": "Howard", "age": "63"},
              {"name": "Liza", "age": "72"},
              {"name": "Gene", "age": "80"},
              {"name": "Nikunj", "age": "48"},
              {"name": "Fatimah", "age": "32"},
            ];
        
    

In the Process 1, we are interested in getting the names of ALL the patients. So, we can use 'map' in this case. 'map' returns exactly the same number of elements from the array.

    	
        	// map gives exactly the same number of elements, when you are interested in specific data, or want to perform some operation on some data.
            let patients = patientsData.map((patient) => {
                return patient.name;
            });

            document.getElementById('mapResults').innerText = JSON.stringify(patients);
        
    

In the Process 2, we are interested in getting ALL the patients sanitized and check their oxygen levels. So, we can use 'map' again in this case.

    	
           // map gives exactly the same number of elements, when you are interested in specific data, or want to perform some operation on some data.
          let sanitizedPatients = patientsData.map((patient) => {
              patient.sanitized = true;
            patient.spo2Percent = checkSpO2Level(70,95);
            return patient;
          });

          document.getElementById('mapResults2').innerText = JSON.stringify(sanitizedPatients);
        
    

In the Process 3, We want to get only the patients who have oxygen level below 85. Since, we can use 'filter' in this case

    	
          // use filter to filter based on a conditional statement
          let covidSuspects = sanitizedPatients.filter((patient) => {
              return patient.spo2Percent < 85;
          });

          document.getElementById('filterResults').innerText = JSON.stringify(covidSuspects);
        
    

In the Process 4, 5 and 6, we want to accumulate the results to provide the total count, covid suspects count and healthy persons count. So, we can use 'reduce' function here. The reduce function callback in the first argument contains the accumulator (the value which will be available in the end), the currentValue and the second argument as the initial count.

    	
          let total = sanitizedPatients.reduce((patientCount, patient) => {
            return ++patientCount;
          }, 0);

          document.getElementById('reduceResults1').innerText = JSON.stringify(total);
        
    

    	
            let patientsCount = sanitizedPatients.reduce((patientCount, patient) => {
                if(patient.spo2Percent < 85){
                patientCount++;
              }
              return patientCount;
            }, 0);

            document.getElementById('reduceResults2').innerText = JSON.stringify(patientsCount);
        
    

    	
          let healthyPeople = sanitizedPatients.reduce((patientCount, patient) => {
            return patient.spo2Percent>=85 ? ++patientCount : patientCount;
          }, 0);

          document.getElementById('reduceResults3').innerText = JSON.stringify(healthyPeople);