Factory Function vs. Constructor vs. Class - JavaScript Tutorial

What is the difference between a Factory Function and a Constructor in JavaScript?
Factory vs. Constructor from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
This is episode 5 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to 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 5, we’re talking about the differences between Factory Functions and Constructor Functions, when should we use one or the other? Episode 5: Factory vs. Constructor. Let’s go!
All the code from this series is available here:
github.com/ColorCode/js-10-th...
0:00:00 Intro
0:01:00 Recap: What is a Factory and what is a Constructor?
0:02:02 Differences: Factory Function
0:14:08 Differences: Constructor Function
0:18:04 Why you should use Factories
0:20:30 Classes
0:22:22 Conclusion

[@ColorCodeio]

What is the difference between a Factory Function and a Constructor in JavaScript?

[@kran399]

Factory Functions are Better More Secure than Constructor Functions.

[@mohammadyaseen5339]

@@kran399 can you proof this ?

[@mohammadyaseen5339]

i think the onlu difference is that you can add/modify method using "constructrorname.prototype.newfunction" in constructor function but you cannot do this in factory function.

[@jameslogan6626]

Constructors are OOP. Anyone saying otherwise is simply wrong and abusing standard nomenclature.

[@caribbeanman3379]

A factory function basically clones new copies of all object members defined in the object, in each object instance that is created - by default; whereas a constructor function only clones the members defined in the constructor. Lately I've been using an OOP framework that uses a singleton object as a class that contains only static methods. One of those static methods serves as a factory function for creating data objects that the class object can then manipulate. Static functions serve as prototypal functions by having a data object passed to it as an argument. So instead of using the traditional this keyword to reference instance objects, you use the instance argument passed. For example: let ClassObj = Object.create(null); ClassObj.newDataInstance = function(arg1, arg2) { return { property1: arg1, property2: arg2 }; }; ClassObj.setArg1 = function(instance, newArg1) { instance.arg1 = newArg1; }; But it can get a bit tiresome to always have to pass in an instance argument every time you want to work with instance data. So I've also toyed with the idea of having a static defaultIntance property in the Object so that when there is a series of consecutive calls involving the same instance you can use a function like this: ClassObj.withInstance = function(instance) { ClassObj.defaultInstance = instance; }; to initially lock on to a particular instance that will be used for the following instance calls without having to repeatedly enter an instance argument for each call. Now the setArg1 function would look like this: ClassObj.setArg1 = function(newArg1, instance = ClassObj.defaultyInstance || null) { instance.arg1 = newArg1; };

[@dreamer4515]

The best decision in my KZbin History was to subscribe to this Guy. His teaching method is just amazing. You should launch your own complete js course, why limit it to 20?😅

[@SiRexable]

underrated channel! I'm watching 10 Things JS Developers Should Know and I'm loving it, you explain everything in such great detail and with nice humor too. TOP NOTCH QUALITY VIDEOS HERE. Keep it going man, I hope this channel gets more subs.

[@ColorCodeio]

Awesome! Thank you :)

[@xact3855]

Hands down the best teacher I’ve come across on KZbin. Keep producing content!!! Love it

[@ColorCodeio]

Thank you

[@umcode]

Why you are not active 😢😢the bestest teacher ever

[@asheradanehi7080]

I'm happy I found your Javascript videos. Saying a very appreciating thank you from Northern Nigeria for now.

[@ColorCodeio]

You are very welcome

[@sara5490]

So funny, love how he doesn't just explain how to create constructors/functions but also gives practical examples of how and why the distinctions are important. Liked and subscribed.

[@ColorCodeio]

Awesome! Glad you liked it :)

[@bmehder]

This is the first video I have seen from this channel. Subscribed.

[@iamseanhahaha]

Love the flow of this video. Awesome editing work as well. You deserve more subs!! (Here before 6K 😎)

[@ColorCodeio]

Nice! Thank you :)

[@TheAcidMotion]

Great coverage of the topic and parallels of theory against real-world examples. True scholar and a gentleman in real life, keep it up.

[@zafiroula100]

You explained the difference so good! I was struggling to understand the difference since im new to JS. You're the best🙌

[@elielberra2867]

Thank you so much for this series of videos! You explanations are perfectly clear, the editing is amazing and they are super entertaining :)

[@HeiSo1014]

Agreed with the other comments. Underrated channel - you have a new subscriber. Not only do you explain concepts in a clear and concise way but you explain WHY IT MATTERS. And you're engaging. You should have at least 400k-500k subscribers.

[@thomaswinterburn6680]

Thanks for this tutorial series My key Takeaways from this video Factory functions, by default, create distinct copies of methods for each object, which can be memory intensive. Constructors, by using prototypes, share a single method instance among all objects, which is memory efficient. Constructors enable genuine inheritance, unlike factories that need workarounds for a similar effect. Why Use Factories: Simplicity: They're just standard functions without needing the 'new' keyword or dealing with 'this'. Flexibility: They leverage closures, promoting data privacy by not exposing certain properties or methods directly. Data Privacy: Properties or methods can be hidden, reducing the chance of unintentional overwrites.

[@gustavo.paixao]

I've never watched a video of yours before, but way to go. Funny, simple and accurate. Good job!

[@ColorCodeio]

Thanks Gustavo!

[@andreadipasquale1593]

Grazie Mille per i tuoi video, finally I found someone who knows how to make people understand these tricky things. Bravo , Complimenti davvero! Se vieni in Italia your next espresso is on me!

[@gottadance220]

As someone who wants to work as a developer relations engineer, I love this channel. So informative and so fun! Hope I can make great content like this some day. Very inspiring

[@FrostDrive]

Wow, I've watched so many videos on this and your explanation is by far the best. deserve way more subs

[@ColorCodeio]

Awesome! Thank you

[@shubhamjangid7012]

The presentation is engaging, and the information provided is very valuable. The production quality is top-notch, and it's evident that a lot of effort went into creating this content. Keep up the great work!

[@ColorCodeio]

Thank you ♥️

[@stephenreynolds0220]

I am currently doing a project for college on constructor functions, and these videos have helped a lot! You are the most clear and concise person to explain all of the parameters of a constructor function. Thank you! :D

[@ColorCodeio]

Great to hear!

[@DevOpsDirective]

Just stumbled across your channel... really enjoyed this style of teaching! Great stuff!

[@ColorCodeio]

Wonderful to hear. Thank you.

[@orrodrigez5051]

i am usually not commenting but once i saw it has only 25k views i had to come down here and say i've been struggling with these stuff for a while and this series shed light over everything i really hope more programmers get to see these :D

[@ColorCodeio]

Thank you!

[@stratboy2]

You speak a really good english, you explain better than most of the teacher out there, your mind is brilliant, you stand out. So thank you. What's your name and where are you from?

[@seanfinegan1076]

Thanks for sharing. As someone learning javascript, you cleared up some confusion.

[@ColorCodeio]

Love to hear that, thank you

[@pushpakgupta22]

Great series. Nice to know about Eric Elliot as well.

[@eumm11]

thank you so much, top notch explanation, amazing!!

[@bigjimtrucker6042]

You a great Teacher and I appreciate you

[@chhavimanichoubey9437]

hugely underrated quality channel

[@ColorCodeio]

Thank you

[@arkitekt5259]

Thanks for your explanatory examples and efforts !!

[@user-cd1vg8le7f]

very understandable and practical way explaination. thank you so much x 10

[@kooyaw4445]

I'm liking your channel honestly

[@ColorCodeio]

👍

[@garrettg5313]

Great video! I've been struggling for a while using The Odin Project to try to figure out what Eliott was saying in '3 types of prototypal inheritance'. Maybe you could make some videos covering some of the more confusing stuff in The Odin Project? Thanks for the help very clear.

[@naveedharri]

I really had no idea, thanks alot!

[@ColorCodeio]

You're welcome

[@rabiaabbas262]

Really good explanation, thanks a lot!

[@ColorCodeio]

Glad it was helpful!

[@kunnudev7250]

Very underrated channel don't worry will get 1 billion+ subscribers bro thanks bro great job

[@ColorCodeio]

Thank you

[@deepanshukacher1536]

Really love your explanation

[@ColorCodeio]

Thanks!

[@damislav]

Amazing video helped a lot

[@juansolano7144]

By far the best explanation I've heard about this, ColorCode >>> ChatGPT

[@jatilyadav4000]

Amazing video.. Hats off

[@user-mw5bm2xh9x]

thanks for the tips. good stuff

[@techbro3085]

10 Things JS Developers Should Know. Unfortunately I'm one of that JS developer😅. Under rated channel with lot of information. you deserve more subscriber sir. Please do more videos

[@richardradcliffe6178]

This is a banger video. Thank you for the help.

[@ColorCodeio]

👊👍

[@kitestance]

Great teaching. Thank you.

[@ColorCodeio]

👍

[@elusariosinnombre2058]

Super good production on the video. Really aids in visualizing the workings of the code! The intro music might be mixed a little too loud though.

[@ColorCodeio]

Thank you!

[@vithobashewale7735]

Nice style of teaching ❤

[@kran399]

great Content Love from India Sir.

[@Symphetix]

Excellent. Very underrated channel!

[@ColorCodeio]

Thank you

[@hannahp642]

great quality!

[@VaibhavSharma-zj4gk]

Top quality content. 10/10.

[@ColorCodeio]

👍❤️

[@ajxtc2]

I did the same thing with constructor function as you did with factory function, the private name thing and it works the same. Just don't declare this.name and use $ {name}. idk if it's a mistake or you meant something else. great vids tho.

[@KarelPuhli]

Top Tutorial! Greetz from Germany!!!

[@ColorCodeio]

Guten morgen Germany!

[@user-fp9hl9cf1q]

god bless you you make the best videos all over the internet thank you very much you are the best!!!!!!

[@ColorCodeio]

You're welcome :)

[@andytsou6289]

Good stuff! subscribed

[@ColorCodeio]

Awesome :)

[@AlejandroGarcia-ff5bz]

I just wanted to add a comment about using Object.Create in your factory functions like you have on 12:10. The "name" property will be added to the object you are returning, but if someone wants to loop through an object like the one in your example using a for in loop, Object.keys, Object.values, or Object.entries, they will get back an empty array. To make the object iterable they will need to add "enumerable: true" property to the "name" property. After that you can loop through the object with a for in loop or convert the keys, values, or both.

[@ColorCodeio]

Good point. We're really touching on the basics here and not going super deep in any object API, but you are correct in saying you can configure your object further when you use Object.create. Thanks for the call out.

[@AlejandroGarcia-ff5bz]

@@ColorCodeio No worries! It was a thing that got me once. I love your videos btw. Really well produced and easy to follow along and understand. Keep going!

[@LeetCodeSimplified]

Great video, thx a lot!!

[@ColorCodeio]

You are welcome!

[@Chris2phaBrown]

happy to have inspired :)

[@ColorCodeio]

Chris Brown. Cool name.

[@Aaron-sy5yx]

Dude great video.

[@ColorCodeio]

Glad you enjoyed it

[@dr.d3600]

Great video ❤

[@ColorCodeio]

🙏

[@amdjed_mijoukh]

very concise and informative video, can you make videos where you can explain different built-in properties in js like for object, array, set, map, dom properties.

[@ajminpradhan1112]

Extensively Underrated Channel. I am feeling lucky to see your teaching style. BTW, would love to have a youtube live collaboration with Hitesh Choudhury? 😊

[@ColorCodeio]

Thank you. Not sure who that is but maybe in the future

[@ebcoutinho]

Pure gold found here

[@jimfoley2690]

Great stuff

[@ColorCodeio]

Thank you

[@kkbejoy]

Awesome.... !!! 👍

[@ColorCodeio]

👍

[@miedsekadse7136]

Great video

[@ColorCodeio]

Thanks!

[@bj0rnen]

I use simple factory functions 99% of the time, and in the 1% of times I need a complex object with inheritance, I use a prototype object with a factory function. Those also tend to be the only time I ever use the this keyword.

[@dougdoug9223]

This comment was a brain saver for me. It's been messing with my head cos I've seen examples where the returned objects of factory functions are used as parent objects for the returned objects of another Factory functions and it just messes with my head. Using object.create with factory functions just seems like an easier way to handle inheritance unless it has to deal with private variables. Am I off track here?

[@bj0rnen]

@@dougdoug9223 now I wonder if it’s possible to use the factory function and prototype object pattern with private variables. I haven’t had any need for that yet but I’m sure it can be done, even if it might be one of those things where even if you could maybe you shouldn’t. 😄

[@cedkirdes6108]

Really nice video. I was not really aware of the meaning of prototype and now its clear. Actually I'm doing some canvas / webgl animation, is it better to use classes if I need to create a lot of object with methods ?

[@ColorCodeio]

You can definitely use classes, constructors or factories. In the end it's up to you what makes more sense to you for your particular case.

[@tiktalk4573]

Liked and subscribed.

[@anonlegion9096]

Holy shit... thank you! I now know how to create static variables/methods in my factory function! PROTOTYPES!!!!

[@ColorCodeio]

👍🤘

[@bogdancalin1607]

This man makes me wanna drink water whenever he does it =))

[@ColorCodeio]

💧 🍺 cheers

[@chrtravels]

Are factory functions more in use in the industry currently? I have seen some current online articles discussing factory & constructor functions but it also said you will rarely use them as classes are the current thing. Some of the most well known bootcamps only teach classes, while others say the classes have fallen out of favor. So it seems like it's a preference thing and probably depends on the company.

[@bryanDevsJS]

i love you video, can you tell me what app or tools your using to record? it seems its cool

[@zenreefer7817]

This channel is a fucking GEM

[@ColorCodeio]

Thank you!

[@aburaihan-py4vi]

Wow!

[@Dimy111]

Good vid

[@ColorCodeio]

Thanks

[@eyesoap4536]

Hello. Thanks for the video. What IDE are you using?

[@ColorCodeio]

Chrome DevTools

[@rohanagrawal5747]

okkk those who are confused see.............. Difference is initially in factory fn -> me.__proto__ === createPerson.prototype // false. but in constructor fn -> ben.__proto__ === Person.prototype //true so in constructor fn when we create the obj with new keyword it gets the fn in its proto, and for factory fn we have to do it manually......

[@maciekdzikdrums]

king

[@trojan606]

i like it

[@mohammadyaseen5339]

I have watched this video more than 10 time but i cannot understand the major difference between these two. Also please make a video on why we use these both for creating object i mean we can simply create objects. please make fully explained each and everything in a video abut these . I will be very thank full

[@pure4lyfe5]

What's that awesome code editor you're using to see your objects?

[@ColorCodeio]

Chrome DevTools

[@fizruk7644]

Can we say that, when we define properties inside constructor functions with this keyword, it is not in prototype and it actually same thing as factory function and has same problems? And can we say that everything we write inside classes are created directly in prototype? so classes are short way of costructor.prototype ?

[@ColorCodeio]

Almost. Adding properties to 'this' keyword in a constructor function does NOT add it to the prototype but you can reference the 'this' inside any function you add to your prototype. So they are aware of each other and that's a big advantage. The second part of your question is correct. Adding 'functions' to a class is the exact same thing as adding a function to the prototype of a constructor function. It's just a different syntax.

[@keronwilliams5392]

Hi is it possible to chain factory function methods when you call them? E.g. sayName().location().favFoods(). Not sure if I'm phrasing my question correctly sorry lol I can't use the `return this` keyword inside the factory function like how you would with a constructor :( code below: const Nerd = (name, city, food) => { const { sayName, location } = Person(name, city) const { favFoods } = FaveFood(food, name) const doSomethingNerdy = () => console.log(`${name} likes nerd stuff!`) return { sayName, location, favFoods, doSomethingNerdy } return this } const colorCode = Nerd('ColorCode', 'The Matrix', 'Fried Tofu and Teriyaki Chicken') colorCode.sayName().location().favFoods() // uncaught reference error :(

[@KhanKhan-ym4mo]

which software did you use for recording / creating this video please? thanks.

[@ColorCodeio]

Chrome DevTools and Final Cut Pro

[@KhanKhan-ym4mo]

@@ColorCodeio thanks, but you pressed some button which bought chrome in view etc, whats tht ?

[@ColorCodeio]

@@KhanKhan-ym4mo ​ if you're talking about the highlight/spotlight effect around 2:59 I use something called mouseposè for Mac.

[@gowthamsrsk]

What is this interpreter you are using for code.

[@kran399]

Explain " return " in JavaScript . please make a Deep UnderStanding Video ,Please Sir.

[@12nov83]

which editor...you used? please

[@ColorCodeio]

It's called RunJS: runjs.app/?via=colorcode

[@michelironside6160]

how much css and html do i need start learn javascript?

[@ColorCodeio]

Zero :)

[@AlejandroGarcia-ff5bz]

Technically you can start without it but eventually you will cross paths and have to learn it to go further. You can learn the fundamentals of programing using Javascript.

[@Solo_playz]

We want set up tour..

[@ColorCodeio]

It’ll be included in my JS MasterClass. Coming soon.

[@Solo_playz]

@@ColorCodeio kk sir, we are curious about your js master classes . New subscriber 😊✌️

[@edhead76]

OMG, have my babies; you've shown me the light with your incredible teachings!! 🤡

[@Alt3Tab]

14:13 Gramma song?

[@thedelanyo]

I see. Understands. Object.prototype is great great great grandpa of all objects...

[@ColorCodeio]

👴👵

[@davidmmadden]

OG Batman

[@ColorCodeio]

:D

[@rafaelcalderon6658]

Crack💪

[@nononnomonohjghdgdshrsrhsjgd]

your music is stronger than your voice. otherwise very pleasant video,

[@antoniosimonetti2109]

PERCHè CONOSCI L'ITALIANO? thx for the video!

[@ColorCodeio]

Non sono italiano ma amo l'Italia

[@Pseudo___]

I default to just using class all the time

[@GrzegorzDryja]

Batman :)

[@GBlunted]

Why don't the sound work?!! Noooooo! I need this knowledge...😢😢😢

[@VaibhavSharma-zj4gk]

Hi add beginner word to your videos and your views will increase.

[@Pareshbpatel]

{2024-03-08}

[@NiiiGhtyR]

why do i feel like you're iranian pal! that Qoli is sus!

[@ColorCodeio]

Qoli is super sus, I agree... And yes I'm Iranian.