An Introduction to Functors in JavaScript: The Basics in 9 Minutes with Examples

A functor is a data structure that can be mapped over using a custom mapping interface. In order words, a functor asks as a wrapper around data which can expose that internal data with that mapping interface. The newly transformed data after mapping gets placed back into a new functor.
This process allows for some interesting composition, specifically function composition since we can chain functions to one another.
Functors are a central topic in functional programming. If you don't know much about functional programming, I made two other videos that touch on topics within the paradigm.
🎬 Subscribe to the channel! - / @ijemmaonwuzulike
Higher-Order Functions: • JavaScript Higher-Orde...
Pure Functions: • JavaScript Pure Functi...
Timestamps:
0:00 Intro
0:59 What Are Functors? Arrays as Functors
2:28 Functor Laws
2:38 Identity Law
3:14 Composition Law
5:50 Debugging with Function Composition
6:28 Promises as Functors
8:00 Build Your Own Functor
9:13 Make Your Functor Iterable
== Let's Connect ==
🐦 Twitter - / ijemmaohno
== Who I Am ==
I'm Ijemma, a frontend software engineer currently working in New York City. I make videos on all things JavaScript and, more broadly, frontend web development.
#javascript #webdevelopment #softwareengineer

[@hansschenker]

Congratulations for the clear and easy going explanation! So far the best functor explanation on YT.

[@Kirshach]

Why on earth does this video have so little views, that was a great explanation!

[@FernandoBasso]

If I find the devs who didn't watch or +1 this video, they'll have hell to pay. Leave it to me.

[@licriss]

So good to finally find an accurate explanation with concrete yet simple examples, thanks!!

[@IjemmaOnwuzulike]

glad you enjoyed it!

[@NillKitty]

This video has extreme value in that it demonstrates scary FP concepts without using FP syntax. It's extremely easy to see what a "functor" is when you can see it in a language most people already understand. Great job and super high production quality skills; wish my tech videos looked this good. What do you use your graphics and how long does it take to put a video like this together?

[@IjemmaOnwuzulike]

Thank you! I'm glad the video was helpful, it takes me a week to write the script, record, and edit the video - i used after effects for the animation and final cut for the editing

[@greenhorn7189]

Great explains for begineers. Keep doing with live Example. Thank you a lot

[@QRSTUVWXYZ123ify]

Okay this is fun. I had a look at Wikipedia article *functor* and was afraid to then watch this video. But having enjoyed and benefitted from other videos you've shared, I worked through this. Pretty sure that I can get this by watching a few more times and writing code following along, grokking all the steps by repeating till the ah~ha arrives. You've done a great job making this approachable. Thank you!

[@IjemmaOnwuzulike]

ayye love to hear it, let me know if there's a point in the video you want me to diver deeper into✨

[@bullettime2808]

I'm glad I found your channel it's a goldmine

[@SuperChukwudalu]

Best Functor video. Really simple.

[@celiacasanovas4164]

This video is invaluable. Thank you for taking your time to explain FP concepts derived from category theory in a demistified, practical and clear way.

[@antoniozeajr.4702]

Best explanation after two days searching

[@superchillh3o]

Very similar to Brian Lonsdorf content, thank you so much for creating this, clear, concise, and practical!

[@IjemmaOnwuzulike]

thank you so much, I'm glad you enjoyed it!

[@elatedbento]

Excellent, precious video. Would you be so kind to do one about Monads? Please do one on monads. We desperately need one! Thanks 😃

[@femiabolaji1809]

Coming back to this video to say it is amazing.

[@scfoxcode]

Really nice explanation. I've played around with Haskell and Elm, but never really got the whole Functor, Applicative, Monad business. Having another crack at it and this video is great

[@andypsolomon]

This was great. The best explanation of Functors I've ever heard.

[@Faruk-zt5iw]

This is the by far the best video on functors.

[@SuperQuwertz]

Yo I want a series on fp-ts from you The video was great and easy to understand

[@janduna4100]

Amazing content, so clearly conveyed with irrelevance omitted. Love it!

[@klebergermano3356]

The best video that I found about Functors with a great and concise explanation, thank you

[@benjaminstorrier]

I actually understand now. Brilliant :) ❤

[@damickillah]

You simply and absolutely should have more subscribers, due to this video alone. However, I skimmed through some of your other videos and your videos are immaculately produced and presented. I love to see it! Props & respect!🥰 SUBSCRIBED!!!!!

[@EduardoLarios95]

This video was amazing, you totally made the topic more understandable for someone with C#/TS experience wanting to jump to some more functional concepts. Subscribed :)

[@ayushcodes]

this is a very great explanation, thank you!!!

[@balanced-living]

Amazing video ❤, like your style of explanation

[@andriilukianenko8106]

Hi, Ijemma! Thanks for the content, it's earned my Like. I'd like to add a bit to the 'nestedNumbers' vs 'chainedNumbers': indeed, reading chained map() calls is easier and we can plug in trace/tap() for debugging, and certainly looks better than e(g(f(x))). Luckily, FP gives us one more cool feature - compose(). h = compose(e, g, f) . -> map(h)

[@BrunooS15]

Thanks so much for this video!

[@williamb.2031]

Fantastic video! :) thanks!

[@edmundekott9463]

Thanks so much for this, it was super helpful

[@IjemmaOnwuzulike]

Glad it was helpful!

[@rashidakhan77]

Very nice lesson!

[@lateAutumn314]

Damn, super interesting tutorial!

[@hugodsa89]

Awesome content really love it ! ❤️

[@rasmusl2067]

Great content!

[@definty]

Your channles so usefull and to the point. I love it! Thx for the content. BTW your missing a closeing parenthesis on the example at 3.28

[@khaled.noordin]

Nice topics. Thanks mam

[@paularah8877]

love it!

[@zemaumm]

This video is SO good

[@justinhj1]

I really enjoyed this video for the content but also the production style. What tool do you use for the animated on-screen content if you don't mind me asking?

[@rorycawley]

Nice content!

[@processorbot8761]

damn great video

[@SuperQuwertz]

Also the other concepts of fp please, like Monads etc. Especially in the context of Typescript

[@ehza]

this is so cool

[@whatthefunction9140]

Functors are funky

[@anhi399]

I too wanna say howdy to Don, Ramy, and Chadwick--Ijemma knows what's up

[@elatedbento]

Quick question: if I map to a different type, such as going from an array of strings to an array of ints, is it still a functor? If I do ["John", "Mary", "Kate"].map(name => name.length), thus changing the inner type, is it still a functor or a different kind of functor?

[@madlep]

Yes. Still a functor. Functors are “structure preserving”, so an array functor has to map to another array functor. And it’s totally fine and used often to change the inner type. What it CAN’T do is return a different type of functor - like a promise, or an option, or a result etc (well, there’s nothing stopping it doing that, but it wouldn’t be a correct functor implementation, and it would be considered a bug)

[@elatedbento]

​@@madlepthank you so much for taking the time to explain. I really appreciate it! ❤

[@meht8]

You awesome

[@CarmelleCodes]

these animations!! yes!!!!

[@IjemmaOnwuzulike]

ahhh tysm 😭✨

[@kaungsithu7377]

more videos about applicative functor

[@jongeduard]

This is really funny. This explanation of a Functor is really somewhat different from what I have seen from a C++ tutorial. To me it looks like a specific version of it, not the whole story. In that tutorial a functor was explained as an object that behaves like a function. It did this by directly implementing the function call operator, so that it could literally be called as if it where a real function. And ok, I know JS does not have operator overloading, so then it that map method and that then method are ways to replace that. But this is all not the issue. In that C++ explanation they where NOT talking about that whole identity rule, just about composition. They did not require that the created function should return a new data structure or a new functor, but the generated function was just returning a single value like an integer for example. Was that a wrong explanation? I would say, that identity thing is more important for Monads, which are basically very related, but which indeed require both a wrapped type as imput as well as that they return the that wrapped type (arrays or lists are a good example, but the Option and Result types in the Rust language are also great examples of monads). I am really interested in anyones reply on this, learn me more.

[@Lambdaphile]

wtf, insta sub!

[@quickfingers5982]

what is functor identity and what are the use cases?

[@IjemmaOnwuzulike]

Functor identity is one of the laws that an object must follow in order to be considered a functor. So a quick way to tell if an object is a functor is to see if it doesn't change in shape or value after its mapping interface has been called on it. A mapping interface would be the strap "map" function or the promise "then" function

[@quickfingers5982]

@@IjemmaOnwuzulike thank you very much! are we saying that we only implement identity so it's satisfied a functor? in a real world we don't use it?

[@IjemmaOnwuzulike]

It's more like a characteristic of an object that needs to be present in order to be considered a functor. It's like how for a car to be considered a car it needs four wheels, a steering wheel, an engine, etc. There are properties (or satisfied laws) that an object must have to be a functor. This topic me a while to get used to let me know if you have more questions!

[@quickfingers5982]

@@IjemmaOnwuzulike this is all good. Thank you! appreciate it.

[@parkerbordeaux7388]

Calling this a functor is the silliest thing I’ve ever heard in my life

[@jewulo]

Why are you calling a container data structure a functor. This just seems like a ruse for FP people to sound like they are smarter than everyone else. IMHO.

[@IjemmaOnwuzulike]

tbh people who use the term casually in everyday technical discussions might be showing off, but there's value knowing vocabulary associated with common data structures