Four Flavours of Object Oriented Programming

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Four Flavours of Object Oriented Programming

There are four ways to create a blueprint for Object Oriented Programming:

  1. Constructor Syntax
  2. Classes Syntax
  3. OLOO
  4. Factory Functions

Constructor Syntax

You learned the Constructor syntax in the previous lesson.

Let’s say you want to create a Human that contains a firstName and lastName. Here’s what you can write:

// Creating a Constructor
function Human (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

You can then create an instance with the new keyword.

// Initiating an instance
const zell = new Human('Zell', 'Liew')
Instance from a Constructor.

Class Syntax

We can create a class with the class keyword. Like constructors, we begin the class with a capital letter.

It looks like this:

class ClassName {
  constructor() {
    // Code to initialize instances
  }
}

Everything that goes into a Constructor function would go into a class’s constructor method.

If you want to create a Human class with a firstName and lastName property, you’ll write it like this:

// Creating a Class
class Human {
  constructor (firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

You can then create an instance with the new keyword.

// Initializing an instance
const zell = new Human('Zell', 'Liew')
Class instance.

Constructors vs Classes

Constructor and Class are the same thing. Behind the scenes, JavaScript converts Classes into Constructors. That’s why people say classes are syntactic sugars.

Even though Constructors look easier to use now (since there’s less code), Classes become easier to use when Inheritance comes into play. (More on inheritance later).

OLOO Syntax

OLOO is an acronym for Objects Linking to Other Objects. This acronym is coined and made popular by Kyle Simpson.

The OLOO Syntax uses a JavaScript object as the blueprint. The most basic form of an OLOO syntax is an empty object:

const OLOO = {
  // ...
}

You need a method inside the blueprint to initialise instances. This method is often called init. But it can also be called constructor, start, or whatever you want.

In init, you would write the same code as if you were writing the Constructor syntax.

// Creating an OLOO blueprint
const Human = {
  init (firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

You create an instance with Object.create. This instance must then be initialized with the init function.

const zell = Object.create(Human)
zell.init('Zell', 'Liew')
Instance created with OLOO.

If you return this inside init, you can chain Object.create with the init method.

const Human = {
  init (firstName, lastName) {
    // ...
    return this
  }
}

const zell = Object.create(Human).init('Zell', 'Liew')

Factory Functions

A Factory Function is a function that

  1. Returns an object.
  2. The returned object doesn’t need the new keyword

The simplest factory function looks like this:

// Factory that returns an empty object
function Factory() {
  return {}
}

We can create the same Human blueprint by writing this:

// Creating a Factory
function Human (firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName
  }
}

You run the Factory Function to initialise the instance. (You don’t need new. You don’t need to call init either).

const zell = Human('Zell', 'Liew')
Factory Instance

Which flavour to use?

It’s still too early to decide which flavour you should use. Go through the rest of the module and you’ll arrive at an answer.