Back to: JavaScript Tutorial For Beginners and Professionals
Creating JavaScript Object Using Factory Pattern
In this article, I am going to discuss Creating JavaScript Object Using Factory Pattern with Examples. Please read our previous article where we discussed Creating JavaScript Object Using Object.create() Method. At the end of this article, you will understand How to Create JavaScript Objects Using Factory Pattern.
How to Create JavaScript Object Using Factory Pattern?
There are many ways to create an object that we have seen so far out of that there are other ways we can create an object that is from the Object Creation pattern of JavaScript (Factory pattern, Constructor pattern, and Prototype pattern, etc.) among the patterns there is factory pattern is there which is a type of object-oriented pattern. As the name implies the instances of objects are created by using the factory function to create the required object.
In JavaScript, a new object gets created whenever we called the constructor with a new operator. The factory function pattern is the same as constructors only the difference is that instead of using the new operator to create an object, the factory function is a function that creates an object and returns them when we call the function.
The factory pattern uses a function to hide the process of creating specific objects and returning their reference. It returns a new instance whenever the factory function is called.
Where to use Factory Pattern?
- The factory function is used in cases where the type of object is decided at run time.
- It is used in an application that manages, maintains, and modifies the collection of objects that are different but have methods and properties in common.
- It could be a collection of documents with a combination of XML documents, pdf documents.
- It could be also generating different invoices of purchase orders depending upon the product categories.
Advantage of Creating JavaScript Object using Factory Pattern:
It provides reusability and main. The same factory function can be used to generate a similar type of object and it also allows us to add/remove new object functions seamlessly without changing a lot of code.
Example: Object creation in JavaScript by Using Factory Pattern
In the below example, we have created the factory method creatFlower for creating different types of flowers object and returning their reference in turn. Also, we have created two different objects for it named as flowerOne and flowerTwo for calling the factory method creatFlower and when we are passing the flower name such as Rose for flowerOne and Lily for flowerTwo objects it returns new instances of flowers whenever called.
<html>
<head>
<title>Object's creation in JavaScript, by Using Factory Pattern example</title>
</head>
<body>
<script>
//Factory function syntax
function creatFlower(name) {
const obj = new Object();
obj.name = name;
obj.showFlowerName = function () {
//console.log(`I'm ${obj.name}`);
return "I'm " + obj.name;
}
return obj;
}
const flowerOne = creatFlower('Rose');
const flowerTwo = creatFlower('Lily');
console.log("Using Factory pattern method - flowerOne: ", flowerOne) //returns objects own defined properties and methods
console.log("Using Factory pattern method - flowerOne function length: ", Object.getOwnPropertyNames(flowerOne).length)
console.log("flowerOne Using Factory pattern method type? : ", typeof flowerOne);// object
console.log("Using Factory pattern method - flowerTwo: ", flowerTwo) //returns objects own defined properties and methods
console.log("Using Factory pattern method - flowerTwo function length: ", Object.getOwnPropertyNames(flowerTwo).length)
console.log("flowerOne Using Factory pattern method type? : ", typeof flowerTwo);// object
console.log("Using Factory pattern - Object creation of flowerOne: " + flowerOne.showFlowerName());
console.log("Using Factory pattern - Object creation of flowerTwo: " + flowerTwo.showFlowerName());
</script>
</body>
</html>
Now run the above code and then open the browser developer tool by pressing the F12 key and select the Console tab and you should see the following logs in the Console tab.
In the next article, I am going to discuss Creating JavaScript objects using Prototype Pattern with Examples. Here, in this article, I try to explain Creating JavaScript Object Using Factory Pattern with an Example and I hope you enjoy this How to Create JavaScript Object Using Factory Pattern article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.