Where factory pattern is used in JavaScript?
Tags: javascript, webdev, programming, react
Published: 2022-02-07 18:04:55

JavaScript is a multi-paradigm programming language, so it provides us with a lot of different ways to deal with the same problem.

## 👉 What problem does factory pattern solve?

Factory pattern is used as a substitute for using classes.

For example, we want to create a couple of software developers who prefer different programming languages. 
We can implement this behavior using class.

```js
class SoftwareDeveloper {
    constructor(language) {
        this.language = language || 'C';
    }

    writeMessageInChat() {
        console.log(`My favorite programming language is ${this.language}!`);
    }
}

const Brendan = new SoftwareDeveloper('JavaScript');
const Guido = new SoftwareDeveloper('Python');
const Dennis = new SoftwareDeveloper();

Brendan.writeMessageInChat(); // My favorite programming language is JavaScript!

Guido.writeMessageInChat(); // My favorite programming language is Python!

Dennis.writeMessageInChat(); // My favorite programming language is C!
```

## 👉 What is a factory pattern?

Factory pattern uses factory functions to create objects instead of a class. 
Simply put, a factory is just a function, that returns an object.

So, let's re-implement the exact same behavior using a factory function.

```js
const SoftwareDeveloper = (language) => {
  const lang = language || 'C';

  return ({
    writeMessageInChat: () => {
        console.log(`My favorite programming language is ${lang}!`);
    }
  })
}

const Brendan = SoftwareDeveloper('JavaScript');
const Guido = SoftwareDeveloper('Python');
const Dennis = SoftwareDeveloper();

Brendan.writeMessageInChat(); // My favorite programming language is JavaScript!

Guido.writeMessageInChat(); // My favorite programming language is Python!

Dennis.writeMessageInChat(); // My favorite programming language is C!
```

## 👉 How to use it like a top-performer?

The factory pattern is very useful when you need to create a lot of objects, where some of the properties are the same.

That's exactly what React developers do in the `createFactory` function.

```js
/**
 * Return a function that produces ReactElements of a given type.
 * See https://reactjs.org/docs/react-api.html#createfactory
 */
export function createFactory(type) {
  const factory = createElement.bind(null, type);
  
  factory.type = type;
  return factory;
}

// Example
import React from 'react';

const div = React.createFactory('div');

div(null, 'First div');
div(null, 'Second div');
div(null, 'Third div');
```

## 👉 Why is it legacy?

React v0.11 created a factory internally to deal with encapsulated components.
But this model was eventually considered conceptually wrong.

So the `createFactory` function was introduced in React v0.12 to fix this issue.

```js
// You write this
var Item = React.createClass(...)
                             
                               
// React v0.11 does this internally
class ItemClass {
}

function ItemFactory(...args) {
  return React.createElement(ItemClass, ...args);
}

module.exports = ItemFactory;


// And you use it straight away
var Item = require('Item');

class App {
  render() {
    return Item({ text: 'Hello world!'});
  }
}

// Or with JSX
var Item = require('Item');

class App {
  render() {
    return <Item text="Hello world!" />;
  }
}
```

## 👉 React v0.12

The `createFactory` function was a way to create components without creating an extra factory internally.

Simply put, React devs move the `createFactory` from inside `React.createClass` to the consuming module.

```js
// You write this
var Item = React.createClass(...)

                               
// React v0.12 do this internally
class Item {
}

module.exports = Item;


// But you need to call createFactory yourself
var Button = React.createFactory(require('Item'));

class App {
  render() {
    return Item({ text: 'Hello world!'});
  }
}

// Or just let JSX do its job
var Item = require('Item');

class App {
  render() {
    return <Item text="Hello world!" />;
  }
}
```

In the current state, React doesn't need the `createFactory` function, because it deals with components without an extra factory.

---

P.S. [Follow me on Twitter](https://twitter.com/fromaline) for more content like this!

{% twitter 1489321615313805323 %}