How to emulate simple classes with plain JavaScript

Updated . Posted . Visible to the public. Deprecated.

Prefer using ES6 classes.

If you want a class-like construct in JavaScript, you can use the module pattern below. The module pattern gives you basic class concepts like a constructor, private state, public methods.

Since the module pattern only uses basic JavaScript, your code will run in any browser. You don't need CoffeeScript or an ES6 transpiler like Babel.

A cosmetic benefit is that the module pattern works without the use of this or prototypes.

Example

Here is an example for a Ruby class that we want to translate into Javascript using the module pattern.

It's a simple class with one private function:

# Ruby
class Dog

  def initialize(name)
    @name = name
    @meters = 0
  end

  def bark
    if hungry?
      puts("#{@name} is hungry")
    else
      puts("#{@name} is a good boy")
    end
  end

  def walk(meters)
    @meters += meters
  end
  
  private
  
  def hungry?
    @meters > 50
  end

end

The class can be used this way:

dog = Dog.new("Sparky")

dog.walk(20)
dog.bark # => "Sparky is a good boy"
dog.walk(40);
dog.bark # => "Sparky is hungry"

Javascript translation

The Ruby class can be translated to Javascript with the module pattern below. Note how the class is replaced by a constructor function newDog, which returns an object that has the object's public methods as properties:

function newDog(name) {

  var meters = 0;

  function bark() {
    if (isHungry()) {
      console.log(name + " is hungry");
    } else {
      console.log(name + " is a good boy");    
    }
  }
  
  function walk(additionalMeters) {
    meters += additionalMeters;
  }
  
  function isHungry() {
    return meters > 50;
  }
  
  return {
    bark: bark,
    walk: walk
  }

}

As function isHungry() is not returned, it remains private and cannot be accessed from the outside.
Here are 2 examples how newDog can be used:

var dog = newDog("Sparky");

dog.walk(20);
dog.bark(); // => "Sparky is a good boy"
dog.walk(40);
dog.bark(); // => "Sparky is hungry"

More complex cases

If you need to cover more complex cases such as inheritance, there are variations of the module pattern Show archive.org snapshot that you can use.

You might also want to consider using ES6 classes or CoffeeScript classes instead.

Judith Roth
Last edit
Henning Koch
Keywords
revealing, module, pattern, cross, browser, es6, babel
License
Source code in this card is licensed under the MIT License.
Posted by Judith Roth to makandra dev (2014-12-15 11:12)