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.
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; };
The best decision in my TH-cam 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?😅
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.
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.
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.
For JavaScript, Prototypical inheritance is quicker to write, less typing in my opinion. The end goal is the same: to organize, and encapsulate properties and methods that can be reused in other areas of your code. It's important to understand so you know why all objects have a toString method in JS and the behavior of Object.keys vs Object.getOwnPropertiesOf etc... If you get confused, just remember, the purpose is to have access to all of the properties and methods that are in an already defined object without having to rewrite code.
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
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
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!
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
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?
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.
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.
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!
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.
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.
@@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!
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
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.
Extensively Underrated Channel. I am feeling lucky to see your teaching style. BTW, would love to have a youtube live collaboration with Hitesh Choudhury? 😊
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.
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?
@@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. 😄
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.
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......
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
Thank u sir for the free course, I really appreciate But is there any way I can access the code for other courses?. i only accessed the code for episode 1, which name is the inheritance and others can't be found.
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 ?
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.
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 ?
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.
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 :(
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.
What is the difference between a Factory Function and a Constructor in JavaScript?
Factory Functions are Better More Secure than Constructor Functions.
@@kran399 can you proof this ?
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.
Constructors are OOP. Anyone saying otherwise is simply wrong and abusing standard nomenclature.
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;
};
The best decision in my TH-cam 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?😅
Hands down the best teacher I’ve come across on TH-cam. Keep producing content!!! Love it
Thank you
Why you are not active 😢😢the bestest teacher ever
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.
Awesome! Thank you :)
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.
Awesome! Glad you liked it :)
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.
Following the Odin Project and looking up your videos definitely saves time on certain topics. Very clear and concise
Nice
Love the flow of this video. Awesome editing work as well. You deserve more subs!! (Here before 6K 😎)
Nice! Thank you :)
I'm happy I found your Javascript videos. Saying a very appreciating thank you from Northern Nigeria for now.
You are very welcome
This is the first video I have seen from this channel. Subscribed.
Great coverage of the topic and parallels of theory against real-world examples. True scholar and a gentleman in real life, keep it up.
For JavaScript, Prototypical inheritance is quicker to write, less typing in my opinion. The end goal is the same: to organize, and encapsulate properties and methods that can be reused in other areas of your code. It's important to understand so you know why all objects have a toString method in JS and the behavior of Object.keys vs Object.getOwnPropertiesOf etc... If you get confused, just remember, the purpose is to have access to all of the properties and methods that are in an already defined object without having to rewrite code.
Wow, I've watched so many videos on this and your explanation is by far the best. deserve way more subs
Awesome! Thank you
You explained the difference so good! I was struggling to understand the difference since im new to JS. You're the best🙌
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
Great to hear!
I came back to this video just to refresh my mind! Thank you once again!
You are so welcome!
Thank you so much for this series of videos! You explanations are perfectly clear, the editing is amazing and they are super entertaining :)
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
Thank you!
I've never watched a video of yours before, but way to go. Funny, simple and accurate. Good job!
Thanks Gustavo!
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!
Thank you ♥️
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
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?
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.
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.
I really had no idea, thanks alot!
You're welcome
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.
Thank you!
Very underrated channel don't worry will get 1 billion+ subscribers bro thanks bro great job
Thank you
Thanks for sharing. As someone learning javascript, you cleared up some confusion.
Love to hear that, thank you
hugely underrated quality channel
Thank you
I'm liking your channel honestly
👍
Just stumbled across your channel... really enjoyed this style of teaching! Great stuff!
Wonderful to hear. Thank you.
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!
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.
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.
@@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!
You a great Teacher and I appreciate you
Excellent. Very underrated channel!
Thank you
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
Top Tutorial! Greetz from Germany!!!
Guten morgen Germany!
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.
Extensively Underrated Channel. I am feeling lucky to see your teaching style. BTW, would love to have a youtube live collaboration with Hitesh Choudhury? 😊
Thank you. Not sure who that is but maybe in the future
Great series. Nice to know about Eric Elliot as well.
Top quality content. 10/10.
👍❤️
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.
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?
@@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. 😄
thanks for the tips. good stuff
great Content Love from India Sir.
This is a banger video. Thank you for the help.
👊👍
Nice style of teaching ❤
Pure gold found here
thank you so much, top notch explanation, amazing!!
god bless you
you make the best videos all over the internet thank you very much
you are the best!!!!!!
You're welcome :)
Really love your explanation
Thanks!
This man makes me wanna drink water whenever he does it =))
💧 🍺 cheers
Really good explanation, thanks a lot!
Glad it was helpful!
Holy shit... thank you! I now know how to create static variables/methods in my factory function! PROTOTYPES!!!!
👍🤘
Great teaching. Thank you.
👍
very understandable and practical way explaination. thank you so much x 10
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.
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......
Thanks for your explanatory examples and efforts !!
Awesome.... !!! 👍
👍
Amazing video.. Hats off
By far the best explanation I've heard about this, ColorCode >>> ChatGPT
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
Liked and subscribed.
great quality!
This channel is a fucking GEM
Thank you!
Great video
Thanks!
Thank u sir for the free course, I really appreciate
But is there any way I can access the code for other courses?. i only accessed the code for episode 1, which name is the inheritance and others can't be found.
Good stuff! subscribed
Awesome :)
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 ?
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.
happy to have inspired :)
Chris Brown. Cool name.
Wow!
Explain " return " in JavaScript . please make a Deep UnderStanding Video ,Please Sir.
Hello. Thanks for the video. What IDE are you using?
Chrome DevTools
Amazing video helped a lot
Dude great video.
Glad you enjoyed it
Great video ❤
🙏
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 ?
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.
Why don't the sound work?!! Noooooo! I need this knowledge...😢😢😢
thank you
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.
I wish he would launch a TH-cam series on React.
Wouldn't that be great :) ?
Great video, thx a lot!!
You are welcome!
Great stuff
Thank you
We want set up tour..
It’ll be included in my JS MasterClass. Coming soon.
@@ColorCodeio kk sir, we are curious about your js master classes .
New subscriber 😊✌️
king
What is this interpreter you are using for code.
i love you video, can you tell me what app or tools your using to record? it seems its cool
which software did you use for recording / creating this video please? thanks.
Chrome DevTools and Final Cut Pro
@@ColorCodeio thanks, but you pressed some button which bought chrome in view etc, whats tht ?
@@KhanKhan-ym4mo if you're talking about the highlight/spotlight effect around 2:59 I use something called mouseposè for Mac.
What's that awesome code editor you're using to see your objects?
Chrome DevTools
I loved how you just put you.name= قلی
I found that funny 😆
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 :(
how much css and html do i need start learn javascript?
Zero :)
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.
i like it
14:13 Gramma song?
I see. Understands. Object.prototype is great great great grandpa of all objects...
👴👵
Good vid
Thanks
which editor...you used? please
It's called RunJS: runjs.app/?via=colorcode
OMG, have my babies; you've shown me the light with your incredible teachings!! 🤡
OG Batman
:D
your music is stronger than your voice. otherwise very pleasant video,