The Find , Filter and Reduce Methods
Tags: javascript, webdev, beginners, programming
Published: 2023-05-15 04:40:20

## 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. 

```javascript
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.   

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

console.log(bellaThePoodle); 
```
```JavaScript
{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.

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

console.log(beagles);
```
```JavaScript
[
{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.

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

console.log(`Total Dog Weight: ${totalDogWeight}`);
```
```JavaScript
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.