I’ve seen a lot of people struggling to understand map/reduce functions. They either think it’s too complicated to understand, or they think it’s a “big data thing” they won’t need. Well guess what, I disagree. strongly You can read this if you are wondering what a map/reduce is, or perhaps to convince your boss that using map/reduce in real-life apps is an awesome style-guide tip \o/ Or perhaps just for fun. Because is fun. We all know that. programming Let’s play a game of “what does this code do?” To play this awesome game, let’s pretend you are new to programming. You don’t have 10 years of experience at reading weird, imperative code. You are asked to read a piece of code in order to understand what it does. Imperative style (difficulty: harder than it should be): : Perhaps you didn’t even realized it, but you had to actually imagine you’re the computer, and follow the lines until you compute the kind of result you would expect from this. If you’re even better, you probably figured out that this code was intended to sum the square numbers of the odd numbers of our input array. Soluce in your head Was that really simple ? Functional style (difficulty: easy. Unless you’re too much used to imperative style. And you should change that. Seriously.): This code does the same thing. But instead of reading to get the result, this emphasis the result should be. It is actually almost literally saying: how what start with our input numbers select odd numbers compute all their squares sum the result Which is about exactly how would describe this algorithm if you were asked to. Details of what an odd number is, what a square is are also available, but you don’t have to read it thoroughly to get the big picture. you Want another example ? How about a recommendation algorithm. This is complicated stuff. Not a simple numbers sum.We will use for even more readability: typescript I personally think this is some quite readable code. The 6 first lines should be enough so that you get what’s going on here. If you’re not convinced enough, try to imagine doing the same with loops. forEach 2. What kind of magic is this ? If you’re totally new to map/reduce/filter operators, here’s a very simple description of what they are intended to do: will simply apply a function to all the elements of an array. So basically, will return a new array that contains Note that both you and the compiler know that the output will have same size as the input. Also, if returns a number, then you’re to obtain an array of numbers. Smart languages like typescript can take advantage of this, and so does anyone who read your code map [x, y, z].map(f) [f(x), f(y), f(z)]. f guaranteed will simply select some elements in your array, by testing them against the provided function. An array of numbers will still return an array of numbers, but its size will probably have changed. Note that your original array is remained unchanged through the process. filter will “crush” an array to return some value. Unlike map, the function will take the array as a whole, and compute something on it. In our scenario, we added every value until we get the sum of the array of the elements. Typical examples are computation of sums, averages, or object constructions. for example: reduce reduce Soo… no more _forEach_ ? Well, I think forEach is ok if you want to iterate over objects, while returning nothing each time you do so. looks ok to me. using a would only return an array of nothing. We obviously ignore the result here so it’s ok. myArray.forEach(console.log) map However, is probably wrong. Most of the time you want to do something with the result. myArray.forEach(someFunctionThatReturnsSomething) Conclusion Congrats, map/reduce is no longer such a mystery for you. Or perhaps it is ? Freel free to ask or drop some comments !
