What is Factory Function in JavaScript?

No video

What is Factory Function in JavaScript? - JS Tutorial

Рет қаралды 57,329

Күн бұрын

What is factory function in JavaScript?
JavaScript Factory Functions from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
This is episode 3 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re gonna cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 3, we’re gonna explore Factory Functions, the idea behind them, the problem they solve and a few practical examples. Episode 3: Factory Function. Let’s go!
All the code from this series is available here:
github.com/Col...
0:00:00 Intro
0:00:54 What is a Factory Function
0:01:22 The problem
0:05:20 The solution
0:09:30 The benefits
0:10:28 More examples
0:16:36 Outro

Пікірлер: 221

@ColorCodeio 3 жыл бұрын

What is Factory Function in JavaScript? This is episode 3 in a 10 part series I'm calling 10 Things JS Developers Should Know, but Probably Don't. 💻🤷🏻‍♂️💛

@Justnadeem Жыл бұрын

can you tell me what IDE YOU USE

@Justnadeem Жыл бұрын

I NEED HELP CAUSE EVERY TIME FOR PROTO AND INHERITANCE I HAVE TO DEVTOOL CONSOLE

@ColorCodeio Жыл бұрын

@@Justnadeem it’s called RunJS. See here: runjs.app?via=colorcode

@awaismohsin345 Жыл бұрын

I request the government to give this man a medal at the government level for his high performance and excellent work.(A lot respect)

@ColorCodeio Жыл бұрын

🙏🎖️ Thanks dude.

@IanMathaiya 11 ай бұрын

I discovered your channel two days ago and I'm still stunned by how good your videos are. The editing is super professional (really appreciating the background music), Explanations are so easy even a 5 year old can understand And you're hella funny. Thanks 10X

@asdjafhjasbfhjasbhjf 2 жыл бұрын

Dude this is EXTREMLY good content. Good graphics, good camera, funny and slow pase for my beginner brain. This channel will blow up. Thank you! :)

@ColorCodeio 2 жыл бұрын

I appreciate that! Made my day.

@asdjafhjasbfhjasbhjf 2 жыл бұрын

@@ColorCodeio this is what Apples tutorial of JS Factory function would look like.

@tigana 2 жыл бұрын

@@asdjafhjasbfhjasbhjf This

@stoyannvelten5231 3 жыл бұрын

the quality production of this video is probably the best i ever seen on you tube ! ;) thanks

@ColorCodeio 3 жыл бұрын

Thank you :) I put a lot of work into these so it's nice to hear.

@danielbedoya6517 3 жыл бұрын

I was thinking exactly the same. Great job.

@ColorCodeio 3 жыл бұрын

@@danielbedoya6517 Thanks Daniel

@user-ld7mt9bx9q 3 жыл бұрын

Excellent production quality. I am looking forward to seeing your channel grow.

@ColorCodeio 3 жыл бұрын

Much appreciated!

@fParad0x_ 3 жыл бұрын

Me too! His videos are very well done!

@ColorCodeio 3 жыл бұрын

@@fParad0x_ thank you

@renatocampos3502 3 жыл бұрын

What a video bro, what a quality production!!! One more subscriber! Keep up the good work! Thank you very much!

@ColorCodeio 3 жыл бұрын

Glad you liked it. Thanks for the sub.

@saketsingh4345 Жыл бұрын

This man is absolutely mind blowing with his work, the video quality, the editing everything...and specially the explanation of the topic totally on point.... Channel definitely blowing up soon...

@ColorCodeio 11 ай бұрын

Thank you!

@natureislife1948 Жыл бұрын

Just found your channel after watching a tonne of videos on JS Factory, you made things so much easier & simpler to understand, Hats off to you brother, genuinely loved your method of teaching & that soothing background soundtrack you had me absolutely focused from start to finish.

@ColorCodeio Жыл бұрын

Thank you! Glad it's helpful.

@PatrikRasch 2 жыл бұрын

Yeah the quality kept going throughout. Incredible job. Thank you so much.

@ColorCodeio 2 жыл бұрын

Glad you enjoyed it!

@mohamedazizarresse Жыл бұрын

this is my first video here and I can firmly say that this guy is worth a subscribe

@ColorCodeio Жыл бұрын

I appreciate it!

@bryanDevsJS Жыл бұрын

the editing skills and tutorial is superb new subscriber here.. love the camera transition from full to little circle,

@ColorCodeio Жыл бұрын

Thanks Bryan!

@anasaqeel2387 Жыл бұрын

never seen such an amazingly explanatory video before. Great job

@ColorCodeio Жыл бұрын

Thanks!

@hooman_talakian Жыл бұрын

The Education needs you man! Keep On ...👌🏽خیلی کارت درسته

@ColorCodeio Жыл бұрын

Merci ♥️

@jollyren 2 жыл бұрын

Can't believe you don't have more views! I've learned more, more quickly and intuitively, than any other tuts.

@ColorCodeio 2 жыл бұрын

Thank you :) with time they’ll come.

@dilipkumar-dd7ud Жыл бұрын

Thanks for covering factory function, Extremely helpful -- Thank you!

@ColorCodeio Жыл бұрын

You're welcome!

@richardvanhelden1420 Жыл бұрын

You have a very pleasant and clear way of explaining things. Super good content thx!!

@ColorCodeio Жыл бұрын

Ty!

@n1mutant 2 жыл бұрын

you got a sub!! don't stop my dude don't stop!!! great content

@ColorCodeio 2 жыл бұрын

Thank you so much

@fariskanbur5428 2 жыл бұрын

Amazing description Sina, I am looking forward to seeing your new series about Js and React js.

@ColorCodeio 2 жыл бұрын

Coming soon!

@markivkovic7235 Жыл бұрын

Hey Sina, Compelled to comment as I've been devouring these JS videos in a random order alongside a bootcamp i'm on. Almost anytime i get snagged up on something I'm back searching for a video on the topic. You seem a very natural teacher and obviously deeply understand your subject, unlike many other tutorials where it's just a telling of 'info', your videos are a true sharing of knowledge. Thanks sir.

@ColorCodeio Жыл бұрын

Great to hear. Thank you!

@unespc 2 жыл бұрын

Amazing description Sina, Hope to see more video of yours dadash!

@ColorCodeio 2 жыл бұрын

Sure thing. Episode 10 is coming this week!

@Hero1Love2 2 жыл бұрын

I’m watching this like a t.v show. I enjoy this. Thank you 🙏🏾

@ColorCodeio 2 жыл бұрын

Awesome 😀

@GeorgeHernandez-xh2jp 2 ай бұрын

Awesome video! Learning about factory functions in my bootcamp right now and this really helped me better understand! The effects and music are high quality, and you break it down so well!🤓 I also really love when code content creators don't edit out their mistakes. It really helps to see possible bugs and fixes! And also encouraging to see people at this level are still human too 😅 Subscribed! Cheers!

@ColorCodeio 2 ай бұрын

Definitely 🙏

@bmehder 2 жыл бұрын

I am pretty sure that a 30 year old Eugene Levy just taught me about Factory Functions, and I appreciate that.

@ColorCodeio 2 жыл бұрын

Haha more like 36 but I'll take it. And thanks for the sub.

@alih1210 3 жыл бұрын

for the first minute of this video i knew that i'm gonna subscribe and like this video

@ColorCodeio 3 жыл бұрын

That's awesome! Thank you :)

@abderraoufbenchoubane1905 2 жыл бұрын

Just found this channel it's amazing great work

@ColorCodeio 2 жыл бұрын

Thanks

@iamwaiyanminhtet Жыл бұрын

You don't know how much I appreciate for this series. Your contents are really helpful for beginners like me and at the same time also entertaining. Thanks brother. Salute 🫡.

@ColorCodeio Жыл бұрын

Very glad to hear it. Thank you.

@PACadence43 3 жыл бұрын

Amazing Editing. Thanks for the content.

@ColorCodeio 3 жыл бұрын

You’re welcome

@pakcommanderh8280 Жыл бұрын

1st time i didn't get bore while learning js ( best teach ever )

@Amy_A. Жыл бұрын

I use factory functions for organizing an API I maintain. There's about a dozen "sections" of the API, so I split those sections into their own files and load them into a static object at runtime. It's much easier to maintain than a single file with hundreds of functions in it.

@vasudev16180 2 жыл бұрын

Excellent video as always bro! I request you to please make a video series on Design Patterns.

@ColorCodeio 2 жыл бұрын

Thanks. Will add it to my backlog.

@SiddharthRay1 3 жыл бұрын

Hey, Thanks for covering factory function, it is very very useful in many many scenarios.

@ColorCodeio 3 жыл бұрын

You’re welcome

@bhargav772 3 жыл бұрын

Subscribed after the initial factory animation. Cool video ! 😀

@ColorCodeio 3 жыл бұрын

Nice! :)

@PatrikRasch 2 жыл бұрын

I'm only 3 minutes into this video atm but MAN this video is well made.

@ColorCodeio 2 жыл бұрын

Thanks!

@ross-sanderson 8 ай бұрын

Thanks for the tutorial. Your way of teaching is simple, easy to understand, and engaging. You've earned a sub. Keep it up!

@ColorCodeio 8 ай бұрын

Thank you

@TheChiaralyn 2 жыл бұрын

Adorable and useful!!! Thank you!

@matheusdefariascavalcantis9961 Жыл бұрын

Awesome video!! Very good teaching, subject very well explained!

@DmitryGlinskiy 3 жыл бұрын

Great video. Superb production. Helpful explanations.

@ColorCodeio 3 жыл бұрын

Thanks!

@user-kn4oi9oh4i 5 ай бұрын

Holy shit, its so simple! I love it! Thank you!

@LizyAd 5 ай бұрын

I am so glad I came across your channel. You make learning Javascript fun and you're super funny lol. Thanks a lot!

@ColorCodeio 5 ай бұрын

Happy to hear that!

@artikant9890 Жыл бұрын

just found your channel...so proud to learn first 3 videos...(falling for let's shrink whoop ) LOVE FROM INDIA💖

@ColorCodeio Жыл бұрын

Shhhhhhrink!

@artikant9890 Жыл бұрын

@@ColorCodeio you read !! Thanks man😭❤️

@imranmani2036 Жыл бұрын

Sina, YOU'RE AMAZING........ I didn't comment on KZfaq videos, but YOUR CONTENT forced me to comment, and APPRECIATE YOUR EFFORTS. I REALLY LOVE your explanation and GRAPHICS. LOOKING FORWARD TO MUCH MORE FROM YOU :) THANKS

@ColorCodeio Жыл бұрын

I appreciate that 🙏

@mubarakch2233 Жыл бұрын

Great content. Keep uploading more❤

@ColorCodeio Жыл бұрын

That's the plan!

@corygold8206 2 жыл бұрын

Extremely helpful -- thank you!

@ColorCodeio 2 жыл бұрын

👍

@hamadaali6725 Жыл бұрын

your video is great, i watched alot of tuts and i didn't get it, but now i understand everything

@ColorCodeio Жыл бұрын

I'm glad

@g_pazzini 9 ай бұрын

Thanks for sharing your knowledge with fun and joy❤❤❤

@ColorCodeio 9 ай бұрын

🙏

@borisboulogne5163 Жыл бұрын

Thanks man, honestly this has been the best « under the hood » series I have found so far, keep going 🔥

@ColorCodeio Жыл бұрын

Happy to hear that!

@mickeyp1291 Жыл бұрын

Great stuff. Liking your videos. I would caution you against writing static functions that assume a context. In this case you assume thw document object which you are using by interracting with you outter scope. This means your function cannot add elements to other scopes. What you should do is introduce an element object and act on it instead of document and document body. The dom heirarchy should be the context in this case

@chuabenjamin Жыл бұрын

Learning from you is fun, Thank you

@ColorCodeio Жыл бұрын

♥️

@JJ-ot3ps 2 жыл бұрын

love the way you teach and explain the logic step by step!!!!! You should also do react series too!

@ColorCodeio 2 жыл бұрын

I'm considering doing a react course. Thanks!

@lewitness1759 Жыл бұрын

Awesome explanation!

@ColorCodeio Жыл бұрын

👍

@richardradcliffe6178 Жыл бұрын

This video is awesome. Thank you so much!

@ColorCodeio Жыл бұрын

You're welcome

@chriskasatka2095 2 жыл бұрын

Really well done stuff!

@ColorCodeio 2 жыл бұрын

Appreciate it

@sadafrasheed Ай бұрын

Just want to add a thing. I belong to the old school where we were taught to keep an eye on your code's memory requirements. Duplicating code means more RAM is needed. This may not have a major effect on the front end, but on the back end, more RAM for the script can be an issue.

@JoaoVitor-pc4ps 3 жыл бұрын

Great tutorial! Greetings from brazil

@ColorCodeio 3 жыл бұрын

Thank you! Cheers!

@mdsalim-yo6dq 3 жыл бұрын

sir, please create a playlist for javascript. It will help every student who is learning javascript. your teaching method is very easy and gorgeous. thank you.

@ColorCodeio 3 жыл бұрын

kzfaq.info/sun/PL1PqvM2UQiMoGNTaxFMSK2cih633lpFKP

@adriananin3150 Жыл бұрын

Great explanation💯

@eumm11 Жыл бұрын

amazing like always!

@ColorCodeio Жыл бұрын

🙏

@MariaMartinkous Жыл бұрын

Hi! I absolutely love your videos, they are extremely helpful in understanding such complex topic. Only one thing - the background music is either distracting (I have ADHD, so it already takes a huge effort to concentrate as it is), or way too soothing (literally makes me super sleepy even after a full night's sleep). Other than the background noise, I am very thankful that you created this series!

@elvispontes4165 10 ай бұрын

your videos are awesome my friend... thanks for sharing!!

@ColorCodeio 7 ай бұрын

👍👍

@by2313 3 жыл бұрын

Thanks for the Tutorial!

@ColorCodeio 3 жыл бұрын

You’re welcome

@jatilyadav4000 Жыл бұрын

Amazing content.. Just the best

@jonathancollins1182 2 жыл бұрын

You are freaking delightful. That is all.

@ColorCodeio 2 жыл бұрын

Made my day 🙏

@adarshtiwari7395 2 жыл бұрын

I have seen many tutorials but this one was the most definitive of them all. Great work brother! Would you suggest learning only classes or factory functions or is it necessary to learn both? For simplicity purposes could we just get familiar with one?

@ColorCodeio 2 жыл бұрын

Modern JavaScript patterns are moving more toward functional programming and away from Classes. With that said I think any JS developer should have an understanding of both. They're not that difficult to learn.

@adarshtiwari7395 2 жыл бұрын

@@ColorCodeio Alright.... Right now I'm trying to code a factory function that returns an object which is basically a button with a dropdown list when hovered over. Let's see how it goes!

@user-mw5bm2xh9x 9 ай бұрын

thanks for the tips. good stuff

@projectlinz8191 Жыл бұрын

great content Sina, thanks

@praveensb4880 3 жыл бұрын

Awesome video brooo completely loved this video.......

@ColorCodeio 3 жыл бұрын

Glad you liked it

@amir-am2379 3 жыл бұрын

فوق العاده ای تو پسر

@ColorCodeio 3 жыл бұрын

👊🏼👊🏼♥️

@myko_chxn 3 жыл бұрын

Great video, hoping for more great vids in the future :)

@ColorCodeio 3 жыл бұрын

Yep! More coming end of July

@ibarkianas3216 Жыл бұрын

Thanks!

@boooloool6039 2 жыл бұрын

love your videos man! soo, soo awesome ! do you think, you can briefly describe when to use factory functions and when class? its really confusing me, because to me, factory functions seem to be much easier to use

@ColorCodeio 2 жыл бұрын

I touch on that in this video: kzfaq.info/get/bejne/nMilrM-avdKod30.html

@chrisgood2go 2 жыл бұрын

bro i liked the video at the drop just for that.

@ColorCodeio 2 жыл бұрын

Hah thanks!

@yasminelmahdi2003 11 ай бұрын

Absolutely loved the way you explain this type of functions, but I don't get why factory functions shouldn't be creating elements inside the DOM ?

@sf-zr3oj Ай бұрын

You're great! Thanks by Brazil

@ColorCodeio 23 күн бұрын

Thank you too!

@andrewraj3846 Жыл бұрын

Bro Awesome Video. Enlightened. 1 question - What's the difference between Class and Factory function, other than the OOPS concepts? I mean like memory usage, processing speed, etc

@gshadiadi1 Жыл бұрын

so what is the diffrent between function factory and class?

@vanshmishra6039 26 күн бұрын

i can't thank you enough! thanks a lot

@ColorCodeio 23 күн бұрын

Glad it helped!

@badbrother_2023 2 жыл бұрын

Looking forward for you to do a video about react native

@ColorCodeio 2 жыл бұрын

Soon!

@jojojawjaw 3 жыл бұрын

GREAT TUTORIAL!

@ColorCodeio 3 жыл бұрын

Thanks :)

@Luis-MFG 2 жыл бұрын

Could you please make a video explaining the event loop?

@Talel_kraiem Жыл бұрын

Bro just started a new javaScript framework 😁

@dmp9356 3 жыл бұрын

How do you clear the console of all previously declared variables / classes / functions?

@ColorCodeio 3 жыл бұрын

Refresh

@jameslockwood8008 Ай бұрын

1:06 Not sure what *Craig* did, but that call-out felt personal 😂

@ColorCodeio 23 күн бұрын

It's a personal hang up of mine. Not fair to Craig.

@bakshirocks 2 жыл бұрын

Can you explain how the prototype chain be created by using thhe factory functions like wr can by using the constructor functions?

@dopamine9176 2 жыл бұрын

please make all about coding javascipt

@startwithme4 2 жыл бұрын

editing is good

@ColorCodeio 2 жыл бұрын

Thank you

@xenocampanoli815 10 ай бұрын

Thank you.

@bibek8284 2 жыл бұрын

Can you also give a real world example which can be applicable in backend??

@ColorCodeio 2 жыл бұрын

These are all design patterns agnostic to frontend or backend. It’s just a way of organizing code so you can def use most of the stuff I teach on backend. The only thing you can’t use it the DOM API which I sometimes use to provide examples.

@daybydayx 3 жыл бұрын

Thank u-

@ColorCodeio 3 жыл бұрын

You're welcome 😊

@athif2200 2 жыл бұрын

Thanks

@ColorCodeio 2 жыл бұрын

👍🏼

@ahmetyilmaz3896 10 ай бұрын

I am curious if it is feasible to employ a factory to handle API JSON data. For instance, consider the 'Fake Store API,' which offers various endpoints for retrieving synthetic product data, such as name, price, title, description, and category. Is it viable to employ the factory pattern within the promise to facilitate the conversion of the JSON data into a product object?

@vamshikrishnareddy76 2 жыл бұрын

thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@ColorCodeio 2 жыл бұрын

You're welcome!

@saranonearth 3 жыл бұрын

Thanks

@ColorCodeio 3 жыл бұрын

You’re welcome

@Uri.Sab. Жыл бұрын

I love the 10:40 min jajaja

@ColorCodeio Жыл бұрын

LOL

@albin6126 Жыл бұрын

even thought the name can't be changed the talk function can be changed function factoryFunction(name){ return{ talk(){ return ` ${name} is talking`; } } } const me = factoryFunction("albin"); me.talk= function(){ return "i am talking"; } console.log(me.talk()) // output: i am talking

@Dheerajvasireddy 2 жыл бұрын

hi ... is this considered learning react also ? (is this useful for react js too?).....

@ColorCodeio 2 жыл бұрын

Yes, definitely

@bharathsachin 7 ай бұрын

Buddy, you have made a very good presentation. Even though the factory function can return h1, I think we can still modify the innertext without using the setText metod by just accessing the property by h1.el.innertext, is not true? For eg, below code snippet, function personFactory(name, age) { const person = { name: name, age: age } return { person, setName(name) { person.name = name; }, setage(age) { person.age = age; } } } const anonymous = personFactory('anonymous', 25); console.log(anonymous.person); anonymous.person.name = 'anonymous anonymous'; console.log(anonymous.person); How do you tackle such situtations?