JavaScript Factory Functions

JavaScript factory functions made simple.
🔥Get the COMPLETE course (83% OFF - LIMITED TIME ONLY): bit.ly/2M1sp4B
Subscribe for more videos:
/ @programmingwithmosh
Want to learn more from me? Check out my blog and courses:
programmingwithmosh.com
/ programmingwithmosh
/ moshhamedani

[@yummyjackalmeat]

Thanks I was a little stuck, this video helped it click. A few other videos I checked out weren't really explaining it simple enough. THANKS!

[@KanecoV]

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.

[@randerins]

Simple and intuitive. Great lesson!

[@Agamista379]

great way of teaching, loved it

[@kengthe5949]

it's so useful, thanks for great teaching!

[@eunito9447]

Hi! What would you recommend? Factory method or class factory???

[@elora2334]

Thanks, easy to understand even for non english speaking !

[@sureshmg6786]

Explained very well!!

[@AndWhatNotFreeVideos]

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...?

[@mritunjay7065]

simple explanation, Great !

[@___vijay___]

what do you use?
constructor or factory...

[@kylehofmeister6906]

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.

[@kylehofmeister6906]

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.

[@Butchass6969]

Having a stroke reading this lmao

[@richochet]

Brilliant! Can I ask why you removed the "location" parameter, I thought that would have been needed?

[@joshel4278]

I've seen this video and the next one,I wanna ask is there an actual advantage that each of them have over the other?

[@AcidHouse99]

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();

[@aswink1505]

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]

okay, got you. Thanks so much for the clarification and your tutorial videos.

[@Musikur]

@@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

[@eryntodd]

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?

[@captainjava1]

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!

[@thangaraj4860]

I like the constructor function

[@richochet]

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 🤷‍♀

[@priyamganguly]

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.

[@momoaraki7934]

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

[@MartinPerez-mi1ty]

Function draw is a void so it will return undefined

[@priyamganguly]

​@@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?

[@pipitgusmayanti8342]

​@@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_

[@priyamganguly]

@@pipitgusmayanti8342: Thanks for the explanation. Appreciate your help.

[@joeyng1282]

How do we call the location property? Within it, there are two sub properties (x, y) too.

[@kiiturii]

I got curious about that too then he just removed it o.o

[@MrTubs987]

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})

[@lowercaseguy3578]

Hey, factory function is similar to C programing ..... Ryt

[@ahmadseirafi5726]

great

[@kelvinzhao4960]

isn't the draw function duplicated for each object this way?

[@Neverbeento]

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.

[@havetocheckhavetocheck1761]

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?

[@havetocheckhavetocheck1761]

@@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()}?

[@havetocheckhavetocheck1761]

@@programmingwithmosh hi I think am confused between factory functions and factory pattern ?

[@goer_basics6262]

Previous video in playlist was not about how to create an Objekt and this video I cannot understand because it is abut another Thema 😅

[@jellene4eva]

Seems the same as initiating a class with constructor. Factory as a name always throws me off.

[@this.channel]

How is this different to a regular function?

[@Pirsanth17]

Function ception

[@havetocheckhavetocheck1761]

yep i thought the same.. this explanation is not correct

[@yonzont]

I thought the return would end the statement or function there at the top, isnt that how it was supposed to work ?

[@timtech9361]

Then classes came out in JS and built everything into one super method lmaoo

[@nuttygold5952]

This tutorial could have been 2 minutes long

[@frankhong6313]

Why bother

[@jobelixte]

this comment could have been 7 words shorter

[@brendapapadopoulou7764]

I am lost

[@Ali-lm7uw]

it is just confusing.

[@tyresew.4233]

bORING!

[@charlesmullen8024]

lmao