From 544e3561dd95673848a292e6b06c76e3c6ba4b5c Mon Sep 17 00:00:00 2001
From: thomasabishop <thomas.actonbishop@bbc.co.uk>
Date: Mon, 24 Apr 2023 09:12:38 +0100
Subject: [PATCH] notes on simplifying map and filter to reduce in JS

---
 .../Patterns/Map_and_filter_to_reduce.md      | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 Programming_Languages/JavaScript/Patterns/Map_and_filter_to_reduce.md

diff --git a/Programming_Languages/JavaScript/Patterns/Map_and_filter_to_reduce.md b/Programming_Languages/JavaScript/Patterns/Map_and_filter_to_reduce.md
new file mode 100644
index 0000000..3330d78
--- /dev/null
+++ b/Programming_Languages/JavaScript/Patterns/Map_and_filter_to_reduce.md
@@ -0,0 +1,52 @@
+---
+categories:
+  - Programming Languages
+tags: [javascript, functional-programming]
+---
+
+# Expressing combined map and filter operations to a single reduce
+
+## `map` + `filter`
+
+The following combines a `map` and a `filter` to square a list of numbers and then filter the ones that are greater than or equal to 10:
+
+```js
+const arr = [1, 2, 3, 4];
+
+const filteredSquaredNumbers = arr.map((x) => x * x).filter((y) => y >= 10);
+```
+
+Using `reduce` we can combine these operations more concisely:
+
+```js
+const filteredSquaredNumbers = arr.reduce((acc, x) => {
+  const squared = x * x;
+  if (squared >= 10) {
+    acc.push(squared);
+  }
+  return acc;
+}, []);
+```
+
+## `filter` + `map`
+
+Here we use a filter and then a map to filter the even numbers and then double them:
+
+```js
+const arr = [1, 2, 3, 4];
+
+const evenDoubled = arr.filter((x) => x % 2 === 0).map((y) => y * 2);
+```
+
+Using `reduce` :
+
+```js
+const evenDoubled = arr.reduce((acc, x) => {
+  if (x % 2 === 0) {
+    acc.push(x * 2);
+  }
+  return acc;
+}, []);
+```
+
+> The empty array [] is the initial value of the accumulator. As the callback function processes each element of the array, it can add or modify the accumulator based on the desired logic. By providing an empty array as the initial value for the accumulator, we ensure that the results will be collected in a new array without modifying the original array.