JS Guide: Map, Reduce, Filter and forEach Methods
Tags: javascript, node, typescript, webdev
Published: 2023-06-11 08:48:29

## Post Topics
- [Describes of these methods](#describe-methods)
- [Examples of these methods](#examples-of-methods)

---

> In JavaScript, `Map`, `Reduce`, `Filter`, and `forEach` methods are commonly used in functional programming paradigms. Each of these methods serves a specific purpose and can be used to manipulate arrays or iterables in a functional and declarative manner. Here's a brief description of each method and its functional programming application:

---

## Describe Methods

> <h4>`Map`</h4> The <mark>`map`</mark> method is used to transform each element of an array into a new value, creating a new array with the transformed values. It applies a provided function to each element and returns an array of the same length as the original, with each element transformed based on the function's logic. The original array is not modified. <mark>`map`</mark> is useful for performing one-to-one transformations.

> <h4>`Reduce`</h4> The <mark>`reduce`</mark> method is used to reduce an array to a single value by iteratively applying a function to each element of the array. It takes an accumulator and a current value and returns the updated accumulator value for the next iteration. The final result is the accumulated value. <mark>`reduce`</mark> is useful for operations like summing the elements, finding the maximum or minimum value, or any operation that requires combining values from an array.

> <h4>`Filter`</h4> The <mark>`filter`</mark> method is used to create a new array with elements that pass a certain condition. It applies a provided function to each element and includes the elements in the resulting array if the function returns true. <mark>`filter`</mark> is useful for selectively extracting elements from an array based on specific criteria.

> <h4>`forEach`</h4> The <mark>`forEach`</mark> method is used to perform an operation or side effect on each element of an array without creating a new array. It applies a provided function to each element but does not return anything. <mark>`forEach`</mark> is useful for executing a function for its side effects, such as logging, updating external variables, or making network requests.

---

## Examples of Methods

- <mark>Map Example</mark>

```javascript
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((num) => num * num);
// squared is now [1, 4, 9, 16, 25]
```

> <mark>`Explain:`</mark> The given code declares an array called numbers with values [1, 2, 3, 4, 5], and then uses the map method to iterate over each element of the numbers array and apply the arrow function `(num) => num * num` to square each number. The resulting squared values are stored in a new array called squared, which becomes [1, 4, 9, 16, 25].

---

- <mark>Reduce Example</mark>
```javascript
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
// sum is now 15
```

> <mark>`Explain:`</mark> In the given code, the reduce method is used on the numbers array. The arrow function `(acc, num) => acc + num` is applied iteratively to each element of the array. The reduce function starts with an initial value of 0 (0 is passed as the second argument to reduce). During each iteration, the current element num is added to the accumulator acc. At the end of the reduction process, the final accumulated value is stored in the sum variable, which becomes 15 in this case, as it represents the sum of all the numbers in the array [1, 2, 3, 4, 5].

---
- <mark>Filter Example</mark>

```javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers is now [2, 4]
```

> <mark>`Explain:`</mark> In the provided code, the filter method is used on the numbers array. The `arrow function (num) => num % 2 === 0` is applied to each element of the array.
> The condition `num % 2 === 0` checks if the number is even. If the condition evaluates to true, the number is included in the resulting array. Otherwise, if the condition is false, the number is filtered out. In this case, the resulting array evenNumbers contains only the even numbers from the original numbers array, which are `[2, 4]`. 

---

- <mark>forEach Example</mark>

```javascript
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
// prints each number in the array
```

> <mark>`Explain:`</mark> In the given code block, the forEach method is used on the numbers array. The arrow function 
> `(num) => console.log(num)` is executed for each element of the array. During each iteration, the arrow function is called with the current element num as its argument. In this case, the arrow function simply logs the value of num to the console using `console.log()`. As a result, when this code block is executed, it will print each number in the numbers array to the console, one by one.

---

- Follow me on 👾 YouTube and Github link in bio. 
- Thank you for taking the time to read our blog post. Your support is greatly appreciated!🙋

---

### <u>References:</u>
- [ChatGPT](https://openai.com/blog/chatgpt)

## My other contents
- [A-Z: MongoDB Cheat Sheet🌱](https://dev.to/burakboduroglu/mongodb-cheat-sheet-1a6a)

- [Building a Node.js Server Without Using Express.js🐤](https://dev.to/burakboduroglu/building-a-nodejs-server-without-using-expressjs-3mc8)

- [Boost Your Programming Efficiency: Essential Tools for Success ⚙️](https://dev.to/burakboduroglu/boost-your-programming-efficiency-essential-tools-for-success-5h00)

- [A-Z: Git Cheat Sheet🔥](https://dev.to/burakboduroglu/a-z-git-cheat-sheet-14pm)

- [Understanding CORS and Same Origin Policy in Web Security🚨](https://dev.to/burakboduroglu/understanding-cors-and-same-origin-policy-in-web-security-54hm)