3 JavaScript array methods with emojis!

3 JavaScript array methods with emojis!

Featured on Hashnode

Map, Filter, and Reduce using emojis!

Array methods can be hard to grasp

As I began learning JavaScript, I found that learning array methods was one of the more difficult concepts to grasp. I'm a visual learner personally, and sometimes it helps to see real-world examples of how these things are applied to really grasp what they are used for. I searched through images to find code examples, and I was actually surprised to find some people using emojis to illustrate how they worked, which was great. The problem was that the syntax didn't add up. They assumed you fully understood how to write these concepts and skipped over some parts that could trip you up if you just tried to apply them the way they were shown.

The example I originally found

map-filter-reduce with emojis examples #1

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.

Map:

The official MDN docs if you want to read more about the map method.

[🥚,🐷,🧈].map(cookBreakfast) => [🍳,🥓,🥞];

Filter:

The official MDN docs if you want to read more about the filter method.

[🍓,🌽,🌶,🍒,🥦].filter(isFruit) => [🍓,🍒];

Reduce:

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!

 
Share this