Group by JavaScript Array Object

Suppose we have an array of arrays that contains the marks of some students in some subjects like this ?

const arr = [
  ["English", 52],
  ["Hindi", 154],
  ["Hindi", 241],
  ["Spanish", 10],
  ["French", 65],
  ["German", 98],
  ["Russian", 10]
];

We are required to write a JavaScript function that takes in one such array and returns an object of objects.

The return object should contain an object for each unique subject, and that object should contain information like the number of appearances of that language, sum of total marks and the average.

Example

The code for this will be ?

const arr = [
  ["English", 52],
  ["Hindi", 154],
  ["Hindi", 241],
  ["Spanish", 10],
  ["French", 65],
  ["German", 98],
  ["Russian", 10]
];

const groupSubjects = arr => {
  const grouped = arr.reduce((acc, val) => {
    const [key, total] = val;
    if(!acc.hasOwnProperty(key)){
      acc[key] = {
        'count': 0,
        'total': 0
      };
    };
    const accuKey = acc[key];
    accuKey['count']++;
    accuKey['total'] += total;
    accuKey['average'] = accuKey['total'] / accuKey['count'];
    return acc;
  }, {});
  return grouped;
};

console.log(groupSubjects(arr));

Output

And the output in the console will be ?

{
  English: { count: 1, total: 52, average: 52 },
  Hindi: { count: 2, total: 395, average: 197.5 },
  Spanish: { count: 1, total: 10, average: 10 },
  French: { count: 1, total: 65, average: 65 },
  German: { count: 1, total: 98, average: 98 },
  Russian: { count: 1, total: 10, average: 10 }
}

Alternative Approach Using forEach

Here's another way to achieve the same result using forEach() method:

const arr = [
  ["English", 52],
  ["Hindi", 154],
  ["Hindi", 241],
  ["Spanish", 10],
  ["French", 65]
];

const groupSubjectsForEach = arr => {
  const result = {};
  
  arr.forEach(([subject, marks]) => {
    if (!result[subject]) {
      result[subject] = {
        count: 0,
        total: 0,
        average: 0
      };
    }
    
    result[subject].count++;
    result[subject].total += marks;
    result[subject].average = result[subject].total / result[subject].count;
  });
  
  return result;
};

console.log(groupSubjectsForEach(arr));

{
  English: { count: 1, total: 52, average: 52 },
  Hindi: { count: 2, total: 395, average: 197.5 },
  Spanish: { count: 1, total: 10, average: 10 },
  French: { count: 1, total: 65, average: 65 }
}

Key Points

• Array Destructuring: We use [key, total] = val to extract subject name and marks
• Object Initialization: Check if property exists before creating new object structure
• Running Average: Calculate average by dividing total by count after each addition
• Accumulator Pattern: Both reduce() and forEach() approaches build up the result object incrementally

Conclusion

Grouping array data by a key is a common pattern in JavaScript. The reduce() method provides a functional approach, while forEach() offers a more imperative style for the same result.