Posted over 5 years ago. Visible to the public. Repeats.

How to emulate simple classes with plain JavaScript

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.


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 ="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 that you can use.

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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Judith Roth
Last edit:
over 1 year ago
by Dominik Schöler
module, pattern, cross, browser, es6, babel
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Judith Roth to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more