192

Can someone clarify the difference between a constructor function and a factory function in Javascript.

When to use one instead of the other?

0

8 Answers 8

190

The basic difference is that a constructor function is used with the new keyword (which causes JavaScript to automatically create a new object, set this within the function to that object, and return the object):

var objFromConstructor = new ConstructorFunction();

A factory function is called like a "regular" function:

var objFromFactory = factoryFunction();

But for it to be considered a "factory" it would need to return a new instance of some object: you wouldn't call it a "factory" function if it just returned a boolean or something. This does not happen automatically like with new, but it does allow more flexibility for some cases.

In a really simple example the functions referenced above might look something like this:

function ConstructorFunction() {
   this.someProp1 = "1";
   this.someProp2 = "2";
}
ConstructorFunction.prototype.someMethod = function() { /* whatever */ };

function factoryFunction() {
   var obj = {
      someProp1 : "1",
      someProp2 : "2",
      someMethod: function() { /* whatever */ }
   };
   // other code to manipulate obj in some way here
   return obj;
}

Of course you can make factory functions much more complicated than that simple example.

One advantage to factory functions is when the object to be returned could be of several different types depending on some parameter.

18
  • 19
    "(EDIT: and this can be a problem because without new the function will still run but not as expected)." This is only a problem if you try to call a factory function with "new" or you try to use the "this" keyword to assign to the instance. Otherwise, you simply create a new, arbitrary object, and return it. No problems, just a different, more flexible way to do things, with less boilerplate, and without leaking instantiation details into the API. Jan 5, 2013 at 14:10
  • 11
    I wanted to point out that the examples for both the cases (constructor function vs factory function) should be consistent. The example for the factory function doesn't include someMethod for the objects returned by the factory, and that's where it gets a bit foggy. Inside the factory function, if one just does var obj = { ... , someMethod: function() {}, ... }, that would lead to each object returned hold a different copy of someMethod which is something that we might not want. That is where using new and prototype inside the factory function would help. Mar 5, 2014 at 22:16
  • 4
    As you already mentioned that some people try to use factory functions just because they don't intend to leave bugs where people forget to use new with the constructor function; I thought it's where one might need to see a how to replace constructors with factory functions example and that's where I thought the consistency in the examples was required. Anyway, the answer is informative enough. This was just a point I wanted to raise, not that I'm pulling down on the quality of the answer in any way. Mar 15, 2014 at 10:14
  • 4
    For me the greatest advantage of Factory functions is that you get better encapsulation and data hiding which may be useful in some applications. If there is no problem in making every instance property and methods public and easily modifiable by users then I guess the Constructor function is more appropriate unless you dislike the "new" keyword like some people do.
    – devius
    Sep 29, 2014 at 11:36
  • 2
    @Federico - factory methods don't have to return just a plain object. They can use new internally, or use Object.create() to create an object with a specific prototype.
    – nnnnnn
    Jun 18, 2015 at 0:55
140

Benefits of using constructors

  • Most books teach you to use constructors and new

  • this refers to the new object

  • Some people like the way var myFoo = new Foo(); reads.

Drawbacks

  • Details of instantiation get leaked into the calling API (via the new requirement), so all callers are tightly coupled to the constructor implementation. If you ever need the additional flexibility of the factory, you'll have to refactor all callers (admittedly the exceptional case, rather than the rule).

  • Forgetting new is such a common bug, you should strongly consider adding a boilerplate check to ensure that the constructor is called correctly ( if (!(this instanceof Foo)) { return new Foo() } ). EDIT: Since ES6 (ES2015) you can't forget new with a class constructor, or the constructor will throw an error.

  • If you do the instanceof check, it leaves ambiguity as to whether or not new is required. In my opinion, it shouldn't be. You've effectively short circuited the new requirement, which means you could erase drawback #1. But then you've just got a factory function in all but name, with additional boilerplate, a capital letter, and less flexible this context.

Constructors break the Open / Closed Principle

But my main concern is that it violates the open/closed principle. You start out exporting a constructor, users start using the constructor, then down the road you realize you need the flexibility of a factory, instead (for instance, to switch the implementation to use object pools, or to instantiate across execution contexts, or to have more inheritance flexibility using prototypal OO).

You're stuck, though. You can't make the change without breaking all the code that calls your constructor with new. You can't switch to using object pools for performance gains, for instance.

Also, using constructors gives you a deceptive instanceof that doesn't work across execution contexts, and doesn't work if your constructor prototype gets swapped out. It will also fail if you start out returning this from your constructor, and then switch to exporting an arbitrary object, which you'd have to do to enable factory-like behavior in your constructor.

Benefits of using factories

  • Less code - no boilerplate required.

  • You can return any arbitrary object, and use any arbitrary prototype - giving you more flexibility to create various types of objects which implement the same API. For example, a media player that can create instances of both HTML5 and flash players, or an event library which can emit DOM events or web socket events. Factories can also instantiate objects across execution contexts, take advantage of object pools, and allow for more flexible prototypal inheritance models.

  • You'd never have a need to convert from a factory to a constructor, so refactoring will never be an issue.

  • No ambiguity about using new. Don't. (It will make this behave badly, see next point).

  • this behaves as it normally would - so you can use it to access the parent object (for example, inside player.create(), this refers to player, just like any other method invocation would. call and apply also reassign this, as expected. If you store prototypes on the parent object, that can be a great way to dynamically swap out functionality, and enable very flexible polymorphism for your object instantiation.

  • No ambiguity about whether or not to capitalize. Don't. Lint tools will complain, and then you'll be tempted to try to use new, and then you'll undo the benefit described above.

  • Some people like the way var myFoo = foo(); or var myFoo = foo.create(); reads.

Drawbacks

  • new doesn't behave as expected (see above). Solution: don't use it.

  • this doesn't refer to the new object (instead, if the constructor is invoked with dot notation or square bracket notation, e.g. foo.bar() - this refers to foo - just like every other JavaScript method -- see benefits).

18
  • 2
    In what sense do you mean that constructors make the callers tightly coupled to their implementation? As far the constructor arguments are concerned, those will need to be passed even to the factory function for it to use them and invoke the appropriate constructor within. Mar 5, 2014 at 15:00
  • 4
    Regarding the violation of Open/Closed: isn't this all about dependency injection? If A needs B, wether A calls new B() or A call BFactory.create(), both of them introduce coupling. If on the other hand you give A an instance of B in the composition root, A doesn't need to know anything at all about how B is instantiated. I feel both constructors and factories have their uses; constructors are for simple instantiation, factories for more complex instantiation. But in both cases, injecting your dependencies is wise. Mar 18, 2014 at 10:51
  • 1
    DI is good for injecting state: configuration, domain objects, and so on. It's overkill for everything else. Mar 18, 2014 at 17:14
  • 1
    The fuss is that requiring new violates the open / closed principle. See medium.com/javascript-scene/… for a much bigger discussion than these comments allow. Nov 8, 2014 at 2:05
  • 3
    Because any function can return a new object in JavaScript, and quite a lot of them do so without the new keyword, I don't believe that the new keyword actually does provide any additional readability. IMO, it seems silly to jump through hoops in order to enable callers to type more. Aug 27, 2016 at 23:15
40

A constructor returns an instance of the class you call it on. A factory function can return anything. You would use a factory function when you need to return arbitrary values or when a class has a large setup process.

0
14

A Constructor function example

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");
  • new creates an object prototyped on User.prototype and calls User with the created object as its this value.

  • new treats an argument expression for its operand as optional:

         let user = new User;
    

    would cause new to call User with no arguments.

  • new returns the object it created, unless the constructor returns an object value, which is returned instead. This is an edge case which for the most part can be ignored.

Pros and Cons

Objects created by constructor functions inherit properties from the constructor's prototype property, and return true using the instanceOf operator on the constructor function.

The above behaviors can fail if you dynamically change the value of the constructor's prototype property after having already used the constructor. Doing so is rare, and it can't be changed if the constructor were created using the class keyword.

Constructor functions can be extended using the extends keyword.

Constructor functions can't return null as an error value. Since it's not an object data type, it is ignored by new.

A Factory function example

function User(name, age) {
  return {
    name,
    age,
  }
};

let user = User("Tom", 23);

Here the factory function is called without new. The function is entirely responsible for the direct or indirect use if its arguments and the type of object it returns. In this example it returns a simple [Object object] with some properties set from arguments.

Pros and Cons

Easily hides the implementation complexities of object creation from the caller. This is particularly useful for native code functions in a browser.

The factory function need not always return objects of the same type, and could even return null as an error indicator.

In simple cases, factory functions can be simple in structure and meaning.

Objects returned do not generally inherit from the factory function's prototype property, and return false from instanceOf factoryFunction.

The factory function can't be safely extended using the extends keyword because extended objects would inherit from the factory functions prototype property instead of from the prototype property of the constructor used by the factory function.

2
  • 1
    This is a late answer posted in response to this question on the same subject,
    – traktor
    Dec 26, 2018 at 5:15
  • 1
    not just "null" but the "new" will also ignore any premitive datatype returned by the contructor function.
    – Vishal
    Jun 3, 2020 at 11:51
3

Factories are "always" better. When using object orientated languages then

  1. decide on the contract (the methods and what they will do)
  2. Create interfaces that expose those methods (in javascript you don't have interfaces so you need to come up with some way of checking the implementation)
  3. Create a factory that returns an implementation of each interface required.

The implementations (the actual objects created with new) are not exposed to the factory user/consumer. This means that the factory developer can expand and create new implementations as long as he/she doesn't break the contract...and it allows for the factory consumer to just benefit from the new API without having to change their code...if they used new and a "new" implementation comes along then they have to go and change every line which uses "new" to use the "new" implementation...with the factory their code doesn't change...

Factories - better than all anything else - the spring framework is completely built around this idea.

1
  • How does factory solve this problem of having to change every line? Jun 15, 2020 at 6:33
1

Factories are a layer of abstraction, and like all abstractions they have a.cost in complexity. When encountering a factory based API figuring out what the factory is for a given API can be challenging for the API consumer. With constructors discoverability is trivial.

When deciding between ctors and factories you need to decide if the complexity is justified by the benefit.

Worth noting that Javascript constructors can be arbitrary factories by returning something other than this or undefined. So in js you can get the best of both worlds - discoverable API and object pooling/caching.

1
  • 6
    In JavaScript, the cost of using constructors is higher than the cost of using factories because any function in JS can return a new object. Constructors add complexity by: Requiring new, Altering behavior of this, Altering return value, Connecting a prototype ref, Enabling instanceof (which lies and should not be used for this purpose). Ostensibly, all of those are "features". In practice, they hurt your code quality. Jun 17, 2015 at 19:49
1
  • I think the factory function is superior to the constructor function. Using new with the constructor function, we are binding our code to one specific way of creating an object, while with a factory, we are free so we can create more different instances without binding ourselves. Let's say we have this class:

    const file = new CreateFile(name)

If we want to refactor CreateFile class, creating subclasses for the file format our server supports, we can write an elegan factory function:

function CreateFile(name) {
  if (name.match(/\.pdf$/)) {
    return new FilePdf(name);
  } else if (name.match(/\.txt$/)) {
    return new FileTxt(name);
  } else if (name.match(/\.md$/)) {
    return new FileMd(name);
  } else {
    throw new Error("Not supprted file type");
  }
}
  • with factory functions, we can implement private variables, hide the information from the users which is called encapsulation.

    function createPerson(name) {
      const privateInfo = {};
      // we create person object
      const person = {
        setName(name) {
          if (!name) {
            throw new Error("A person must have a name");
          }
         privateInfo.name = name;
        },
         getName() {
           return privateInfo.name;
        },
     };
       person.setName(name);
       return person;
    }
    
0

For the differences, Eric Elliott clarified very well,

But for the second question:

When to use one instead of the other?

If you are coming from the object-oriented background, Constructor function looks more natural to you. this way you shouldn't forget to use new keyword.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.