Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tag: 0.5.2
Fetching contributors…

Cannot retrieve contributors at this time

223 lines (148 sloc) 4.922 kB


Mochiscript is a superset of the JavaScript language that adds more Object-Oriented features such as: methods, inheritance, mixins, etc... What this means is that Mochiscript IS Javascript. Mochiscript currently supports Ruby on Rails 3.1 (via asset pipeline) and Node.js.

More on Mochiscript features and syntax here:


In Rails >3.1

In the Gemfile, add this line:

gem 'mochiscript'

In app/assets/javascripts/application.js, add mochiscript

//= require mochiscript

Now, you should be able to create ".ms" files and it'll be included as javascript using the new rails asset pipeline.

An example:

Create a simple mochiscript (app/assets/javascripts/

class Hello {
  function say() {

Now include it in application.js

//= require hello

Now on your page, you should be able to put this code in after your javascript include section:

  var obj = new Hello();

In Node.js

npm install mochiscript


export class Hello {
  function say() {

In main.js:

var Hello = require('./hello');
var obj   = new Hello();

More on Syntax

Mochiscript syntax is a superset of JavaScript's. This means that any JavaScript you write will run just fine in Mochiscript. Mochiscript simply adds extra features that make development life a little easier.

Object Oriented Features


Classes can be created with the "class" keyword. If you wish to have a custom initializer function, just include a method called "initialize".

class Hello {
  var defaultMessage = "Just say hello";

  function initialize(message) {
    this.message = message || this.defaultMessage;

  function say() {

var obj = new Hello("what's up?");


The method "initialize" is the default instance method used to instantiate an object (just like Ruby).

class Foo {
  function initialize(arg1, arg2) {
    this.args = [ arg1, arg2 ];
    console.log("Instance of Foo created!", arg1, arg2);

var foo = new Foo("hello", "world");


class Goodbye extends Hello {
  var defaultMessage = "Goodbye";
  function say() {


module World {
  function world() {

class HelloWorld extends Hello {
  include World;

Private Section

This is a little unorthodox part of Mochiscript which allows you to add a "closed" section that only methods in the scope of the class can access.

class MyClass {
  private {
    var CONSTANT_VAR = "constant";

  function initialize(data) { = data || CONSTANT_VAR;

Accessing "self"

A lot of times, you need access to the "this" object in a callback. The problem is that "this" often points to something else in a different context. The workaround is usually:

class Foo {
  var hello = "hello";
  function setup() {
    var self = this;
    $('.hello').click(#{ alert(self.hello) }); 

In mochiscript, it is no longer necessary to create a "self" variable. Its given to you in all methods:

class Foo {
  var hello = "hello";
  function setup() {
    $('.hello').click(#{ alert(self.hello) });

Syntactic Sugar

Shorthand Functions

There are two ways to use this feature:

var myFunct = #{ console.log($1) }; // prints out first argument (supports up to 3 args)
var myFunct = #(msg){ console.log(msg) };

Shorthand returns

[ 1, 2, 3 ].map(#{ => $1 + 1 });


var array = [ 'hello', 'world' ];
foreach (var word in array) {

// foreach with iterator
foreach (var word:i in array) {
  console.log(i, word);


var message = <<END;
  this is a lot of text

Enumerable Functions (experimental)

var greetings = [ 'hi', 'hello' ];
var mapped    = greetings#map { $1 + " there!" };
var some      = greetings#some { $1 == 'hi' };

Node-specific module exporters

Mochiscript has two helpers for exporting your files:

public class MyClass {


// equivalent to 
// exports.MyClass = MyClass;

Or make it the default export:

export class MyClass {


// equivalent to
// module.exports = MyClass;


  1. Jeff Su
  2. Hong Hao
Jump to Line
Something went wrong with that request. Please try again.