The Find , Filter and Reduce Methods

These are 3 methods will help you iterate through an array

• Find
• Filter
• Reduce

In JavaScript we often come by many arrays in programing and we may need to iterate through them. Perhaps we want to find one specific name or filter out some names in an array. Sometime we want to reduce multiple values to just a single value. That is where these Array methods come in.

The Array

We will be using this array through out the code examples so feel free to reference back to it.

const dogs =[
    {name: 'Dora', breed: 'beagle', weight: 32},
    {name : 'Bella', breed: 'poodle', weight: 26},
    {name: 'Waffles', breed: 'beagle', weight: 35},
    {name: 'Prince', breed: 'maltese', weight: 21}
];

The Find Method

In this Example we are calling the find method on the Array of dogs and storing the results in a variable called bellaThePoodle. The find methods takes a callback function as its argument. It then iterates through the array each time passing each element in the array to the call back function. Once the condition in the function is met it returns the first element that returns true. In the example we are looking for dog.name to equal Bella. It then returns the second element in the array which meets the condition. If the condition is not met it returns undefined. It does not mutate the array.

const bellaThePoodle = dogs.find(function(dog) { 
return dog.name === 'Bella';
});

console.log(bellaThePoodle); 

{name : 'Bella', breed: 'poodle', weight: 26}

The Filter Method

Have you ever been on website shopping for clothes and use a filter to only show a certain size or color. Well this is where the filter methods shines. In the example below we call the filter method on the dogs array to filter out the beagles. We then return every element that meets the condition in the callback function to the beagles variable. It returns an array of objects that contain a beagle as a breed.

The find method takes a callback function as an argument. It then iterates through the array passing each element to the callback function and returns every element that meets the callback condition.

const beagles = dogs.filter(function(dog) { 
return dog.breed === 'beagle';
});

console.log(beagles);

[
{name: 'Dora', breed: 'beagle', weight: 32},
{name: 'Waffles', breed: 'beagle', weight: 35}
]

The Reduce method

You ever had a pocket full of change and wish it could count itself and give you back the total value? Well the Reduce method is here to help. It takes multiple values in an array and reduces it to one value. In the example bellow we call the reduce method on the dogs array. It takes two arguments a callback function and an Accumulator. Whats is an a Accumulator? Well it can be a number of things it can be a variable that holds the starting value like 0 or an empty array or object that stores the value every time we iterate through the array. It hold the current value as we continue to add all the values. The reduce method then iterates through the array passing each element in the array along with the Accumulator. In the example we are taking the weight in every element of the dogs array and adding it to the Accumulator. When all the values have been added it returns the Accumulator. In the Example it Returns the total weight of all the Dogs in the Array.

const totalDogWeight = dog.reduce(function(totalWeight, dog) { 
return totalWeight + dog.weight 
}, 0);

console.log(`Total Dog Weight: ${totalDogWeight}`);

Total Dog Weight: 114

In Conclusion

There are many array methods that will help shorten your code and make coding an application less time consuming. It takes the pressure of having to program all the functionality of your application from scratch. I hope this helps some one on their journey to Software Development as many other articles have help me through my own Journey.