What is Factory Function in JavaScript? - JS Tutorial

think of a factory as an actual factory think of a car factory for example right stuff goes in raw material i don't know metal and plastic and all these things go in and the factory does a bunch of things to them and a final product let's say car comes out factory functions aren't that different let me show you what i mean what is a factory function in javascript and why do you need one and where would you even use one is this just a big theoretical word or is it actually useful to you as a javascript developer this is a 10-part series i'm calling 10 things javascript developers should know but probably don't this is episode 3 factory functions let's go check the mic and make sure it sound right boy a factory function is just a function that creates objects and returns them that's it so but wait a minute why do i need a function to create objects can i just do this that's an object sure you can craig but there are couple problems here especially if you're making uh more than just one object and especially if all of those objects have a lot in common with small differences well what does that mean imagine we want to create objects that would represent all of the all of your family members for example right and we want to have a talk function on each of those objects that announces who that member is what their name is i'll show you what i mean let's use my family for example to the browser so let's start with the amii object right const let's refresh actually me equals uh it's an object that has a name uh well let's start with just the function talk function and it returns uh hello i am cena right let's create a similar one for my brother ben hello i am ben right mida talk hello i am cena bender talk hello i am ben right so one slightly better approach would be i'm gonna uh refresh uh for me would be actually for both of them would be to have a name property right and in here i can say this that name this.name and i'm insane and then one for ben benno and the function then stays the same right so it's like a layer of abstraction uh so me the talk okay and bender talk cool so it works uh works as before but we still have two big problems here right uh well for one thing if i change the value of me well let's let's take a look at me me has name and talk and same with ben ben has uh name and talk so one problem is if i change me that name to sam right now if i do mi.talk uh now it's completely wrong right so the fact that the name property is uh is exposed right it's available for me to overwrite that that's that's where a lot of the bugs come from where uh my talk function which is supposed to announce me who is cena now has a defect in it but the defect itself doesn't actually belong to the talk function but the talk function does something that we don't expect so it's like it's hard to know where the problem is but that's uh one of the downsides of the code that i have up here for us right and two which is a it's a much bigger problem with a much bigger issue in my opinion is that the talk function had to be written twice right i've already covered um why code duplication is bad a lot in this series uh over here or here i'm not sure where oh here yeah here uh but i've also done a one-minute version of that again over here or somewhere so that's just in in 60 seconds i explained why that's a that's a problem right so you don't have 60 seconds dude come on now imagine if i had five objects here i would have to write this talk function five times you know even more in real projects it's very common to have tens sometimes hundreds of objects so how would you test that would you go ahead and test a hundred objects one by one that's that's not that's that's not good you don't want to write your logic more than once even twice i mean forget five or ten times uh you only want to be writing it once trust me someone reached out to me and tick-tock and replied to me and said i'll just use find and replace because i use vs code really no don't do that that's not what find and replace is for don't cover up your terrible code using these random solutions they're better tools for this right and one of them is using better code patterns or design patterns factory functions are just one of those design patterns think of a factory as or a factory function as an actual factory think of a car factory for example right stuff goes in raw i don't know metal and plastic and all these things go in and the factory does a bunch of things to them and a final product let's say car comes out factory functions aren't that different let me show you what i mean let's shrink one more time whoop so let's create a factory function that will do the exact same thing we're doing before with the members of the family so i'm gonna create a function call it person factory right and it takes a name so that would be like a raw material if we're making a car in this case we're making a person which sounds weird we're not making a person we're creating a simple javascript object that includes some information about a person right so let's do that and it creates const object equals i'm going to create an object and give it a name the shorthand can be named es6 life so this is the same as doing this i'm just going to say name and then talk which it's going to have the same logic return what did i have hello i am whoops i am name i don't even need this actually so i can just do that through the miracle of closures uh so how can i then use this factory function well const me equals uh person factory and i'm gonna pass in the name talk um what happens oh fascinating so i'm gonna have to write this again i forgot to return the object right uh factory functions return the object but instead of returning object like this what i'm gonna do is i'm just going to not create a or create a constant i'm just going to return the object same thing right then i'm going to say const me equals what was it person factory with my name now me the talk does that and what's great about this is that i can't even do me that name equals miradem is undefined i mean i can't even create a bug if i wanted to uh let's take a look at the me object it just has the talk function on it right uh let's create another object cons ben equals person factory ben bend.talk fantastic let's create another one how about a jill const jill equals uh person factory and i'm gonna pass in jill actually i'm gonna you know what i'm passing dr jill cool jill.talk madame first lady hello dr jill salute all right so now what if we had 10 people or 100 people we should not be repeating ourselves like i said uh that business logic of you know the hello i am name that could be a lot more complicated and the fact that it's written in one place that means that if we have any sort of bug that's the one place we have to look and we don't have to look in 10 or 100 different places and and one of the things i mentioned in the beginning is that our objects have a lot in common meaning the talk function is all exactly the same with the exception of one tiny thing which is the name itself so we can isolate what's common inside the factory function and just write it one time and we can make the part that is different for each object or for each person that part can be dynamic and done through a parameter that we passed into our our factory function so just to reiterate what is so great about this factory function right first it's simple it's just a function it's there's no setup there's no fuss it's just a function and it's it's really easy to read as opposed to something like a class that requires a constructor and sometimes you have to call super and and and classes are great don't get me wrong classes have their their place and i'm not saying don't use classes but for this simple example for our requirements a factory function is is pretty good it when you have to write less code i'm all for that second is i already covered it no duplicate code our logic is isolated in one place and third you have data privacy right we also covered that i can't even change the name of any of these objects even if i wanted to so the name itself is sort of protected inside that inner function that is part of our our object i'll give you one more example real quick and this is a slightly more practical example back to the browser browser do you know what that's from yeah all right so back to the browser shrink this example say we want to create a bunch of html elements uh refresh function create element all right and we have to pass in a type of element so say i want an h1 or a paragraph or whatnot what is the text that goes inside and what is the color right so let's say that's what our factory function creates uh first it creates an element equals document create element of type type because we already passed that in and then what does our let's let's say we added let's say our factory function is responsible for adding uh our elements to the body not a great idea because the factory function is not supposed to do stuff like that but let's say that's part of our business logic right so humor me for a second uh that append body dot append l so let's say that's another thing that is common between all of these uh all of these elements and then we want to set the inner text actually let's do that up here so we want to change the text to be the text that we passed in and let's say we want to change the color i think it's styler styles the color equals color and then we add that to the body and then we return an object that has a reference to the element so let's say that that's what i want to do again shorthand is just l and then we want to expose a few methods a few functions that our element can that we can perform on our element for example set text right and let's say we want to change the text of the element uh here what i can do is l that enter so exactly what i'm doing up there equals text uh and i want to expose another function which is very similar to this set color to another color and what is this style that's color it's kind of a contrived example i understand that because we already have um the dom api and we don't necessarily have to uh create all these functions but i'm trying to prove a point so let's see um cons let's say i want to create an h1 equals create element of type h1 h1 so this h1 by the way is just the name of my variable has nothing to do with the type of element i'm creating but here i'm passing h1 that will be set as the type uh then the text i want to put in there hey guys and then the color i want to pass in red right so h1 let's take a look at h1 h1 has a reference to the element of h1 which is whoa that's crazy and then it has a set color function and it has a set text but when we first created it we uh changed the the text and the color so let's take a look h1 let's look at the element uh actually i guess i can click on this and go here i didn't even know i could do that um so it set this the color to to red and the inner text to hey guys i'm going to go back and let's use one of the methods set text let's say i want to change that to goodbye fellas right and now if i look at h1 i'm actually going to drill in and look for it in here inner text and inner hdmi or both set to goodbye fellas so uh we have a reference to this element so let's say i wanted to create a bunch of different elements right i can create a paragraph and all i have to specify is what i uh the type that i want and and the text that's going in there and the the color right blue let's say i have a p let's take a look at the paragraph elements you get the point but i'm gonna really hammer it in um let's see color that would be under style let's see style and we can already tell that the color is set if i go down to color it's set to blue right didn't happen magically it didn't happen through uh by itself it's it's the logic that that we wrote for uh for our elements so um we abstracted away all the randomness of all the dom manipulation that we had to write reference to document you know create element all that stuff is all isolated in this function and all we have to do now is just call that function and pass it the information it needs to create that type of element again i understand this is kind of a contrived example and uh we already have the dom api to interact with the dom so you don't necessarily need to create functions like this but it is nicer right it's it's nice that we can create elements and not have to repeat those steps and create these apis that are cleaner or in my opinion are cleaner rather than setting the the color of the the style object inside the element i can just say set color to blue and i don't have to write that logic multiple times it belongs to every object that i'm going to create using this factory function all right so hopefully that made sense this is the basics of factory functions this has been episode three of this ten part series i'm calling 10 things javascript developers should know but probably don't i'll see you in the next one which is constructor functions where i talk about some of the shortcomings of factory functions they're not perfect they have some some issues where constructor function can come in an actual inheritance can come in and solve those problems for us i'll see you in the next one and until then [Music] salute [Music] you

Channel: ColorCode

Views: 2,696

Rating: 4.9499998 out of 5

Keywords: Color, Code, ColorCode, Coding, Programming, Software, Engineering, HTML, CSS, JavaScript, JS, Angular, Node, React, Factory Functions, learn to code, factory function vs constructor javascript, Angularjs, Vue, vuejs, oop, design patterns, design patterns javascript, developer, factory function syntax, classes, coding tutorial, coding for beginners, javascript tutorial, oop javascript, factory pattern, design pattern, tutorial, es6, what is factory function in javascript, web development, front end

Id: lE_79wkP-1U

Length: 17min 31sec (1051 seconds)

Published: Wed Jan 27 2021