Whether you're just starting out with TypeScript/JavaScript or you're already comfortable with the basics, understanding array methods can significantly enhance your coding efficiency. In this short article, we'll introduce an array method that's often overlooked but incredibly powerful: reduce.
Understanding the Basics
Typically, to manipulate array data, we'd use methods like filter and map. For example, consider an array of students, where each student has a name, score, and class. Say we want to find the average score of all students in Class A who have scored above 50. A traditional approach using filter and map might look like this:
// Define student interface interface Student { name: string; score: number; class: string; } // Array of students const students: Student[] = [ { name: 'John', score: 80, class: 'Class A' }, { name: 'Jane', score: 40, class: 'Class A' }, { name: 'Doe', score: 70, class: 'Class B' }, { name: 'Smith', score: 60, class: 'Class A' }, ]; // Filter the students based on class and score const filteredStudents = students.filter(student => student.class === 'Class A' && student.score > 50); // Get the total score const total = filteredStudents.map(student => student.score).reduce((acc, score) => acc + score, 0); // Calculate average const average = total / filteredStudents.length; console.log(average); This code does the job, but it loops over the array three times. Could we make this more efficient?
Enter reduce
The reduce method can perform the job of both filter and map in just a single pass. It might seem complex at first, but the power it brings to your code is worth the effort.
Here's how you might solve the above problem using reduce:
// Define student interface interface Student { name: string; score: number; class: string; } // Define an interface for the data we'll track interface StudentScoreData { totalScore: number; studentCount: number; } const students: Student[] = [ { name: 'John', score: 80, class: 'Class A' }, { name: 'Jane', score: 40, class: 'Class A' }, { name: 'Doe', score: 70, class: 'Class B' }, { name: 'Smith', score: 60, class: 'Class A' }, ]; // Initialize our tracking data const initialData: StudentScoreData = { totalScore: 0, studentCount: 0 }; // Use reduce to calculate the total score and student count const studentScoreData = students.reduce((data, student) => { if (student.class === 'Class A' && student.score > 50) { return { totalScore: data.totalScore + student.score, studentCount: data.studentCount + 1 }; } return data; }, initialData); // Calculate average const averageReduce = studentScoreData.totalScore / studentScoreData.studentCount; console.log(averageReduce); In this example, we only loop through the array once, increasing efficiency, particularly when dealing with large arrays.
Wrapping Up
Embracing reduce over filter and map might seem daunting at first, but it's a step worth taking. Not only does it make your code more efficient by reducing the number of iterations, but it also challenges you to think about problems in a slightly different way.
This article was inspired by this video i saw recently:
Happy coding!
Top comments (0)