Overthinking Problems for Fun and Learning - An Example with Arrays
Tags: javascript, freecodecamp, codenewbie
Published: 2021-02-09 04:29:00

#Why?
Recently I started doing something that I think is a lot of fun. Over thinking every problem I find. Exhaustively.

In this case, I was compelled by [freeCodeCamp](https://www.freecodecamp.org) to "Return the Largest Numbers in Arrays". I just decided to see how many ways I could solve it. Really dive deep in to the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) documentation for JavaScript Arrays to see what I could find. The problem at hand was this:

>Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.

#What'd I find?
I found four ways to solve the problem. 
##Array.map()
The first is using probably the most common method. Here I use `Array.map()` to return an array of the highest value found by `Math.max()`. It's short, it's sweet. If you're not aware, the map() function takes in a function that it applies to each of the elements of it's array.

![Shortest method to solve the problem discussed](https://dev-to-uploads.s3.amazonaws.com/i/ag3plar63u9l5ksg1fyn.png)

```
largestOfFourRefactored([[1,2,3,4],[10,9,3,5],[100,101,95,92],[85,98,74,12])
// returns [4,10,101,98]
```

##Nested Loops
The next is probably no surprise. It's really just `Array.map()` in long hand. I use the first loop (i) to go through the four subarrays, then use the inner loop (j) to find the maximum value for each of them. After the inner loop, I use a bit of that new(ish) array destructuring to build up my output, and then finally return it. The output is the same as above. Much more difficult to read though. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i9bzacr25gml2m4u62c3.png)

##Array.from()
I'll admit, I actually didn't know about `Array.from()` until yesterday when I was writing this code. This method takes in an array like object as it's first parameter and then runs the supplied function on each of them. It then returns the resulting array. 

The example that MDN gives looks like this:
```
Array.from([1,2,3], x => x * 2)
// [2,4,6]
```

So we can use it almost exactly like `Array.map()`. But it was new to me, so I wanted to share it. It can also do this with strings, so you could use it to filter letters out of a string if you wanted.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwa26i4fnqkksbxo7fnu.png)

##Array.forEach()
This example sort of combines `Array.map()` and the long hand form. I have to set aside an `output` variable, and then return it. But then I have to push data in to the array from `forEach()`. It works just as well as the others, and in a similar fashion.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lrukkj45z8nzhfqa92kv.png)

#Conclusion
I'll leave it up to you to decide which you like best. I personally prefer option one. It's so silky smooth and is easy to read. I know what I'm going to get from that right away. The others add in extra steps that aren't necessary... but do highlight the point that there are lots of ways to go about a problem.

I'd love to hear about it if you found other ways to do this problem. I'll definitely be posting more of these.

*This post is based on a video from [my YouTube channel](https://www.youtube.com/channel/UCV3CqbXc3vdWijpHM55g9bA)*