Map, Filter, and Reduce using emojis!
Array methods can be hard to grasp
The example I originally found
The problem with this layout is that while it visually provides a decent representation of how the methods work, it doesn't actually show how they would be written when you attempt to use them in a real code file.
Now that I know how these methods work and use them regularly since I started to learn React, I wanted to share what I learned, using this awesome visual example, but in a way that would help someone who doesn't know the exact syntax, something I wished I had found when searching for a visual representation of these methods.
The Tweet that sparked the article
I tweeted this out after thinking about this problem and some discussion on another post about how the previous example missed out on the syntax and could be misleading to someone who doesn't fully grasp the concepts yet. I'm always looking for a way to ease learning things that took me some time, in an attempt to help people where I struggled on my journey of learning.
The code and links!
The official MDN docs if you want to read more about the map method.
[🥚,🐷,🧈].map(cookBreakfast) => [🍳,🥓,🥞];
The official MDN docs if you want to read more about the filter method.
[🍓,🌽,🌶,🍒,🥦].filter(isFruit) => [🍓,🍒];
The official MDN docs if you want to read more about the reduce method.
[🍅,🧄,🧅].reduce(sundaySauce) => 🍲;
I hope you found this helpful. This was the most fun and straightforward way to give a good visual example of the array methods!
If you enjoyed this article and would like to see more tips or learn more about how I learn aloud, please feel free to follow me on Twitter @Devindford!