The condition is there because it would override the method over and over once you create an instance of "peopleDynamicProto" object. You could check it by placing a console.log right inside the if statement and set the if to "true"
I think you could tell, you can have default value like that, var People = function (age) { this.age = age || 23; // 23 become the default value otherwise. } or eventually with es6, like that : var People = function (age = 23) { this.age = age; }
When i am trying to learn Java script i saw so many websites but i could able to understand and also i dnt have any confidence on javscript after watch these tutorials i have got a lot of confidence on java script .thank you TECHSITH.
Coming from python,I can easily relate to the constructor "method" where instead of this.name=name;this.age=age;this.state=state; it was self.name=name/self.age=age/self.state=state(of course indented).Same with the function definition below - just replace "this" with "self" ,console.log() with print(),take out the semicolon and you have pythonAnd you would do just like in the video to instantiate an object from a class in Python.Apply the same technique in javascript.So nice to see that you can apply concepts from other OOP language here to learn the specifics of javascript faster.
This was very well defined tutorial, it makes everything clear now which I read before like how the prototype works and how you create the constructor, how you can achieve OOPS in javascript. In all the patterns I found Dynamic prototype pattern most useful, since it gives you the constructor and prototype pattern both, also its space efficient
Thank you! I have been looking for this video for several days now, and I finally found it!! I now know the strongest way to build objects in objects using OO programming concepts in JS.
This is a great video! One piece of feedback is constructor functions should typically have their first letter capitalized as in: var PeopleFactory = function(name, age, state){ this.name = name, this.age = age, this.state = state };
I love the detail in the video. What I want to see in tutorials is using these objects in simple applications with more useful output. Everyone just prints out text. Do things that make programing more useful. Like showing how many lines of code it takes to do something purely functionally, then object oriented. -Keep up the great work!
Andrew, I have created a series specifically for that, where i teach object oriented programming using constructor/prototype pattern and mixins using factory pattern. check out the series here ruclips.net/p/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt
Very nice tutorial.. Very well explained, day to day when we do coding we do use this but we dont know these all are the patterns.. Now I can proudly say I know Javascript design patterns.. Thank you techsith :)
Thank you, very good explanation with code. I would request you please make a sample project and apply all the concepts which we have learnt in this video so we will have more clear idea about the concepts.
@techsith the Dynamic Prototype seems breaks the responsibility of the a Constructor, where the responsibility should be just initialize the properties for the object being constructed. For a given case when I want to inherit a given object's prototype - Emp.prototype = Object.create(Person.prototype); But, in case of Dynamic prototype pattern we have to - // Create the first Object 1st // Until below line executes the Person.prototype.printPerson won't be available var p1 = new Person('John', 20, 'CA'); // Then inherit the prototype Emp.prototype = Object.create(Person.prototype); Please share your opinion. Thanks in advance.
+Baba Michael Thanks for really nice comment. I really appreciate people writing positive comments. This really encourages me to make more videos. As for disliking the video, i there there are few following reasons why people do it. 1) Some time they accidentally push unlike button in hurry but their real intention is to click like button. 2) They find sometime typo, or some other spelling errors ( i think this is really a wrong reason to unlike someones video). 3) Some people find the video misleading because they were looking for something completely different topic ( i dont think my videos fall in that category) 4) some people are just bitter. Well so, you or anyone thinks these are good or valid reasons to unlike someones video.? I would like to know so i can improve . Thanks
I'm not sure if when you say that this.value (around 9:00) is a property of the constructor you are not misleading a bit. If you called the function by invoking it normally you’d actually augment the global object, so it is more precise to say that “this” inside the constructor is: the global object if you call it as a regular function, or an implied returned object if you use the “new” keyword. Also, it is best practise to capitalize first letters of constructor names, and it is pointless to put properties on the prototype. Typically you only put methods there.
Excellent explanation. Just a feedback to make people understand Prototype Pattern better upload one video on prototype. e.g. What is prototype? Actually in prototype pattern we are utilizing the concept of prototype i.e. every object is associated with another object or in short every object has a prototype object associated with it and an object inherits properties from it. In the prototype pattern we just took advantage of that concept. The beauty is we have achieved inheritance too. Just remember again we didn't set name yet we got the default just because of the base class which in java script is prototype object. Keep it up. Thanks for sharing your wonderful knowledge.
+Ashish Kalra Hi I just released a tutorial on prototype. please check it out ruclips.net/video/7oNWNlMrkpc/видео.html i have part -2 of this tutorial coming up in few days.
thanks for this man, ive been doing asp.net for about 8 years, but honestly i havent used javascript that long since microsoft made us lazy with all that ajaxframework and stuff thanks im doing this tutorials
I had a similar situation . worked on asp.net c# for sometime and lost most of the other skills. All the new JavaScript frameworks work differently so I had to get used to it for good.
I would suggest. start a GitHub page, and a project in React or similar framework and build your project. Use all the latest tools. git, Linux, atom, etc...
@techsith, thank you for this very clear explanation. I learned a lot from your videos. :) I have 1 question regarding Factory Pattern. Why did you use this.name, this.age, this.state inside printPerson(). Does 'this' on printPerson() doesn't change context? Thanks again!!!
One rule of thumb is . if printPerson() is a method or the object than "this" inside the printPerson means the object. but if its a regular variable then it gets its own scope. and this.name is going to be undefined as its not bind to the outerscope.
Coming 5 years later - with ES6 having introduced const, let and template literals, and later versions even more goodies - seeing your way of coding makes you look like a beginner lol, but that's how people coded back in the days. I still don't like the class keyword that was introduced in ES6 because it abstracts what will show up in the browser's devtools, so different patterns for object creation is still good to learn about.
var Person = function(name, age, state){ this.name = name, this.age = age, this.state = state }; Person.prototype.print = function() {...}; that's all you need.
I was really wondering why he didnt do it this way tho, its functionally the same, with less code, and seems to read better. You have your constructor, plus all of its prototype definitions..
The most clear and readable is the constructor pattern. I don't see a benefit in the others other than memory usage. But how much does this actually affect performance?
Hello Sir. Nice tutorial huh. This will help me a lot. As you said in the last part of your video, we can ask you what topic we want, can you provide us an practical example using objects? Thank you Sir! Have a good day!
Dynamic Prototyping: Whats the advantage of checking for the print-function compared to just assign it to the prototype outside of object-function? For me, the check adds more complexity to it, that is not needed.
Each of the Objects you created were functions, I have been playing around trying to learn JS and created my Objects using an name:value Object with just the vars in the Object itself and any function built out of the Object itself like your prototype design only not using the word 'prototype'. Could you do a short lesson on the difference between these and why one may be prefered over the other? This was a great lecture thanks
i do have a tutorial on prototype inheritance. you can check it out. in nutshell adding method directly in the object creates heavy objects. if you create another object from it it will have a copty of those methods. While prototype methods are more like a refrence.
What level are you at right now? I would suggest creating a project on GitHub and try to build it using JavaScript. This will keep you focus. Try to work atleast twice a week on it .
very good and nice explanation. On first method i.e. factory.. what would be the problem if method code is replicated with all the objects.. I think once object done its job,, it will be out of HEAP.
+inj rav factory is nice pattern that allows you to compose object and the method that creates the object can be used to create diffrent objects . and yes once the object is done its job its will be out of Heap
Quick question. For the factory pattern I did not use "this" keyword for the printPerson function console.log call but I still returned the same results. I also created an animal factory with the same function and did not use the "this" keyword and both my animal and people objects printed just fine. "this" is supposed to define the scope of the properties correct? So is using "this" in the current context just best practice but not required?
Thanks for share, nice explanation. Just a inside, in the dynamic proto, last example, I think should be peopleDynamicProto.prototype.printPerson instead this.printPerson in the if statement.
+Adalberto Joco :Both will work because on first object creation printPerson has been added to the prototype chain so even if you try to check with this keyword it will give typeof as function.
It would be great if you can expain me What is the difference between when I am writing prototype.property / prototype function inside main function or outside main function ?? Becasue by doing both way allow me to access it where I created new object
I would prefer it outside the main function . I have a new series on object oriented JavaScript where i explain the whole concept well. you can check it your.
@techSith can i know what's wrong in this, in this way we can avoid an empty function declaration var test = function(){ test.prototype.insideTest = function(){ console.log('cool') } console.log(this) }
yes you can do that . here is an example const test = function() { test.prototype.insideTest = function(n) { this.n = n; } } const newTest = new test(); newTest.insideTest(1) console.log(newTest)
Hi techsith, I request for a clarification. Thanks to you, I have gained advanced skill set but I really do not know where to apply this. I want to have something created/contributed to a project, that is visible to my potential employers so as to prove my skill. How can I do this online ? Can you please briefly guide us and share your experience as it will be really helpful for most of us. Thank you so much
Hi Suhas, application for object creattion patterns is a s following . If you have used angular js you would see use of factories . its basically a library of functions that you can inject into your module and you will have all the factory functions available. the factory function looks something like this. app.factory('MyFactory', function () { return { factoryFunction: function () { console.log('hello'); } } }); in the controller of angular app you can use this factory like this app.controller('AppController', function (MyFactory) { MyFactory.factoryFunction(); // logs 'hello' }); Now services in angular uses constrctor pattern as below app.service('MyService', function () { this.serviceFunction = function () { console.log('hello'); }; }); You can use inject in your app like this app.controller('AppController', function (MyService) { MyService.serviceFunction(); // logs 'hello' }); Overall if you really want to use these pattern you can create your own project on github I would say first create a project, think of something that you would enjoy building and then Break it down into functionalities and let me know . I will help you utilize somte of the patterns so you would understand.
Hi Techsith, Thank you so much for the reply. And in general if I have to apply my Javascript skills, Do you think contributing to open-source is the best way or are there other ways too to demonstrate my skills?
cmon man, be creative, build a website, create database if you want, script some animations or try the coding train with some processing, make simple html game -----> put all in github, link to blog or website and you will be atleast okeish :)
Hi i find this reply helpful. I want to build something to put this learning in practice. Can you please give me some examples what i can start building? I would appreciate your help.
do I always have to define my functions first before they appear in code even if i do not use them?, e.g console gives me an error function x not defined even though this function would only be executed if i press a button? One more question considering fetching data from web. ajax, fetch or axios, which one should I use. Thanks techsith
Yes you have to define function before you use them even if you are not using athe load time. Fetching data from the we should be done using promises which is the best way. I have a tutorial on promises if you want to check it out. it uses ajax inside.
Instead of using the *if* statement in the dynamic prototype example, can we use the *||* operator like so: this.printPerson = this.printPerson || PeopleDynamicProto.prototype.printPerson = function(){ // method code };
@@VENKATBHARADWAJB JavaScript is dynamically typed because a coder knows his own codebase, a smart coder uses great variable names that make understanding it's value or use easy, and you should read what a function and it's parameters do before tossing in data and calling it. If you do want that level of control you can write error handling logic, or use TypeScript.
Thank you! I was stuck on a textbook on NodeJS because it was using the dynamic prototype pattern and assuming the reader had knowledge of this pattern. Is there any way to combine this with the Revealing Module Pattern so as to have restricted access to my parameters but keep my methods out of the individual instantiations and in a prototype?
yes. When you talk about using prototype because the problems of the Construct pattern you said that every time you create an object, the properties and methods are created again and again, wanted to know if the sames happen with the Factory pattern
Hi techsith, i found an another way to create multiple methods in prototype from MDN, function MyObject(nickname, message) { this.nickname = nickname.toString(); this.message = message.toString(); } (function() { this.getName = function() { return this.nickname; }; this.getMessage = function() { return this.message; }; }).call(MyObject.prototype); Using .call() method to make more concise syntax.
Prototype creates instances for the object? or they will share the same memory. if they share same memory then all the objects will have same value. So tell me how it works?
for the properties , for example, x.prototype.prop = 1; This would become like a static (shared) property. Only do this if you want that behaviour. However for function it makes more sense. x.prototype.myFunct = function(){}; this you want shared. and not attach with every object .
the tutorial really helpful but I am little confused between contructor pattern and dynamic prototype pattern, both works like same only we put if condition to avoid overriding prototype function but object works like constructor pattern means object already copied function in its own property, so how it better than prototype pattern?
Dynamic prototype is consider as improvement to the regular constructor pattern as you can see in the example. And overall dynamic prototype is bit better than prototype pattern as it allows user to set the prototype dynamically. I would suggest avoiding the regular constructor pattern. Also, now you can use classes.
It is really nice video but when we talk about create an custom architecture of NodeJS what should we do? I required to create an micro-service based custom architecture, so I bit confused that what should I do? which design pattern I should use to construct an architecture of an application? can you give me suggestion or guidelines?
Actually there is no specific requirement in an application. I would say I have an idea but I don't know how to implement this structure in application. Idea is like that, it has an interface with some methods and which is like init() and it must implements in every class, where it inherits and some common libraries which my use in application anywhere. So this is basic requirements. I know JavaScript and NodeJS and having 7 years of experience in programming but I bit confused that how do I start and create application boiler plate with core JavaScript to create an application structure. I know very well Express framework, but I would like to create robust structure with object oriented programming in NodeJS with JavaScript which will help me to in future application. So I am very thankful to you if you guide me.
Hello ,Excellent tutorial ,could you please provide more info about memory management and more about performance improvements and more inside stuff like how engine interprets the Js thanks a lot
I was thinking of such tutorial but i was not sure about the audience. Good to know that you are intrested to know . i will think of some technique to improve performance and some dos and donts in JS. Thanks for watching!
Actually I have a series on Object Oriented JavaScript . Its one of my playlist , Please check it out. . And if you cant find what you looking for , let me know I will make a video on that subject. Thanks for watching.
Quick question with factory and constructor method... Didnt we use 'new' while declaring our Factory method by assigning it to {} ? Isn't this same as doing a constructor pattern but just using new implicitly ? Thanks for the informative videos though!
I have a question, towards the end of the video when explaining "if" condition in Dynamic Prototype Pattern, you say that the propose of if condition is to check if printPerson function has been created or not. (as per my understanding) it will be created only once in a shared space when we create the first object. after that each time we create an object, this function will not be created (if condition will filter it out). This is the background question>>How is this different from Prototype Pattern? I am not talking about whole pattern, i am just comparing printPerson function and logic of using if condition in Dynamic Prototype Pattern but not in Prototype Pattern. in Prototype Pattern (using key word "prototype") when an object is created the function printPerson is kept in shared space once and all the following objects will have access the function (no duplication of function is there). So whats the logic of using If condition in Dynamic Prototype Pattern if you are using for example people. prototype.printPerson (using "prototype" key word as you did in Pattern Prototype) inside If Condition?
Dynamic Prototype Pattern makes sure that you define function only one time and inside the constructor function and not outside. this way you have to check if it's not previously defined then you define it. It's important as you can define the prototype method outside the constructor function.
Are you able to provide examples of when one pattern should/shouldn't be used over another? Each of these patterns can acheive the same end result, but I'm assuming there are reaosns at an engineering level (performance/memory reasons) why these different pattens exist.
Really nice video... Just want to know what is the difference between constructor pattern & prototype pattern. Why should one prefer prototype over constructor pattern?
I have a video on prototype inheritance. there are two parts to it. you should watch it to understand it. But to explain in short. in prototype inheritance, the objects are lighter since the methods are defined in the prototype.
Dude, your videos are cool, but please do double click to higlight the word you want to copy/past. I cry when you do it with mouse drugging, it's too slow!
In the beginning of the video about "Factory Function" why would you use the (.temp) object rather than use the (.this) function and also what is the significance of the .temp object?
I think this is a better way for the last one.... var peopleDynamicProto = function(name, age, state){ this.age = age; this.name = name; this.state = state; }; peopleDynamicProto.prototype.printPerson = function(){ console.log(this.name+ ", " + this.age+ ", "+ this.state) };
![YoungBoy Never Broke Again - Missing Everything [Official Video]](http://i.ytimg.com/vi/dTYeMZGzOzw/mqdefault.jpg)
1:08 Factory pattern
7:36 Constructor pattern
12:20 Prototype pattern
24:00 Dynamic prototype pattern
Needed 4 myself, but hope it'll be useful for anyone. Great tutorial btw :)
not all heroes wear capes :)
M not clear about Dynamic prototype pattern. function method is created one time in constructor pattern too. so why if condition here?
The condition is there because it would override the method over and over once you create an instance of "peopleDynamicProto" object. You could check it by placing a console.log right inside the if statement and set the if to "true"
Its really good bro..
For the first time I understood design pattern with ease. Your teaching skills are unique and excellent. I am big fan of your tutorials. Thank you :)
I think you could tell, you can have default value like that,
var People = function (age) {
this.age = age || 23; // 23 become the default value otherwise.
}
or eventually with es6, like that :
var People = function (age = 23) {
this.age = age;
}
this.age = age || 23 // will give you 23 if you want to pass 0 or empty string cause they're falsy values. Your ES6 example is better
Give this guy a like! Teaching slowly but steady. Thank you!
When i am trying to learn Java script i saw so many websites but i could able to understand and also i dnt have any confidence on javscript after watch these tutorials i have got a lot of confidence on java script .thank you TECHSITH.
Coming from python,I can easily relate to the constructor "method" where instead of this.name=name;this.age=age;this.state=state; it was self.name=name/self.age=age/self.state=state(of course indented).Same with the function definition below - just replace "this" with "self" ,console.log() with print(),take out the semicolon and you have pythonAnd you would do just like in the video to instantiate an object from a class in Python.Apply the same technique in javascript.So nice to see that you can apply concepts from other OOP language here to learn the specifics of javascript faster.
JavaScript has lot of concept from python so i think you will feel bit familiar.
he never notice the peron function instead of a person
i speak spanish and i was like wtf is Peron? XD Is like singular of People? I didn't know that LOL
When he smoothly continued the lesson including the typing error, I knew he knew his shit.
This was very well defined tutorial, it makes everything clear now which I read before like how the prototype works and how you create the constructor, how you can achieve OOPS in javascript. In all the patterns I found Dynamic prototype pattern most useful, since it gives you the constructor and prototype pattern both, also its space efficient
To learn more about OOPS in JavaScript I have a tutorial series ruclips.net/p/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt
Its looking good series, surely I will go through this, thanks a lot
great explanation. It has helped me immensely to understand not only OOP and JavaScript but how creational design patterns work.
Thank you! I have been looking for this video for several days now, and I finally found it!! I now know the strongest way to build objects in objects using OO programming concepts in JS.
Mind blowing tutorial Sir. I had never understood this concept so clearly. Thanks for your help 👍.
Talent is what God gives us, Skill is what we give back to Him............Big Thank you :) !
This is the best tutorial I have come across so far, thank you very much.
Best tutorial class javascript in you tube.
+Vagnoni Vagnoni Thanks you . I am glad you learn something from it. :)
This is a great video! One piece of feedback is constructor functions should typically have their first letter capitalized as in:
var PeopleFactory = function(name, age, state){
this.name = name,
this.age = age,
this.state = state
};
+Maxwell Lasky Thanks for the feedback. I will keep that in mind.
+Maxwell Lasky Why would you call a constructor function 'factory'? :P
I guess in javascript everything is made of functions. and functions are also constructors . Hence the constructor function 'factory' ;)
+Daniel Jeffery I was really just trying to put it in in the context of the video because +techsith named the function declaration 'peopleFactory'
haha.. It's the Revenge of the sitt, using the factory created clones. :)
FYI: Looking forward to the The Force Awakens
I love the detail in the video. What I want to see in tutorials is using these objects in simple applications with more useful output. Everyone just prints out text. Do things that make programing more useful. Like showing how many lines of code it takes to do something purely functionally, then object oriented. -Keep up the great work!
Andrew, I have created a series specifically for that, where i teach object oriented programming using constructor/prototype pattern and mixins using factory pattern. check out the series here ruclips.net/p/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt
Thanks so much!
Very nice tutorial.. Very well explained, day to day when we do coding we do use this but we dont know these all are the patterns.. Now I can proudly say I know Javascript design patterns.. Thank you techsith :)
Yep, we use lots of patterns day to day basis but we dont know what they are. :)
Thank you, very good explanation with code. I would request you please make a sample project and apply all the concepts which we have learnt in this video so we will have more clear idea about the concepts.
Very Good Tutorial. Clearly and properly explained advance concepts
Object creation patterns explained very clearly and with examples!
@techsith the Dynamic Prototype seems breaks the responsibility of the a Constructor, where the responsibility should be just initialize the properties for the object being constructed.
For a given case when I want to inherit a given object's prototype -
Emp.prototype = Object.create(Person.prototype);
But, in case of Dynamic prototype pattern we have to -
// Create the first Object 1st
// Until below line executes the Person.prototype.printPerson won't be available
var p1 = new Person('John', 20, 'CA');
// Then inherit the prototype
Emp.prototype = Object.create(Person.prototype);
Please share your opinion. Thanks in advance.
Great tutorial. Very clear. Thank you.
you have a very different perception of "clear" than most people.
Sir i am really amazing i can clearly understood.. i love your channel i will support you always.....:)
How can anyone dislike this amazing tutorial? I am amazed! Thank you techsith
+Baba Michael Thanks for really nice comment. I really appreciate people writing positive comments. This really encourages me to make more videos. As for disliking the video, i there there are few following reasons why people do it.
1) Some time they accidentally push unlike button in hurry but their real intention is to click like button.
2) They find sometime typo, or some other spelling errors ( i think this is really a wrong reason to unlike someones video).
3) Some people find the video misleading because they were looking for something completely different topic ( i dont think my videos fall in that category)
4) some people are just bitter.
Well so, you or anyone thinks these are good or valid reasons to unlike someones video.? I would like to know so i can improve .
Thanks
wow...great tutorial explains all the object creation patterns with single syntax...
I'm not sure if when you say that this.value (around 9:00) is a property of the constructor you are not misleading a bit. If you called the function by invoking it normally you’d actually augment the global object, so it is more precise to say that “this” inside the constructor is: the global object if you call it as a regular function, or an implied returned object if you use the “new” keyword. Also, it is best practise to capitalize first letters of constructor names, and it is pointless to put properties on the prototype. Typically you only put methods there.
Excellent explanation. Just a feedback to make people understand Prototype Pattern better upload one video on prototype.
e.g. What is prototype?
Actually in prototype pattern we are utilizing the concept of prototype i.e. every object is associated with another object or in short every object has a prototype object associated with it and an object inherits properties from it.
In the prototype pattern we just took advantage of that concept. The beauty is we have achieved inheritance too. Just remember again we didn't set name yet we got the default just because of the base class which in java script is prototype object.
Keep it up. Thanks for sharing your wonderful knowledge.
+Ashish Kalra Thanks for the suggestion. I am in process of making a video on prototype.
+Ashish Kalra Hi I just released a tutorial on prototype. please check it out ruclips.net/video/7oNWNlMrkpc/видео.html
i have part -2 of this tutorial coming up in few days.
thanks for this man, ive been doing asp.net for about 8 years, but honestly i havent used javascript that long since microsoft made us lazy with all that ajaxframework and stuff thanks im doing this tutorials
I had a similar situation . worked on asp.net c# for sometime and lost most of the other skills. All the new JavaScript frameworks work differently so I had to get used to it for good.
techsith so what do you suggest to do in order to keep the rythm on the technology and make use of it the way you should
I would suggest. start a GitHub page, and a project in React or similar framework and build your project. Use all the latest tools. git, Linux, atom, etc...
best tutorial on objects so far
@techsith, thank you for this very clear explanation. I learned a lot from your videos. :) I have 1 question regarding Factory Pattern. Why did you use this.name, this.age, this.state inside printPerson(). Does 'this' on printPerson() doesn't change context? Thanks again!!!
One rule of thumb is . if printPerson() is a method or the object than "this" inside the printPerson means the object. but if its a regular variable then it gets its own scope. and this.name is going to be undefined as its not bind to the outerscope.
beautifully and simple explanation. thank you very much.
Simple examples, straight to the point explanation thanks for these tutorials, please do more, I will buy it :-)
this tutorial very helpful to understand how different ways we create object
for the factory pattern the syntax in that video is old. try new syntax in this video using object.assign ruclips.net/video/9Ky4X6inpi4/видео.html
Best tutorial on object creation.
your tutorials are really clear and understandable , good job
Coming 5 years later - with ES6 having introduced const, let and template literals, and later versions even more goodies - seeing your way of coding makes you look like a beginner lol, but that's how people coded back in the days. I still don't like the class keyword that was introduced in ES6 because it abstracts what will show up in the browser's devtools, so different patterns for object creation is still good to learn about.
i get clear cocept of cactory pattern in this tutorial... thank a lot...
I am glad. thanks for watching! :)
var Person = function(name, age, state){
this.name = name,
this.age = age,
this.state = state
};
Person.prototype.print = function() {...};
that's all you need.
+MattBellButterfly That's one way. The other patterns are useful to know too.
+MattBellButterfly thats NOT all you need to know. Prototypal has a lot of benefits and is pretty much the new standard, classical is old school.
I was really wondering why he didnt do it this way tho, its functionally the same, with less code, and seems to read better. You have your constructor, plus all of its prototype definitions..
The most clear and readable is the constructor pattern. I don't see a benefit in the others other than memory usage. But how much does this actually affect performance?
Hello Sir. Nice tutorial huh. This will help me a lot. As you said in the last part of your video, we can ask you what topic we want, can you provide us an practical example using objects? Thank you Sir! Have a good day!
Dynamic Prototyping: Whats the advantage of checking for the print-function compared to just assign it to the prototype outside of object-function? For me, the check adds more complexity to it, that is not needed.
Ah, its just the visual aspect of keeping the print-function inside the object.
Each of the Objects you created were functions, I have been playing around trying to learn JS and created my Objects using an name:value Object with just the vars in the Object itself and any function built out of the Object itself like your prototype design only not using the word 'prototype'. Could you do a short lesson on the difference between these and why one may be prefered over the other? This was a great lecture thanks
i do have a tutorial on prototype inheritance. you can check it out.
in nutshell adding method directly in the object creates heavy objects. if you create another object from it it will have a copty of those methods. While prototype methods are more like a refrence.
Very good and easy tutorial, exactly what I was looking for!
Thanks for watching!:)
U r grt sir...n JavaScript are so easy after watching yr video..
I am glad that it's helping you. Thanks for watching! :)
Hi sir, kindly suggest how to improve coding skill ...
What level are you at right now? I would suggest creating a project on GitHub and try to build it using JavaScript. This will keep you focus. Try to work atleast twice a week on it .
very good and nice explanation.
On first method i.e. factory.. what would be the problem if method code is replicated with all the objects.. I think once object done its job,, it will be out of HEAP.
+inj rav factory is nice pattern that allows you to compose object and the method that creates the object can be used to create diffrent objects . and yes once the object is done its job its will be out of Heap
THANK YOU!!!!!!!wow so easy and comprehensible .
THanks for watching!
Quick question. For the factory pattern I did not use "this" keyword for the printPerson function console.log call but I still returned the same results. I also created an animal factory with the same function and did not use the "this" keyword and both my animal and people objects printed just fine. "this" is supposed to define the scope of the properties correct? So is using "this" in the current context just best practice but not required?
you can do it without using this. Its not required. Actually, i have a video on javaScript mixins where i am using latest syntax for factory pattern .
You are the great tutor!!
thanks for watching! :)
Thank you very much for the great tutorial! Short and simple explanation.
Great to learn sir...........I am a learner thanks for providing this stuff!!!!!!
Thanks for share, nice explanation. Just a inside, in the dynamic proto, last example, I think should be peopleDynamicProto.prototype.printPerson instead this.printPerson in the if statement.
+Adalberto Joco :Both will work because on first object creation printPerson has been added to the prototype chain so even if you try to check with this keyword it will give typeof as function.
A constructor name should start with a capital letter
Its not very necessary in Javascript
Best explanation ever. Thank you
Thanks for watching!
It would be great if you can expain me What is the difference between when I am writing prototype.property / prototype function inside main function or outside main function ?? Becasue by doing both way allow me to access it where I created new object
I would prefer it outside the main function . I have a new series on object oriented JavaScript where i explain the whole concept well. you can check it your.
Nice tutorial. This video is now published on PencilTree.
U are way better explaining this than my professor, thx man!
Thanks :)
@techSith can i know what's wrong in this, in this way we can avoid an empty function declaration
var test = function(){
test.prototype.insideTest = function(){
console.log('cool')
}
console.log(this)
}
yes you can do that .
here is an example
const test = function() {
test.prototype.insideTest = function(n) {
this.n = n;
}
}
const newTest = new test();
newTest.insideTest(1)
console.log(newTest)
Amazing tutorial, you kept it simple all the way throught.
Hi techsith,
I request for a clarification. Thanks to you, I have gained advanced skill set but I really do not know where to apply this. I want to have something created/contributed to a project, that is visible to my potential employers so as to prove my skill. How can I do this online ? Can you please briefly guide us and share your experience as it will be really helpful for most of us. Thank you so much
Hi Suhas, application for object creattion patterns is a s following . If you have used angular js you would see use of factories . its basically a library of functions that you can inject into your module and you will have all the factory functions available. the factory function looks something like this.
app.factory('MyFactory', function () {
return {
factoryFunction: function () {
console.log('hello');
}
}
});
in the controller of angular app you can use this factory like this
app.controller('AppController', function (MyFactory) {
MyFactory.factoryFunction(); // logs 'hello'
});
Now services in angular uses constrctor pattern as below
app.service('MyService', function () {
this.serviceFunction = function () {
console.log('hello');
};
});
You can use inject in your app like this
app.controller('AppController', function (MyService) {
MyService.serviceFunction(); // logs 'hello'
});
Overall if you really want to use these pattern you can create your own project on github
I would say first create a project, think of something that you would enjoy building and then
Break it down into functionalities and let me know . I will help you utilize somte of the patterns
so you would understand.
Hi Techsith,
Thank you so much for the reply. And in general if I have to apply my Javascript skills, Do you think contributing to open-source is the best way or are there other ways too to demonstrate my skills?
cmon man, be creative, build a website, create database if you want, script some animations or try the coding train with some processing, make simple html game -----> put all in github, link to blog or website and you will be atleast okeish :)
Hi i find this reply helpful. I want to build something to put this learning in practice. Can you please give me some examples what i can start building? I would appreciate your help.
can you give examples in REACT? as i am not familiar with angular.
thanks
kuljeet
do I always have to define my functions first before they appear in code even if i do not use them?, e.g console gives me an error function x not defined even though this function would only be executed if i press a button? One more question considering fetching data from web. ajax, fetch or axios, which one should I use. Thanks techsith
Yes you have to define function before you use them even if you are not using athe load time. Fetching data from the we should be done using promises which is the best way. I have a tutorial on promises if you want to check it out. it uses ajax inside.
Thanks techsith
Everything available explained! Thanks for tutorial
Thanks for watching! :)
@techSith, fantastic ...... No words to say, my sincere request is, can you make a video on Singleton, strategy, modular pattern as well using Class
Here is playlist on object oriented javaScript that also include classes.
ruclips.net/p/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt
Singleton, strategy, modular pattern ???
accent techsith -ALMOST PERFECT! SUPIRI
You can look at the latest factory pattern in my JavaScript mixin video. Thanks for watching.
techsith sure
Excellent tutorial - thanks for this!
Instead of using the *if* statement in the dynamic prototype example, can we use the *||* operator like so:
this.printPerson = this.printPerson ||
PeopleDynamicProto.prototype.printPerson = function(){
// method code
};
this might be error prone as someone might say this.printPerson = true;
that's way long, simply write:
_____________________________________________________________
if(!this.printperson){
PeopleDynamicProto.prototype.printperson=function(){
console.log(this.age + this.state + this.weigh);
};
}
@@VENKATBHARADWAJB JavaScript is dynamically typed because a coder knows his own codebase, a smart coder uses great variable names that make understanding it's value or use easy, and you should read what a function and it's parameters do before tossing in data and calling it. If you do want that level of control you can write error handling logic, or use TypeScript.
Great, helpful video. Thanks!
Awesome and Crystal...
Thank you! I was stuck on a textbook on NodeJS because it was using the dynamic prototype pattern and assuming the reader had knowledge of this pattern.
Is there any way to combine this with the Revealing Module Pattern so as to have restricted access to my parameters but keep my methods out of the individual instantiations and in a prototype?
very nice video! Question, both the Construct and Factory patterns have the redundant problem right? Thanks!
Can you explain abit what you mean by redundant here?
yes. When you talk about using prototype because the problems of the Construct pattern you said that every time you create an object, the properties and methods are created again and again, wanted to know if the sames happen with the Factory pattern
Best explanation Ever. You are my Guru
Thanks for watching!
wow! excellent tutorial
Thanks,very very good tutorial.....
Great tutorial, congrats on 5k subs. (5001 now :) )
Thanks! I just noticed :)
Thank you for the content. It's helpful and clear.
can we add additional property to object in in dynamic prototyping ?
Yes you could add additional property whenever you like.
Hi techsith, i found an another way to create multiple methods in prototype from MDN,
function MyObject(nickname, message) {
this.nickname = nickname.toString();
this.message = message.toString();
}
(function() {
this.getName = function() {
return this.nickname;
};
this.getMessage = function() {
return this.message;
};
}).call(MyObject.prototype);
Using .call() method to make more concise syntax.
Yes this is also good functional programming trick .
Prototype creates instances for the object? or they will share the same memory. if they share same memory then all the objects will have same value. So tell me how it works?
for the properties , for example, x.prototype.prop = 1;
This would become like a static (shared) property. Only do this if you want that behaviour.
However for function it makes more sense. x.prototype.myFunct = function(){};
this you want shared. and not attach with every object .
the tutorial really helpful but I am little confused between contructor pattern and dynamic prototype pattern, both works like same only we put if condition to avoid overriding prototype function but object works like constructor pattern means object already copied function in its own property, so how it better than prototype pattern?
Dynamic prototype is consider as improvement to the regular constructor pattern as you can see in the example. And overall dynamic prototype is bit better than prototype pattern as it allows user to set the prototype dynamically. I would suggest avoiding the regular constructor pattern. Also, now you can use classes.
It is really nice video but when we talk about create an custom architecture of NodeJS what should we do? I required to create an micro-service based custom architecture, so I bit confused that what should I do? which design pattern I should use to construct an architecture of an application? can you give me suggestion or guidelines?
what is the requirement? I mean if you show me one specific requirement i can make suggestions.
Actually there is no specific requirement in an application. I would say I have an idea but I don't know how to implement this structure in application. Idea is like that, it has an interface with some methods and which is like init() and it must implements in every class, where it inherits and some common libraries which my use in application anywhere. So this is basic requirements. I know JavaScript and NodeJS and having 7 years of experience in programming but I bit confused that how do I start and create application boiler plate with core JavaScript to create an application structure. I know very well Express framework, but I would like to create robust structure with object oriented programming in NodeJS with JavaScript which will help me to in future application. So I am very thankful to you if you guide me.
Hello ,Excellent tutorial ,could you please provide more info about memory management and more about performance improvements and more inside stuff like how engine interprets the Js thanks a lot
I was thinking of such tutorial but i was not sure about the audience. Good to know that you are intrested to know . i will think of some technique to improve performance and some dos and donts in JS. Thanks for watching!
waiting for the day when you start making express and node.js tutorials , by the way this one was awesome tutorial!
+saurabh vyas That is my plan next. I will create node.js tutorials. thanks for the suggestion.
Excellent explanation
thanks for such a wonderful tutorial. Are we to expect more???
Actually I have a series on Object Oriented JavaScript . Its one of my playlist , Please check it out. . And if you cant find what you looking for , let me know I will make a video on that subject. Thanks for watching.
Thanks mate, informative lesson.
Thanks for watching!
Quick question with factory and constructor method... Didnt we use 'new' while declaring our Factory method by assigning it to {} ? Isn't this same as doing a constructor pattern but just using new implicitly ? Thanks for the informative videos though!
I have a question, towards the end of the video when explaining "if" condition in Dynamic Prototype Pattern, you say that the propose of if condition is to check if printPerson function has been created or not. (as per my understanding) it will be created only once in a shared space when we create the first object. after that each time we create an object, this function will not be created (if condition will filter it out). This is the background
question>>How is this different from Prototype Pattern? I am not talking about whole pattern, i am just comparing printPerson function and logic of using if condition in Dynamic Prototype Pattern but not in Prototype Pattern. in Prototype Pattern (using key word "prototype") when an object is created the function printPerson is kept in shared space once and all the following objects will have access the function (no duplication of function is there). So whats the logic of using If condition in Dynamic Prototype Pattern if you are using for example people. prototype.printPerson (using "prototype" key word as you did in Pattern Prototype) inside If Condition?
Dynamic Prototype Pattern makes sure that you define function only one time and inside the constructor function and not outside. this way you have to check if it's not previously defined then you define it. It's important as you can define the prototype method outside the constructor function.
Are you able to provide examples of when one pattern should/shouldn't be used over another? Each of these patterns can acheive the same end result, but I'm assuming there are reaosns at an engineering level (performance/memory reasons) why these different pattens exist.
Really nice video... Just want to know what is the difference between constructor pattern & prototype pattern. Why should one prefer prototype over constructor pattern?
I have a video on prototype inheritance. there are two parts to it. you should watch it to understand it. But to explain in short. in prototype inheritance, the objects are lighter since the methods are defined in the prototype.
Great Tutorial Very Clear.Thank You
How to improve Programming logic skill ?
To improve Programming Logic Skill you have to practice a lot. I also created a video that might help. ruclips.net/video/X1omyGA67Vg/видео.html
very very clear and easy to follow along...7/7 (subbed)
thanks for watching!
Dude, your videos are cool, but please do double click to higlight the word you want to copy/past. I cry when you do it with mouse drugging, it's too slow!
Very well explained. Keep it up.
In the beginning of the video about "Factory Function" why would you use the (.temp) object rather than use the (.this) function and also what is the significance of the .temp object?
using this makes it a construction pattern . If you want to use Factory Pattern you have to build a temp object inside and return . .
Oh gotcha! Thanks!
Great tutorial!
:) thanks for watching!
please explain singleton , moduler pattern and observer pattern in js.
Sure I will make tutorials on those topics.
please make the above video -singleton , moduler pattern and observer pattern in js.
Thanks techsit I grabbed alot.
Thanks for watching!
Thanks a lot! Great tutorial ! :)
Great video. Thanks
Thanks for watching!
I think this is a better way for the last one....
var peopleDynamicProto = function(name, age, state){
this.age = age;
this.name = name;
this.state = state;
};
peopleDynamicProto.prototype.printPerson = function(){
console.log(this.name+ ", " + this.age+ ", "+ this.state)
};
Great work sir