The reduce() method in JavaScript is a powerful array method that allows you to iterate through an array and reduce it to a single value. This method can be used for a variety of tasks such as summing the values of an array, flattening an array, or counting the occurrences of an element.
The syntax for the reduce() method in JavaScript is as follows:
array.reduce(function(accumulator, currentValue, currentIndex, array) { // code to be executed on each iteration }, initialValue);
The reduce() method returns a single value that is the result of executing the callback function on each element of the array.
Example 1: Summing the values of an array
let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue); console.log(sum); // 15
In this example, we use the reduce() method to sum the values of an array of numbers. The accumulator starts at the first element of the array and the currentValue is the next element. We use the accumulator to store the sum and add the currentValue to it on each iteration.
Example 2: Flattening an array
let nestedArray = [[1, 2], [3, 4], [5, 6]]; let flattenedArray = nestedArray.reduce((accumulator, currentValue) =>accumulator.concat(currentValue)); console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
In this example, we use the reduce() method to flatten an array of arrays. We use the concat() method to merge the currentValue (which is an array) into the accumulator which is also an array).
Example 3: Counting the occurrences of an element
let colors = ['red', 'blue', 'green', 'red', 'blue', 'yellow']; let colorCounts = colors.reduce((accumulator, currentValue) => { if (currentValue in accumulator) { accumulator[currentValue]++; } else { accumulator[currentValue] = 1; } return accumulator; }, {}); console.log(colorCounts); // { red: 2, blue: 2, green: 1, yellow: 1 }
In this example, we use the reduce() method to count the occurrences of each element in an array. We use an object as the accumulator and check if the currentValue already exists in the object. If it does, we increment the value by 1. If it doesn't, we add the currentValue as a key to the object and set its value to 1.
Example 4: Finding the largest value in an array
let numbers = [5, 10, 15, 20, 25]; let largest = numbers.reduce((accumulator, currentValue) => { return Math.max(accumulator, currentValue); }); console.log(largest); // 25
In this example, we use the reduce() method to find the largest value in an array of numbers. We use the Math.max() method to compare the accumulator and the currentValue on each iteration and return the larger value. The final value returned by the reduce() method is the largest value in the array.
Example 5: Grouping elements by a certain property
let people = [ { name: 'Rakesh', age: 25, city: 'Chennai' }, { name: 'Raj', age: 30, city: 'Salem' }, { name: 'Sara', age: 35, city: 'Chennai' } ]; let groupedByCity = people.reduce((accumulator, currentValue) => { if (currentValue.city in accumulator) { accumulator[currentValue.city].push(currentValue); } else { accumulator[currentValue.city] = [currentValue]; } return accumulator; }, {}); console.log(groupedByCity); /* { Chennai: [{ name: 'Rakesh', age: 25, city: 'Chennai' }, { name: 'Sara', age: 35, city: 'Chennai' }], Salem: [{ name: 'Raj', age: 30, city: 'Salem' }] } */Conclusion
The reduce() method in JavaScript is a powerful tool for working with arrays. It allows for the iteration and calculation of values within an array, making it easy to perform tasks such as summing or finding the product of all elements in an array. The reduce() method takes a callback function as an argument, which is used to specify the calculation to be performed on each element of the array. The callback function takes two arguments: an accumulator and the current value. The accumulator is used to store the result of the calculation as the function iterates through the array. The initial value for the accumulator can be provided or it takes the first element of the array as the starting value. Overall, the reduce() method is a useful and versatile tool for working with arrays in JavaScript.
Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions