In JavaScript, a Factory function returns an object that can be reused for making multiple instances of the same object. It can additionally accept arguments permitting you to customize the returned object.
This write-up will discuss factory functions in JavaScript with the help of appropriate examples. So, let’s start!
Factory Function in JavaScript
JavaScript factory functions have the same functionality that a class function or a constructor has; however, these functions do not use the “new” keyword while creating an object instance and return an object comprising the method or values added.
So, if you have complex logic and need to construct several object instances repeatedly, add that logic once in a factory function and then utilize it for creating objects.
Example: How to use Factory functions in JavaScript
First of all, we will create an “employee1” object having two properties: “name” and “designation”:
name: 'Alex',
designation: 'Manager' ,
showInfo() {
return this.name + ' is a ' + this.designation;
}
};
console.log(employee1.showInfo());
We have also added a “showInfo()” method that will output the object properties in a string format.
Check out the output of the showInfo() method for the “employee1” object:
Now, let’s say you want to create another object “employee2” for a different employee. For this purpose, you have to write out the same code while changing the values of properties according to your requirements:
name: 'Stepheny',
designation: 'Video Editor' ,
showInfo() {
return this.name + ' is a ' + this.designation;
}
};
console.log(employee2.showInfo());
You can follow the above-given procedure for creating a few employee objects. But what if you want to create 100 employee objects? In such a case, creating each object separately while writing the same code again and again will consume a lot of time, effort, and can make your code complex to handle.
You can utilize a factory function for assisting you to avoid code duplication. It creates an object without diving into complex classes or using the “new” keyword.
Now, we will create a JavaScript factory function “createEmployee” for creating our employee objects:
return {
name: name,
designation: designation,
showInfo() {
return this.name + ' is a ' + this.designation;}
}
}
The above-given factory function will return an object comprising the property values passed as arguments.
In the next step, we will create three employee objects named as Alex, Smith, and Marie:
let Smith = createEmployee('Smith', 'Video Editor');
let Marie = createEmployee('Marie', 'Content Writer');
After doing so, we will invoke the showInfo() function for each of the employee object:
console.log(Smith.showInfo());
console.log(Marie.showInfo());
Execution of the given JavaScript program signifies that we have successfully created employee object with the help of factory functions:
Memory space problem with Factory functions
In the previous example, when you create an employee object and store it in a variable, that object needs memory space, hence slowing down the code performance. However, you can avoid this problem by removing the “showInfo()” method from the factory function and storing it in another variable.
From our program, we will remove the “showInfo()” method from the createEmployee() factory function and store it in a separate variable named “x”:
return {
name: name,
designation: designation,
}
}
const x = {
showInfo() {
return this.name + ' is a ' + this.designation;}
}
Next, we will create two employee objects, “Alex” and “Smith,” and before invoking the “showInfo()” method for these objects, we will assign the object method “x” to the employee object in the following way:
let Smith = createEmployee('Smith', 'Video Editor');
Alex.showInfo = x.showInfo;
Smith.showInfo = x.showInfo;
console.log(Alex.showInfo());
console.log(Smith.showInfo());
Here is the output we got from executing the above-given program:
However, the provided approach is not scalable if you want to add multiple methods for an employee object because you have to assign them individually. If that’s the case, you should utilize “Object.create()” method in your JavaScript program.
Object.create() method in JavaScript
The Object.create() method in JavaScript creates a new object based on the existing object as the new object prototype.
We can use the Object.create() method in this way:
showInfo() {
return this.name + ' is a ' + this.designation;}
}
function createEmployee(name, designation) {
let employee = Object.create(x);
employee.name = name;
employee.designation = designation;
return employee;
}
Next, we will create our employee objects and then invoke the method of “x” object which is showInfo():
let Smith = createEmployee('Smith', 'Video Editor');
console.log(Alex.showInfo());
console.log(Smith.showInfo());
The output we have seen in the console signifies that our program is working perfectly fine with the Object.create() method implementation.
Conclusion
In JavaScript, a Factory function is a type of function that returns an object and does not require the usage of new keyword. It can be used for initializing an object, similar to a constructor. It is also considered a useful tool that permits you to produce multiple object instances quickly. This write-up discussed Factory functions in JavaScript with the help of appropriate examples.
