Learn Pure Functions In 10 Minutes

Functional programming is constantly on the rise, and with functional programming comes pure functions. Pure functions are the base of what functional programming is built upon, but they are useful even outside of functional programming. The idea of a pure function is a function that when given the same inputs always returns the same output. This function also must have absolutely no side effects and rely on no other state besides the input variables. It essentially works exactly the same as a math function. 2 + 2 always equals 4 no matter how many times you execute the function. 2 + 2 also never effects anything else outside it. For example 2 + 2 never causes 3 to change to 7 or some other side effect.
In this video I will be covering pure functions in depth by example. We will take an impure function and incrementally modify it so it is a pure function by the end of the video. I will also discuss the advantages and disadvantages of pure functions.
📚 Materials/References:
Pure Functions Article: blog.webdevsimplified.com/202...
ES6 Rest/Spread Operator Video: • Why Is Array/Object De...
🧠 Concepts Covered:
- What a pure function is
- How to avoid side effects
- Why pure functions are important
- The limitations of pure functions
- Immutability in pure functions
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#PureFunction #WDS #FunctionalProgramming

[@namelikeemid]

Just wanted to say that this is my favorite channel for learning web dev. Your lessons are consistently to the point and concise, and it's done in a way anyone learning JS may understand. Keep up the great work!

[@WebDevSimplified]

Thank you so much! Kind comments from people like you that appreciate my videos are what keep me motivated to continue creating even on the days I feel unmotivated.

[@teenytinytoons]

yeah, this guy is brilliant. it's basically my main channel.

[@jamjam3448]

@@WebDevSimplified good 😊 😊 😊

[@laxmikanthgurram1074]

Whenever I have a concept that I want to learn,I roam around all the channels and end up coming back here ,because I know . in every video here kyle takes utmost care to cover all the scenarios related to the concept and presents it in the simplest manner possible.He leaves no stone unturned.Thank you kyle!!

[@palent4869]

I call your channel and I get the same results every time. Lessons that really help me that are clearly explained, plainly spoken with no confusing arrogance . You sir are a living pure function!

[@hyfydistro]

Pure functions 👏👏👏 - Great for unit testing - Does not change the original value - Does not affect anything outside (e.g. database, files) - Minus the side effects

[@chasjadmahmood4875]

Always same output for same input

[@RameenFallschirmjager]

This dude is super awesome amazing! Something that I love about his tutorials is that he teaches in a very solid way. I mean, if there is something important, some lesson which is preliminary to understand current lesson, Kyle already has made it, he points it us so in case we need it we can learn it conveniently. Just amazing bro, just amazing. Very well structured and great approach.

[@abhayganti8662]

This is the best web dev channel. The explanations and very solid and simple. Thank you so much

[@thatoneuser8600]

Brilliantly explained, thank you so much for making this video!

[@raisedbyreels]

Clear and right to the point. That's why I always come back!

[@coplepk04]

Great videos, very concisely explained. I just watched your memoization video and it was so easy to understand. Keep up the great work.

[@a_maxed_out_handle_of_30_chars]

simple and to the point, thank you :)

[@NathanMcclure]

your vids are amazing and the first place I come for support. thank you!

[@vintiray6251]

your explanation is just awesome buddy!

[@sacrajah]

Awesome explanation for the pure function.. Thank you.

[@lassebrustad]

I've seen this video twice now. first before I got into a job, and now when I have a job the first time, I didn't really think it would matter a lot, because I was the only one working on my code now, I've been told multiple times at my job that testing is nessessary when changing stuff because it can mess up something else my next hobby projects will absolutely be based on pure functions, for sure!

[@mohammedalmukhtar8949]

Thank you, Kyle! Your videos helped me alot and I'm grateful to you for sharing your knowledge and expertise with us. Not many people are humble and generous when it comes to sharing their knowledge as they think it would affect their positions. Because of you I'm now interviewing more and opening more doors than I did before I subscribed to your channel. God bless your heart man. Keep up the good work and thanks again! Mohammed

[@WebDevSimplified]

Thank you so much. You are too kind. I think it is important for me to be open and honest with my own learning process since everyone started knowing nothing and it can be discouraging when people pretend like they never struggled or always knew everything.

[@dmitriymovchan6563]

Great explanation! Thank you!

[@madhousenetwork7765]

Finally understood this concept. Wow!

[@ahmadelbullock4432]

I have learned a lot from you to the extent that I feel I owe you

[@BrianHartman]

Really love how concisely and clearly you explain things. :) One question: Isn't this just a classification of a function, rather than a method of coding? Pure functions seem like they'd be really good for performing single tasks repeatedly, but a lot of times (as you say), you *need* the functions to do something more.

[@chrislr4302]

I would add that 'pure function' allows to use streams and parallel processing. This is a secured way to parallel processing, and also to compose functions, it is backed by the mathematic concept called "monads". We could do parallel processing with imperative style but it is so risky that it was rarely done. The moderns web sites (helped by javascript language progress) rely heavily on parallel processing secured by a functional style using pure function. A flow in input must always creates a new flow on output. I think you could explain this more clearly than me ....

[@navrobot]

Best explanation on the Subject !!!!

[@deepumon.d3148]

I'm a new subscriber after watching your videos since a week.

[@filemomb984]

Excellent, as always. Tks!

[@UmarAlFarooq]

Great piece of knowledge!!

[@maskman4821]

Thank you for explaining what pure function is and what it does !!! I have learned something.

[@WebDevSimplified]

You're welcome!

[@deemon710]

Nice. I wasn't aware that passing in the array as 'a' and changing 'a' would also change 'array'. Good to know. Thanks!

[@mdhaseeb4106]

great explanation man

[@lungaphakathi9915]

thank you, this was so useful

[@busyrand]

Beautiful... This content is helping me become a better developer.

[@joegrant4499]

Really clear and well explained. Great video

[@WebDevSimplified]

Thank you!

[@kingelisha7001]

Great video Kyle

[@geneanthony3421]

Didn't know it was called pure functions but I learned this technique years ago from I think Code Complete. Much easier to test when each function does one thing and one thing well and you use a controller to receive and send input. Also suggest programming to interfaces and passing them instead of implementations to make it easier to mock.

[@RogerThat902]

Great video as always. Would love to see you refactor some "real" code w/ common tasks to make it more functional. Thanks for not making this stuff overly complicated!

[@WebDevSimplified]

That is a great suggestion. My very first code review video I did a lot of refactoring of code to make it more functional and to cut out as many side effects as possible. You can find it on my channel if you search back a little ways.

[@homernguuyen6246]

appreciate your work, Kyle. Could you mention what that video is?

[@maskman4821]

great content, I have learned something, pure functions rule !!!

[@vladimirjean]

Thanks, great explanation !!!

[@WebDevSimplified]

You're welcome!

[@MrGarysjwallace]

Makes MUCH sense!!- txs

[@stylesg7818]

Hi Kyle. I enjoy your videos very much they help me sharpen a lot of concepts. I was wondering if you have any videos or series about testing in the pipeline;

[@WebDevSimplified]

Thank you! Testing is something I want to cover in depth since I really actually quite enjoy it. I am thinking about doing something about testing after my React course is done.

[@Pareshbpatel]

Excellent explanation of Pure Functions. Thank you, Kyle {2021-07-04}

[@juliusv2073]

great channel, kudos

[@andrewxaxa]

Very good explanation

[@maldoror4035]

Great explanation. Another thing you could have added is that pure functions are easy to move. If you want to move a pure function to a shared service, no big deal. Another important thing is that purity is not an all or nothing notion. For example you can have a function that writes in a database AND relies on a global variable ! Better pass the variable as an argument. That will make the function purer. Therefore easier to test and to move if needed.

[@vinothkumarv9722]

Well bro.. thanking you.... u are greeeeat.............................:) i am clear this concepts

[@sonamuhialdeen7866]

So good tutorial

[@ryanquinn1257]

One thing to add now that serverless and edge are bigger with things like next js is that pure functions can help save a lot of cloud processing money in web world. You can run the functions for a lot cheaper a lot more places closer to users if they’re not having to communicate with DB or do fancy things. You’re getting a virtual machine to run thousands of mini virtual boxes to thousandths the cost at times. I can recall my College professor’s heavy accent yelling ULTIMATE RE-USEABILITY, EXTENDABILITY, TESTABILITY.

[@rangabharath4253]

Awesome as always 👍😀

[@WebDevSimplified]

Thank you!

[@matejbeno569]

Thank you, just found my new favorite channel! :D

[@WebDevSimplified]

Thank you! I really hope my future videos don't disappoint.

[@thaddeausiorbee6414]

👋. Can you make a short tutorial on how to implement dynamic drop down list using react?

[@mikeonthebox]

One thing you are forgetting is that Math.random() doesn't take any input, so it's not a surprise it generates a random output each time. That's why random generators with seeds, which to take an input will generate always the same output.

[@alf1712]

Awesome video i have a question, in react is it wrong then to change a state within a function even though i need it so?

[@abhishekv8646]

you great bro!

[@maheshmahi5455]

I like using pure functions and the benefits of using them

[@M_BN287]

Thank you!

[@ratankarande5040]

thank you, perfect

[@WebDevSimplified]

You're welcome!

[@spiritualcontent763]

Pure functions: 1. function where the return value is only determined by its arguments without any side effects. 2. When these functions are called, again and again, the output remains the same, it does not get changed. 3. It is helpful in unit testing and not good for getting data from the database.

[@73dines]

Excellent work as always, Kyle! But maybe we (newbies) should go through all the mess with impure functions to become such a good coders as you are nowadays.

[@WebDevSimplified]

You will eventually have to write impure functions and even if you write mostly pure functions you can still run into a lot of code problems just like if you wrote impire function. This is just a tool that can help you keep your code clean so there is no reason to purposefully avoid it when it can be helpful.

[@rainstorm4161]

thank you 🙏

[@yousseflotfi904]

thank you so much

[@alexgomez9033]

Great video!!

[@WebDevSimplified]

Thanks!

[@austenmoore7326]

So if you were writing a function that needed randomness, would you just use like a seeded random generator and then randomize the seed so testing would be easier?

[@BobbyBundlez]

thank you

[@monodeeproy4939]

Nice illustration

[@WebDevSimplified]

Thank you

[@puneetwasan771]

That was very pure

[@MarshallSC1]

Thank you very much for simplifying the concept of Pure functions! Which reminds me... What happened with "code review and code refactoring" videos? Are those still an option?

[@WebDevSimplified]

I haven't done any lately mostly because they are not very popular videos and they are very time consuming for me to make. they probably take at least twice as long as a normal video and generally get half the views if not much less. I may start doing them more if I ever find a bunch of extra time.

[@MarshallSC1]

@@WebDevSimplified Oh, and I just checked one of those videos and "submitted" my code in a reply to your commend, haha. Ok, no problem, man. Until you find some extra time or lack ideas for a video.

[@WebDevSimplified]

@@MarshallSC1 Thanks for the submission. I will make sure to add your submission to the list for if I ever get the time.

[@musicfan2000]

thank you, sweet prince

[@migueljurado6783]

Apart of being handsome, you're a great teacher and programmer, thanks a bunch for your content Kyle, you're amazing!

[@doniaelfouly4142]

thanks

[@lardosian]

Thanks Kyle. When the array values ate spread into the new retirned array, does this new array have a variable name?

[@WebDevSimplified]

It does not. If you set a variable to the return of the function you could give it a name. For example const variable = addElementToArray(array, 4)

[@lardosian]

@@WebDevSimplified ah yes, thanks.

[@judelynlarino9711]

Please do a jet with refresh token auth

[@Ekitchi0]

Newbie developer here. I'm having trouble coming up with coherent and practical naming schemes. What would you recommend to make it easy in the code to distinguish between pure function and others in JS? adding pF in front of the names of the pure functions? Or something in the names of other functions?

[@pro100tom]

I think you can do annotations where you can write a description. In PHP you can actually add and attribute (#[Pure]) to a function.

[@karthicodings3896]

Do one video about pass by value and pass by reference please

[@WebDevSimplified]

That is a good idea. It is something that is very confusing when first starting out. I will add that to the top of my list of video ideas.

[@erikakim7186]

Yess plz

[@augischadiegils.5109]

Nice

[@ventures9560]

const array = [1, 2, 3] function addElementToArray(a, element){ return [...a, element] } array = addElementToArray(array, 4) /* ^ Does not stop the function from being a pure function (does it?). Since all we are doing is setting the initial variable equal to whatever the function returns. The function definition has not changed (it was pure before and its still pure now after making it the rvalue to our previously declared variable. Is that right or am I mistaken? */

[@SXCRD]

I thought the random number would not change the function to impure? The value may not be expected but the data type and overall behaviour is expected no? Forgive me if I seem like one of them nit pickers it just caught my eye and am curious. Great video I will try use pure functions as much as possible now, thanks.

[@WebDevSimplified]

This is a common misconception, but for a function to be pure the output must be exactly the same every time you call it with the same inputs. Using Math.random means the output of the function is not the same for the same inputs, even if we are expecting a random number it doesn't mean that it is pure. Does that better explain the idea?

[@SXCRD]

@@WebDevSimplified Not really because what I'm thinking for that specific run of the code, when Math.random generates a number, the outcome can now be expected and that its just until we get a number that it's uncertain?

[@WebDevSimplified]

@@SXCRD A pure function must be certain before you run it though. With a pure function you should be able to replace a call to the function with the output code while writing it and with Math.random you do not know what the output will be when you are writing the code. Also calling a function with Math.random multiple times gives different results. With pure functions the same result must be returned every time the function is called with the same inputs. Using Math.random would be like saying 2 + 2 is 4 sometimes and 5 other times. It just doesn't work.

[@SXCRD]

@@WebDevSimplified I feel silly now, I get you it's not just being fairly certain of the return type but it being absolute like inputs in nor gates etc. Thank you for teaching me something new today!

[@WebDevSimplified]

@@SXCRD No problem. Don't feel silly. This is a complex and advanced topic which is hard to wrap your head around in just a short 10 minute video.

[@davivify]

So are pure functions compatible with OOP? Since a main point of an object is to hold state, which is modified by its methods. Although, I think one important principle of good OOP design is to limit changes to fields within the object.

[@pro100tom]

It is compatible with OOP if you separate data models from services that operate on them. You can have a service that fetches a model's property by passing that model to the service method/function. Based on the same input you will always have the same output. Sure you don't need an external service that works just as a getter/setter; it can be used for some complex stuff instead. But getters/setters don't need to be pure at all anyway.

[@kazishahinDe]

bro can you make a video regarding storing images in Mongodb using gridfs and displaying it with Angular? if found that there is a lack of contents in online. it would be a huge help

[@WebDevSimplified]

Unfortunately this is too specific of a topic to be useful to a large audience and thus would not make a very good video. Sorry.

[@kazishahinDe]

@@WebDevSimplified in that case i just have one question. could you please tell me, which one is the best way. Should i just create some API ends points for fetching the images or sending the images from backend to my angular app as a blob image. Later on, then will display it in the front -end. what is the smarter way? could you please tell.

[@WebDevSimplified]

@@kazishahinDe I honestly am not sure. I have never used gridfs. I would say sending them as blobs is probably the only way you can do it since the image is stored in the DB and not in a file.

[@prince5922]

3:51 A small correction, "with a pure function you never want to change the inputs that you are adding to the *function".

[@00MagicMatt]

I'm still struggling wrapping my head around the concept of pure functions and how I would use them in practical uses. The way I understand it, is a pure function does not rely on external or internal input. If I call the pure function, it will always have the same outcome and cannot change anything? If the function is function equation = 2 + 2, the function "equation" will always equal 4. So, does that make it a pure function? I would have liked to see more examples.

[@jkf16m96]

Its exactly as you said, if your function takes 2 parameters and you return the result only, each time you call this same function, it will return the same. This concept gives you more reliability in your code, for example, c99. C99 cant implement classes, so you have to rely on structs. You can somewhat imitate oop passing object instances to your "methods" but, you have to be careful everywhere, and if you start allocating memory... Anyways, you can make a simpler approach in c99 without using pointers, only structs and pure functions. Its not 100% efficient, but is FUNCTIONAL.

[@jkf16m96]

In javascript, if you use functional approaches, you can make your code less error prone. So what happens when you actually want to mutate an object? Just assign the new state to the object. let myObj={...} myObj=changeSomething(myObj); And of course, the function has to be pure, without side effects. If you want to get input from the user or get some random number, you should call these functions in the main context of your program and start passing them as parameters from there. One would say that the only impure function would be "main"

[@rajkumar-nq2te]

Kyle. Pure functions uses in Redux right?

[@WebDevSimplified]

Correct. Redux uses pure functions for reducers.

[@rajkumar-nq2te]

@@WebDevSimplified thank you

[@hurk991]

ty

[@pro100tom]

I agree with the benefits of pure functions; well explained! However it is really important for the function name to reflect what it does. If the function name is "addElementToArray" then it should add an element to array. If we are creating a new array then we should be careful with the function naming or at least add a description since we are not adding to an array, but we create a new one (based on an existing one and another element) instead. On the other hand calling the function "createAndGetArray" doesn't make it obvious how to actually use this function. And calling the function "createArrayBasedOnAnotherOneWithAnElementAddedToItAndGetIt" is just ridiculous! So for this particular example (adding an element to an array) I would prefer the function not to be pure; I don't even want that function to return anything; just add an element to an array (which is a function argument) in and that's it.

[@zhaogrand5420]

subscribed

[@Arvy565]

can someone explain this 08:02 to me? I didn't get it

[@newmagicfilms]

At 5:24 an 'Ohhh ' sound was made by alot of people

[@guruyaya]

This idea is cool, however it does not work well with OO programming, where the methods are designed to change the object state

[@kirkshammett94]

Can anyone please explain these two functions to me and how they work? I'm new to javascript and have a test on it today and I cant wrap my head around these functions!!! function addNums(x) {var luckyNum = 12; return luckyNum + x;} addNums(0); alert(luckyNum); function addNums(x) {luckyNum = 12; return luckyNum + x;} addNums(0); alert(luckyNum);

[@HalValla01]

So a pure function is basically just a function which will not change any external elements, thus doesn't depend on external elements? It's all internal?

[@HalValla01]

And is a pure function considered pure if you call it inside another function?

[@WebDevSimplified]

That is mostly correct. A pure function must also never return a different result when given the same inputs. The example with Math.random from the video explains this concept.

[@WebDevSimplified]

A pure function does not have to be called inside another function but it can be. It doesn't make any difference where you call the function for whether it is pure or not. Many times you will call pure functions in other functions since when writing pure function code you will most likely have more smaller functions that you combine together to do larger things.

[@randomnobody660]

...Remember the days of oop when people insist you shouldn't expose your member variables and all interactions should be done with getter/accessor and getter/mutator? ... yeah, what happened to those advantages.

[@randomnobody660]

Also the more I try out other languages the more I miss C++. Yet the more I try to go back, the more I don't miss it. Can we just have an interpreted language that works exactly like python or js, except you CAN also specify when to pass by reference/value and specify whether input is const?

[@brilliantapps1974]

hello can you give us php tutorials? your way in teaching is excellent .if you ask me why php i tell you its very underrated language.i wrote many point of sale application with it . but always i use functions i dont know how to use classes . i learned from internet but there are few good teacher like you can find a way to teach idiots programming lovers like me.

[@joseagustinrios9666]

No bullshit, thanks

[@maximk7816]

peer functions))

[@akshaykhandelwal1987]

Your Ring light is painful not just to you but us as well. You may dim it a little bit. Will help you in long run

[@mikeonthebox]

2:35 that function has no return.

[@ManishKarki]

Well hello there

[@JR-ly6bx]

Not sure why you wouldn't zoom into the syntax ao viewer can actually see what your doing

[@surfinbird71]

Politicians make the best pure functions.

[@lostmotion18]

HOLY ****! Functional Programming is confusing af!

[@tanmaychandra9434]

Kyle Op

[@JackDD]

A lot of KZbin videos point you to other videos, recommending that you watch those first. Kind of like dependencies. This one doesn't really do that. I guess you could call this a pure video.

[@TheDrunkenAlcoholic]

"Const Array = [1, 2, 3]" can someone please sanity check me, Declaring a "Constant" to me and the English dictionary means that it will not be changed, it will stay the same, but yet here you are changing a "Constant" with a function, if you want to change it then its a "Variable" which means to me and the English dictionary that "variable" means it varies in its contents. btw I am no javascript coder and I am only a hobbyist Delphi/Pascal coder for the last 15 years, so maybe my way of thinking "Constant" means constant and "Variable" means variable may be out dated in todays day and age

[@hgilbert]

Isn't that simply Methods vs Functions? .... methods = impure, functions = pure.

[@mathis-meth4229]

nice hair