What are JavaScript Factory Functions?

JavascriptWeb DevelopmentFront End Technology

A factory function can be defined as a function that creates an object and returns it. It is similar to constructor functions/class functions.

The factory function is a very useful tool in JavaScript since it returns the object of any class directly. We can also populate some fixed static values in these factory functions.

These functions do not require the use of the ‘this’ keyword for inner values. Also, they do not need the ‘newnew’ keyword when initiating new objects.

Factory functions can contain inner values, methods, and many more. They are just like normal functions but with a specific target i.e. to create objects. The only difference between a factory function and a normal function is that it returns an object with the assigned values.

Using the Factory Functions

Factory functions are mainly used when the user wants to initialize the object of a class multiple times with some assigned value or static values. It makes the process easy since we just have to call this function and retrieve the new object created.

Example 1

In the below example, we have created a factory function that will return a new object whenever this function is called.

# index.html

<!DOCTYPE html>
<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" content="ie=edge" />
   <title>Factory Function</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      // Function creating new objects
      // without use of 'new' keyword
      function createEmployeeObjects(name) {
         return {
            name: name,
            work: function () {
               console.log('New Employee Created with name: ' + name);
            }
         };
      }
      //Creating an Employee with factory function
      const emp1 = createEmployeeObjects('Steve Jobs');
      emp1.work();
      
      // Create a robot with name Chitti 2.O Upgraded
      const emp2 = createEmployeeObjects('Bill Gates');
      emp2.work();
   </script>
</body>
</html>

Output

The output can be seen in the Console.

New Employee Created with name: Steve Jobs
New Employee Created with name: Bill Gates

Example 2

# index.html

<!DOCTYPE html>
<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" content="ie=edge" />
   <title>Factory Function</title>
</head>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <script>
      // Factory Function creating student object
      var Student = function (rollNo, name, age) {
         // creating Student object
         var student = {};
         // parameters as keys to this object
         student.rollNo = rollNo
         student.name = name;
         student.age = age;
         // function to greet
         student.greeting = function () {
            return (
               'Hello I am ' + student.name +
               ' My roll no is ' + student.rollNo + '. I am ' + student.age + ' years old. '
            );
         };
         return student;
      };
      var student1 = Student(1, 'Mark', 16);
      console.log(student1.greeting());
      var student2 = Student(21, 'Bill', 13);
      console.log(student2.greeting());
   </script>
</body>
</html>

Output

The output can be seen in the console on the successful execution of the above program.

Hello I am Mark My roll no is 1. I am 16 years old.
Hello I am Bill My roll no is 21. I am 13 years old.
raja
Updated on 28-Apr-2022 13:14:57

Advertisements