5.2 Factory Fonction

In the last video, you learned how to use object literal syntax to create an object. But there's a little problem here. Imagine that you want to create two circle objects, so, I'm going to copy this code here, and call this second circle object circle 2. Now, the problem we have here is that we duplicated the implementation of the draw method, so right now it's a simple method with one line of code, but if we had 10 lines of code here. You wouldn't want to repeat all these lines here, because if you bug in this method, we'll have to fix it in multiple places. And also consider that our circle object currently has only one method. What if we had 10 other methods here? We don't want to duplicate or repeat all this logic, ? So if our objects have logic, we need a different way to create objects. That's when we use factory functions or constructor functions. In this video, you're going to learn more about factory functions and then we'll look at constructor functions. So I'm going to take that second circle out and show you how to create a factory function. So the factory function, just like a factory producing products, these functions produce objects. So we define a function that we'll call create circle. Now we're going to move this definition of the circle object inside our factory functions so that you have a circle object here, and then we have to return it. We can return it this way, but we don't really need this circle constant to be defined because we're not going to reference it anywhere, we just want to return it. So we can shorten this code by removing the circle constant and just returning that object. So every time we call the createercircle function, we get a circle object. However, we have hard-coded these values here, so every circle created by this function, its radius will be equal to 1 . This is not what we want, we want to have a circle with a larger radius. So we want to pass the radius as a parameter here. So, radius, then instead of hard-coding 1 , we want to define the value of this radius argument that we provide when we call this function. Similarly, we can add another parameter here as location, and instead of hard-coding this object here, we simply set location to this location argument. However, for simplicity, I'm going to remove these two properties. Location and visible, so we can focus on the core factory functions. So let's remove those properties, we don't need the location parameter either. Now we can shorten this code. So in modern JavaScript, if our key and the value are the same, we can shorten our code by deleting a value and just adding the key. So that's exactly the equivalent of this code. And then we have our draw method, there's also a shorter syntax for defining this method, so instead of defining it as a pair of key values, we can define it like this. So we're doing a draw in parentheses and a block of code. This is similar to how we defined a function outside of an object, So if you want to define a function, this is how we define it. So we have the function keyword, then the function name, the parentheses and the code block. Now when we put this inside an object, we remove the function keyword and just add that inside the object. You can see that this syntax is a little bit shorter than it is here. So we're going to delete this. And move this console. log into our draw method. So now we have a factory function, we can just call it to create a circle object. So I'm going to define this constant circle1, and call the creercercle function, and then we pass the value 1 as the radius. Now, let's register this circle object on the console. So that you can see that the radius is set to 1, we also have this draw method, so we can call circle1 dot draw and here's our draw message on the console.Now, the advantage of this Factory function is that you have defined the logic in one place. So we can call this function with different values or different arguments, we get different circle objects but we have defined the draw method only in 1 place. So if there is a bug in this method that we need to fix in the future, there is only one place that we need to change. So I'm going to create another circle object, circle2, so same thing creercercle I'm going to pass 2 as the radius, let's log this to the console. Consle.log('Circle2') we log, and look, we have 2 different circle objects and only one draw method definition. So these are just factory functions. But these functions are not the only way to create objects, we can also use constructor functions, and that's what you'll learn in the next video.