The Factory Function is associated with constructor functions or class methods. Nevertheless, it generates and returns an object without necessitating the use of the new keyword.
In JavaScript, Factory Functions serve the same purpose as constructor functions. However, they do not necessitate the use of the 'this' keyword for internal values, nor do they require the 'new' keyword when creating new instances of objects. Factory Functions can possess internal values, accept arguments, and more, just like standard functions. In contrast to regular functions, Factory Functions yield an object that may contain various values, methods, and other elements.
When we require the creation of multiple objects that share identical logic, we can encapsulate that logic within a function, effectively employing it as a factory. This concept resembles a real-world factory that manufactures products.
Syntax
The factory syntax provided below is utilized to return multiple data values through the use of a function.
<script>
function factoryFunctionName(data) {
return data;
}
</script>
- In this context, the information is adaptable to retrieve input values utilizing a factory function, which subsequently returns the data associated with the factory variable.
Examples
The subsequent examples provide insight into factory functions and demonstrate how to utilize them in JavaScript.
Example1
The subsequent example of a factory function illustrates how to present multiple pieces of data through the function. This data is output to the console utilizing the console.log function.
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To Example Website
</h1>
<script>
//function making new objects with a factory function
function createsObjects(sname) {
return {
sname: sname,
swork: function () {
console.log('New Student is Created with name: ' + sname);
}
};
}
//Creating the first value with a factory function
const student1 = createsObjects('Example');
student1.swork();
// Create a second value with the same function
const student2 = createsObjects('tutorialsandexample');
student2.swork();
</script>
</body>
</html>
Output:
The visual representation illustrates various datasets being utilized through a singular function.
Example2
The subsequent example of a factory function serves the purpose of illustrating a mathematical operation along with its corresponding result.
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<script>
//function making new objects with a factory function
function createsObjects(value) {
return {
value: value,
swork: function () {
console.log('Get value: ' + value*value);
}
};
}
//Creating a first value with a factory function
const operate1 = createsObjects(3);
operate1.swork();
// Create a second value with the same function
const operate2 = createsObjects(4);
operate2.swork();
</script>
</body>
</html>
Output:
The illustration displays various datasets being represented through a singular function.
Example3
The subsequent example of a factory function illustrates how to present various data points utilizing the function. The output is displayed in the console through the use of the console.log method. In this instance, we employ "var" for variable declaration.
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To Example Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
var Student = function (name, age, mark) {
// creating student object
var student = {};
// parameters as keys to this object
student.name = name;
student.age = age;
student.mark = mark;
//function to student greeting function
student.greeting = function () {
return (
'Hello Student name: ' + student.name
+ '. student age: ' + student.age
+ ' . student marks ' + student.age+ '.'
);
};
return student;
};
var student1 = Student('Radhika', 15, 80);
console.log(student1.greeting());
var student2 = Student('Sam', 12, 90);
console.log(student2.greeting());
var student3 = Student('Anand', 16, 70);
console.log(student3.greeting());
</script>
</body>
</html>
Output
The illustration displays various data points generated through a single function.
Example4
The subsequent example of a factory function illustrates how to present multiple pieces of data through the function. The information is output to the console utilizing the console.log method. In this case, we can incorporate the fullname property with a distinct object within the factory function.
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To Example Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
function createEmp(firstemp, lastemp) {
return {
firstemp: firstemp,
lastemp: lastemp,
empFullName() {
return 'Full Name:' +firstemp + ' ' + lastemp;
},
};
}
let emp1 = createEmp('Sadhana', 'Jog');
let emp2 = createEmp('Samir', 'Radhe');
console.log(emp1.empFullName());
console.log(emp2.empFullName());
</script>
</body>
</html>
Output
The illustration displays various datasets being utilized through a single function.
Example5
The subsequent example of a factory function illustrates the ability to showcase various nested function operations within a single function. In this context, we can define two methods: division and multiplication, within the factory function. By supplying a single value to all functions, JavaScript can perform both multiplication and division using the value provided to the factory function.
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible"/>
<title> Javascript Factory Function </title>
</head>
<body>
<h1 style = "color: blue;">
Welcome To Example Website
</h1>
<h3> Javascript Factory Function </h3>
<script>
// Factory Function creating student data
function createOperate(firstemp, lastemp) {
return {
firstemp: firstemp,
lastemp: lastemp,
divisiOn() {
return 'Division:' +firstemp / lastemp;
},
mulTiplicTion() {
return 'Multiplication:' +firstemp * lastemp;
},
};
}
let valf1 = createOperate('8', '5');
let valf2 = createOperate(12, 8);
console.log(valf1.divisiOn());
console.log(valf2.divisiOn());
console.log(valf1.mulTiplicTion());
console.log(valf2.mulTiplicTion());
</script>
</body>
</html>
Output
The illustration displays a variety of data represented through a unified function.
Conclusion
In JavaScript, the factory function serves the purpose of producing multiple values through a single callable function. It is employed to present data in accordance with specific needs.