This is a good and clear lesson but I feel like you missed the encapsulation aspect of factory functions and how you can theoretically make methods and attributes private with it. That was the explanation I was looking for after reading some articles about it.
Very good explanation! As a guy who learned C++ now learning web development, I was trying to do OOP the way you would in C++ but I couldn't figure out how the JSON data I was working with have a variable named 'shoulder-length'. You can't use a hyphen in Classes... Found this video and immediately understood what was going on! I had never heard of factory functions.
I completely lied about not being able to use single quotes in Classes. As in the example above, the syntax is: this['shoulder-length'] = variable. Still a great video and I think I may like factory functions better than classes as they are quicker to write and equally as readable.
Don't you find constructors kinda "clunky"? Having to separate out properties from the associated functions/methods doesn't sit as logically as this or classes for me 🤷♀
Hi there, by declaring: function createCircle() { .... } aren't you attaching your function to the main Window and as I recall you said that is BAD PRACTICE? since this can create problems with your script if using libraries... or so...?
hi, factory pattern is all about creating new instances for different classes in a single method. In this video, you are creating regular functions. Are you sure that this is the right way?
@@programmingwithmosh hi thanks for the reply and u replied very well. Exactly that's where am confused. But the implementation which you have shown is creating object for a single category circle. How about creating a fn shapefactory() for different methods circle, traingle, square and invoke different classes (circle,Tri,square) from shapefactory function? Ex: Fn shapefactory(){ if () new circle(); new Tri()}?
Hi Mosh, thanks for great videos. I have a question regarding methods. Is the method 'draw' in the above example duplicated on every object creation or is it created on the prototype? If it is duplicated for every object, then why should I favor factory functions?
@@aswink1505 fun fun Function has a really great video on factory functions and their uses. He points out that while they do mean that the function is copied for each instance, there are lots of advantages like proper encapsulation and simpler behaviour of "this" which make factory functions far more versatile unless you need to create thousands of them
Thank you for this video! If anyone could help me though; I understand the javascript code in this video and I understand JS is a scripting language as to why it's in the console. But what is this code drawing? Is it drawing a circle on the screen? Or I guess my question is... where is the circle going to be at?
The important concept here is the object... it could be a Car or Customer or BankAccount object equally well. Code libraries for drawing shapes (rendering pixels on a screen) often use objects to represent those shapes, and you can make use of some kind of drawing function by passing a shape object to that function as an argument. What you see above is a small fragment of a much larger application. (Everything I've said here applies to other programming languages also.) There are multiple JavaScript UI Frameworks available, and I would expect most (if not all) of them to use something similar to the above. (I've never used one - I've coded plenty of JavaScript across the decades, but my GUIs have been in other languages - but that's what I would expect.) Practical exercise: You can draw shapes in a browser (static HTML running client-side JavaScript) by grabbing hold of the inbuilt "canvas" object of the HTML DOM. (Google something like "HTML canvas draw shape" and check out something like the Mozilla tutorial.) Once you've got a drawing function working, then try modifying that function to take a circle as an arg, and "front end" it with another function that constructs a circle and passes it as an argument to the drawing function. Then amend the "front end" function to build multiple circles and call the drawing function multiple times, passing a different circle as the arg each time. This seems like a long-winded approach to get some simple drawing done... and it is. But your drawing function would be the equivalent of something a UI framework/library might offer, so it's a learning exercise to see how such things work. Using a framework in a real project, you'd then be simply constructing shapes in your code, and calling a library function that someone else wrote to perform the actual rendering of pixels. Good luck!
Has anyone noticed one thing? When you call createCircle(1).draw(); though, it prints the message 'draw', the type of the draw() function returned in the browser console is 'undefined'. Why is it? Should it not be 'function'? Please explain why.
const createCircle = r => ({ r, draw() { console.log('draw');} }) const circle = createCircle(1) circle.draw // we are asking the interpreter, 'what is the value of this property?' it's a method // < ƒ draw() circle.draw() // we are asking the interpreter to evaluate the invoked method // < "draw" // < undefined
@@momoaraki7934: Never got the notification for this post, hence, got to see it after nine months. Anyway, thanks for your explanation. Based on your clarification, I have two questions: 1) With circle.draw, are we asking the interpreter about the "value" of the property or the "type" of the property? 2) With circle.draw(), as we are asking the interpreter to evaluate the invoked method, why is it returning a type anyway? Should it not just execute the method invoked and stop the control flow there? What is the need to return a type after executing the method?
@@priyamganguly let circle = createCircle(1); _// Returns { radius: 1, draw() { console.log('draw'); } }_ circle.draw _// access the draw property of circle, which is a function (method)_ circle.draw() _// call the draw() method, which logs 'draw' to the console_ _// if you run this in the console, you'll see `undefined` because draw() doesn't return anything_
Hi Mosh, great video! Query: how do you add methods from OUDSIDE the function? Following your example in the video, I have used the below for both factory and constructor functions and it works, but I wonder if there is another way specifically for factory functions? circle1.anotherDraw = function() { console.log('Adding a new method'); } circle1.anotherDraw();
The location property value was an object with 2 keys, x and y. To call this nested property (let's say x) it would look like circle1.location.x If you're curious on how to create a new circle and he had left it in where the parameters were (radius, location), you would need pass in an object for the location argument. Like this: const circle2 = createCircle(1, {x: 2, y:3})
Yes, this is the same as if you had made on object from a class in another language. This is necessary for closure. The important thing is that you don't have the same code written out multiple times. Now, if you want to change the way draw() works, you only need to change the code in one place.
