Factory Functions | JavaScript & Object Oriented Programming | Part 5

Shadab Ansari

4 years ago

In the Previous Tutorial we learned the following –

Using Object Literal as the object property
Using an existing object as an object property
In ES6, omitting colon and value from the property if the value variable is having the same name as the property
Why you should create methods to update properties?

In this tutorial we’ll learn another method to create objects – Factory Functions.

While creating objects by using Object Literals is awesome, there is one fundamental issue –

What if you are rich enough to own 3 cars?

The Object Literal approach would require us do the following –

var car1 = {
    make: 'Volkswagon',
    model: 'Golf',
    selectedGear: 1,
  
    run: function(){
      console.log(this.make + ' ' + this.model + ' is running... Gear ' + this.selectedGear);
    }
  };

  var car2 = {
    make: 'Honda',
    model: 'City',
    selectedGear: 1,
  
    run: function(){
        console.log(this.make + ' ' + this.model + ' is running... Gear ' + this.selectedGear);
    }
  };

  var car3 = {
    make: 'Ford',
    model: 'Figo',
    selectedGear: 1,
  
    run: function(){
        console.log(this.make + ' ' + this.model + ' is running... Gear ' + this.selectedGear);
    }
  };

Here is a problem…

What if you are the owner of a car factory and want to create 1000s of cars? Will you be creating 1000s of object literals, each having properties and methods?

Don’t you think there should be some way where we once define the structure of an object(properties and methods) and can create as many of them with different data.

Here comes the Factory Function

What is a Factory Function in JavaScript?

A factory function is a normal function in JavaScript with one difference –
It returns an object literal.

Let us take the car example and create a Factory Function for it –

function createCar(make, model){
    return {
        make: make,
        model: model,
      
        run: function(){
          console.log(this.make + ' ' + this.model + ' is running...');
        }
    }
  };

Did you Notice?

The function takes some arguments and constructs an Object Literal using those arguments. It finally returns that Object Literal.

We can further simplify the returned object literal and drop the colon and the value. Remember, in this tutorial we explained we can do that in ES6 if the property name and the variable name of its value is the same .

Go to myjs.js and update the code accordingly –

function createCar(make, model){
    return {
        make,
        model,
      
        run: function(){
          console.log(this.make + ' ' + this.model + ' is running...');
        }
    }
  };

  var car1 = createCar('Volkswagen', 'Golf');
  car1.run();

  var car2 = createCar('Honda', 'City');
  car2.run();

Save the code and go to the browser console. You should see the following message –

Volkswagen Golf is running...
Honda City is running...

Did you Notice?

We accessed the object property make from inside the run() method by using this.make. We did the same with Object Literals, if you remember.

Let’s Complicate

Lets make a complex Factory Function that could resemble real-world scenario.

function createCar(specs){
    return {
        specs,

        cruise: function(speed){
            if(this.specs.topSpeed > speed){
                throw new Error('Cruising speed cannot be greater than the top speed');
            }
          console.log('Cruising at speed ' + speed);
        }
    }
  };

  var golf = createCar({make: 'Volkswagon', model: 'Golf', topSpeed: 200});
  golf.cruise(220);
  golf.cruise(160);

  var city = createCar({make: 'Honda', model: 'City', topSpeed: 220});
  city.cruise(120);

Did you Notice?

The Factory Function like other JavaScript functions can take all types of parameters – primitives or objects. In the above example we passed it an object literal.

Summary

We learned an alternate way to create objects – Factory Functions. We discussed how it was a good approach then using the object literal. Those who are from typical OOP languages background must be thinking –

I know there are no classes in vanilla JavaScript. I wish at least the syntax to create object can be similar to those cooler programming languages like Java, C#, Python etc

In the Next Tutorial, we’ll discuss one more way to create objects. And it is (almost) similar to how we create objects in those not-so-cool languages.

Share this: