Posted over 4 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.

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:

Copy
# 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:

Copy
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:

Copy
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:

Copy
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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Judith Roth
Last edit:
6 months ago
by Dominik Schöler
Keywords:
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