Add separate odd and even numbers example

README.md

@@ -1,6 +1,6 @@
 # Avoid writing slow JS code
 
-A practical guide to improve the performance of your JS code.
+A couple of rules to improve the performance of your JS code.
 
 ## What is this ?
 
@@ -18,11 +18,13 @@ A practical guide to improve the performance of your JS code.
 
 1. Avoid **nested loops** when possible.
 
-  - [Filter invited guests](examples/filter-invited-guests/README.md)
-  - [Group clients with their orders](examples/group-clients-with-orders/README.md)
+  - **Use a Set:** [Filter invited guests](examples/filter-invited-guests/README.md)
+  - **Use an index:** [Group clients with their orders](examples/group-clients-with-orders/README.md)
 
 2. Avoid **creating new objects** when possible.
 
+  - **Mutate the array:** [Separate odd and even numbers](examples/separate-odd-even-numbers/README.md)
+
 Yes, those are all the simple rules I could come up with so far. I will add more rules soon :)
 
 ## Contributing

examples/separate-odd-even-numbers/benchmark.js

@@ -0,0 +1,42 @@
+const numbers = [];
+for (let i = 1; i < 100_000; i++) numbers.push(i);
+
+export const inputs = {
+  "1k integers": integers.slice(0, 1000),
+  "10k integers": integers.slice(0, 10_000),
+  "100k integers": integers.slice(0, 100_000),
+};
+
+function slow_solution(integers) {
+  return integers.reduce(
+    ({ odd, even }, n) => {
+      if (n % 2 === 0) return { odd, even: [...even, n] };
+      return { odd: [...odd, n], even };
+    },
+    { odd: [], even: [] }
+  );
+}
+
+function faster_reduce_solution(integers) {
+  return integers.reduce(
+    (res, n) => {
+      if (n % 2 === 0) res.even.push(n);
+      else res.odd.push(n);
+      return res;
+    },
+    { odd: [], even: [] }
+  );
+}
+
+function faster_filter_solution(integers) {
+  return {
+    odd: integers.filter((n) => n % 2 === 1),
+    even: integers.filter((n) => n % 2 === 0),
+  };
+}
+
+export const fns = {
+  slow_solution,
+  faster_reduce_solution,
+  faster_filter_solution,
+};

examples/separate-odd-even-numbers/template.md

@@ -0,0 +1,49 @@
+# Separate odd and even numbers
+
+## The problem
+
+You have a list of integers:
+```js
+const integers = [1, 42, 7, 37, 2, ...]
+```
+
+Your goal is to separate odd and even numbers:
+
+```js
+const separated = {
+  odd: [1, 7, 37, ...],
+  odd: [42, 2, ...],
+}
+```
+
+## Slow solution
+
+```ts
+{{code_slow_solution}}
+```
+
+**Why is this slow?**
+
+We are creating a new array and new object on each iteration of the reduce callback.
+
+## Faster reduce solution
+
+```ts
+{{code_faster_reduce_solution}}
+```
+
+**Why is that faster?**
+
+This mutates the arrays instead of creating new ones. So **we avoided creating unneeded objects** successfully.
+
+## Alternative solution without mutation
+
+if your coding style forces you not to mutate variables. You can avoid using `.reduce` and use `.filter` instead. Which is cleaner in my opinion:
+
+```
+{{code_filter_solution}}
+```
+
+## Benchmark
+
+{{benchmark}}