Write-up for LeetCode problem 2626. Array Reduce Transformation

Author: miorel

workspaces/javascript-leetcode-month/problems/2626-array-reduce-transformation/README.md

@@ -2,4 +2,10 @@
 
 [View Problem on LeetCode](https://leetcode.com/problems/array-reduce-transformation/)
 
+This is yet another problem asking us to re-implement some built-in JavaScript function. Here, it's actually slightly simpler than the built-in -- whereas [`Array.prototype.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) also passes an index to the reducing function, in this problem we don't care about the index, only the value.
+
+We can get a quick accept if we ignore the problem statement's request and use the built-in`.reduce`.
+
+For a more serious solution, we can go with any kind of loop over the array values, updating a result during the loop.
+
 Once you've worked on the problem, check out [the full write-up and solution](solution.md)!

workspaces/javascript-leetcode-month/problems/2626-array-reduce-transformation/solution.md

@@ -7,12 +7,22 @@
 
 ## Summary
 
+The solution needs to process all the array elements and pass them through a reducing function. Unlike the [`Array.prototype.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) built-in we're replicating, we don't have to pass in an index to the reducer function, but order still matters, since the reducer could be something like `(accumulator, element) => 2 * accumulator + element`.
+
+Any approach that processes elements in the appropriate order will work well. I'd recommend an iterative solution using a simple loop, though it's a good idea to also become comfortable with recursive implementations.
+
+We can also get accepted by simply using the built-in `.reduce`, since LeetCode doesn't enforce that we don't. Or, we could use [`.reduceRight`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight) instead and claim that it's technically not `.reduce`.
+
 ## Background
 
 ## Solutions
 
+It's solution time!
+
 ### Using `Array.prototype.reduce`
 
+Let's kick off using the built-ins, for some quick gratification. In pure JavaScript it's very concise:
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378766665/)
 
 ```javascript []
@@ -25,6 +35,8 @@
 const reduce = (arr, fn, init) => arr.reduce(fn, init);
 ```
 
+In TypeScript, let's modify LeetCode's solution template and generalize our function using generics. We'll use one type parameter for the type of the array elements and one for the type of the result, as described in more detail in [another write-up](../2635-apply-transform-over-each-element-in-array/solution.md).
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378765352/)
 
 ```typescript []
@@ -35,6 +47,8 @@ const reduce = <TElement, TResult>(
 ): TResult => arr.reduce(fn, init);
 ```
 
+We can also get weird. If you're new to JavaScript, please ignore this next solution, it's not meant to be easy to interpret.
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378767802/)
 
 ```javascript []
@@ -47,8 +61,14 @@ const reduce = <TElement, TResult>(
 const reduce = Function.prototype.call.bind(Array.prototype.reduce);
 ```
 
+Understanding why the above works was a bonus question in [another write-up](../2635-apply-transform-over-each-element-in-array/solution.md). Read about it there if you're curious, but otherwise don't worry about this code too much.
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378777231/)
 
+### Using `Array.prototype.reduceRight`
+
+For a clearer conscience, we can also go with `.reduceRight`, but we'll have to reverse the array to make sure elements are processed in the appropriate order. The built-in `.reverse` mutates the array it's invoked on, so if we want to avoid mutating the input, we'll have to copy it, using [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) for example.
+
 ```typescript []
 const reduce = <TElement, TResult>(
   arr: readonly TElement[],
@@ -57,6 +77,8 @@ const reduce = <TElement, TResult>(
 ): TResult => [...arr].reverse().reduceRight(fn, init);
 ```
 
+We can also use the more recently-added [`.toReversed`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed) to get a reversed copy of the input. The function is available in LeetCode's environment, but TypeScript doesn't know that it is, so we'll have to help it out by adding some functions to the core interfaces for `Array` and `ReadonlyArray`.
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378778477/)
 
 ```typescript []
@@ -79,6 +101,8 @@ const reduce = <TElement, TResult>(
 
 ### Iterative
 
+The iterative solutions are the ones I recommend for this problem, because I think they read quite nicely. For example, a simple `for...of` loop works great, since we don't care about indexes:
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378776182/)
 
 ```typescript []
@@ -97,6 +121,8 @@ function reduce<TElement, TResult>(
 }
 ```
 
+Alternatively, try a `.forEach`:
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378776438/)
 
 ```typescript []
@@ -115,6 +141,8 @@ function reduce<TElement, TResult>(
 }
 ```
 
+If we don't mind mutating the input array, we can also remove elements from it, one-by-one, and destructively reduce to a result:
+
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378781727/)
 
 ```typescript []
@@ -134,6 +162,9 @@ function reduce<TElement, TResult>(
 }
 ```
 
+> [!NOTE]  
+> **Why use `.reverse` and `.pop` instead of `.shift` in the destructive implementation?** The answer is at the bottom of this doc.
+
 ### Recursive
 
 [View Submission on LeetCode](https://leetcode.com/problems/array-reduce-transformation/submissions/1378782688/)

workspaces/javascript-leetcode-month/problems/2634-filter-elements-from-array/README.md

@@ -2,7 +2,7 @@
 
 [View Problem on LeetCode](https://leetcode.com/problems/filter-elements-from-array/)
 
-This is one of many problems that essentially ask us to implement some built-in JavaScript function. Here, we're asked to implement filtering without using [`.filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), so of course the first thing we should do is get accepted using `.filter`!
+This is one of several problems that essentially ask us to implement some built-in JavaScript function. Here, we're asked to implement filtering without using [`.filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), so of course the first thing we should do is get accepted using `.filter`!
 
 For a more serious solution, a loop that builds the result works just fine.
 

workspaces/javascript-leetcode-month/problems/2634-filter-elements-from-array/solution.md

@@ -55,7 +55,7 @@ We can also get weird. If you're new to JavaScript, please ignore this next solu
 const filter = Function.prototype.call.bind(Array.prototype.filter);
 ```
 
-Understanding why the above works was a bonus question in [an earlier write-up](../2635-apply-transform-over-each-element-in-array/solution.md). Read about it there if you're curious, but otherwise don't worry about this code too much.
+Understanding why the above works was a bonus question in [another write-up](../2635-apply-transform-over-each-element-in-array/solution.md). Read about it there if you're curious, but otherwise don't worry about this code too much.
 
 ### Iterate and Build