JavaScript Factory Functions

Summary: in this tutorial, you will learn about the JavaScript factory functions which are functions that return objects.

Introduction to the factory functions in JavaScript

A factory function is a function that returns a new object. The following creates a person object named john:

let john = { firstName: 'John', lastName: 'Doe', getFullName() { return this.firstName + ' ' + this.lastName; } }; console.log(john.getFullName());
Code language: JavaScript (javascript)

Output:

John Doe

The john object has two properties: firstName and lastName, and one method getFullName() that returns the full name.

Suppose that you need to create another similar object called jane, you can duplicate the code as follows:

let jane = { firstName: 'Jane', lastName: 'Doe', getFullName() { return this.firstName + ' ' + this.lastName; } }; console.log(jane.getFullName());
Code language: JavaScript (javascript)

Output:

Jane Doe

The jane object has the same properties and method as the john object.

The more object you want to create, the more duplicate code you need to copy.

To avoid copying the same code all over again and again, you can develop a function that creates the person object:

function createPerson(firstName, lastName) { return { firstName: firstName, lastName: lastName, getFullName() { return firstName + ' ' + lastName; } } }
Code language: JavaScript (javascript)

When a function creates an object, it is called a factory function. The createPerson() is a factory function because it returns a new person object.

The following code uses the createPerson() factory function to create two objects john and jane:

let john = createPerson('John', 'Doe'), jane = createPerson('Jane', 'Doe'); console.log(john.getFullName()); console.log(jane.getFullName());
Code language: JavaScript (javascript)

With the factory function, you create any number of the person objects you want without duplicating code.

When you create an object, that object requires a space in the memory. If you have a thousand person objects, you need one thousand spaces in the memory to store these objects. These person objects, however, have the same getFullName() method.

To avoid repeating the same getFullName() function in the memory, you can remove the getFullName() method from the person object:

function createPerson(firstName, lastName) { return { firstName: firstName, lastName: lastName } }
Code language: JavaScript (javascript)

And move this method to another object:

const behavior = { getFullName() { return this.firstName + ' ' + this.lastName; } }
Code language: JavaScript (javascript)

And before calling the getFullName() method on the person object, you can assign the method of the behavior object to the person object as follows:

let john = createPerson('John', 'Doe'), jane = createPerson('Jane', 'Doe'); john.getFullName = behavior.getFullName; jane.getFullName = behavior.getFullName; console.log(john.getFullName()); console.log(jane.getFullName());
Code language: JavaScript (javascript)

It’ll more difficult if you have many methods and have to assign them manually.

This is why the Object.create() method comes into play.

The Object.create() method

The Object.create() method creates a new object using an existing object as the prototype of the new object:

Object.create(proto, [propertiesObject])
Code language: CSS (css)

So you can use the Object.create() as follows:

const behavior = { getFullName() { return this.firstName + ' ' + this.lastName; } } function createPerson(firstName, lastName) { let person = Object.create(behavior); person.firstName = firstName; person.lastName = lastName; return person; }
Code language: JavaScript (javascript)

Now, you can create person objects and call the methods of the behavior object:

let john = createPerson('John', 'Doe'), jane = createPerson('Jane', 'Doe'); console.log(john.getFullName()); console.log(jane.getFullName());
Code language: JavaScript (javascript)

The code works perfectly fine. However, in practice, you will rarely see the factory functions. Instead, you will see the function constructors or the classes.

Summary

  • A factory function is a function that returns a new object.
  • Use Object.create() to create an object using an existing object as a prototype.
Was this tutorial helpful ?