JavaScript Tips: Module Pattern

Coming from the Java background, my main problem with JavaScript is encapsulation: global space is not good. I love OO because object is the best place to encapsulate the data. Here are the patterns I would like to follow always.

In the JavaScript, function can be used as :

• function
• method
• constructors
• classes
• Module

As a first example, will start with the Module.

Module Pattern

In this pattern, you can define number of privilege method which have access to the secret information such as private variables and methods . For example, setFirstName method can set the name local variable as well as the function getUserFullName has access to the private method getFullName as shown int he following code:

var person = (function (firstName, lastName, age){
  //properties
  var a = age;
  var fname = firstName;
  var lname = lastName;

  //common functions
  function getFullName(f,l){
    return fname+" "+lname;
  }

  return { //open to outside
    getFirstName: function() {return fname},
    getLastName: function(){return lname},
    getAge: function(){return age;},
    getUserFullName: function(){ return getFullName();},
    setFirstName: function(f){fname = f;},
    setLastName: function(l){ lname = l;}
  };
} ("Kite", "Tommy", 45));

The above code is a singleton to create an object.

Classical Inheritance

Sometimes it is frustrated to use prototype in the code. As a Java Developer I would like to have following shortcut:

function Person(firstName, lastName){
  this.fname = firstName;
  this.lname = lastName;
  this.getFirstName = function(){return this.fname;}
  this.getLastName = function() {return this.lname;}
};

Function.prototype.method = function(name, func){
  this.prototype[name] = func;
  return this;
};

Person.method('getFullName', function(greetings){
  return greetings+" "+this.fname+" "+this.lname;
});

You can extend the Function using prototype only once as shown in the prototype.method, then use the method function to create new method as shown in the getFullName().

var p1 = new Person('Ojitha', 'Hewa');
undefined

p1.getFullName("Hello ")
"Hello  Ojitha Hewa"

p1.getFirstName()
"Ojitha"

p1.getLastName()
"Hewa"

Above results shows how to create object and the way to access the methods.

To create a subclass Employee inherited from the Person, need to use the prototype as follows:

//extend from the Person
Employee.prototype = new Person();

Employee.method('setFirstName', function(firstName){
  this.fname = firstName;
});

Employee.method('setLastName', function(lastName){
  this.lname = lastName;
});

But you can add the new functions without prototype. Following code shows how to access these functions;

var e1 = new Employee(1234)
undefined
e1.setLastName('Hewa')
undefined
e1.setFirstName('Oj')
undefined
e1.getFullName('Hello')
"Hello Oj Hewa"
e1.getFirstName()
"Oj"
e1.getLastName();
"Hewa"

Prototypal Inheritance

This is class free way of inheritance of object from object. For example create a person object using object literal and create an employee object using Object.create method.

ar person = {
  fname: 'oj',
  lname: 'Kuma',
  getFullName: function(greetings){
    return greetings+" "+this.fname+" "+this.lname;
  }
};

var employee = Object.create(person);
employee.employeeId = 1234;
employee.getEmployeeId = function(){
  return this.employeeId;
}

As shown in the following text, you can access the methods belongs to employee as well as person via employee object.

employee.getEmployeeId()
1234
employee.getFullName()
"undefined oj Kuma"
employee.getFullName('Hello')
"Hello oj Kuma"

functional Inheritance

Let us get back to the classical inheritance. The modular pattern can be used with classical inheritance to achieve the functional inheritance:

function Person (firstName, lastName, age){

  //common functions
  function getFullName(f,l){
    return firstName+" "+lastName;
  }

  return { //open to outside
    getFirstName: function() {return firstName},
    getLastName: function(){return lastName},
    getAge: function(){return age;},
    getUserFullName: function(){ return getFullName();},
    setFirstName: function(f){firstName = f;},
    setLastName: function(l){ lastName = l;}
  };
};

function Employee(firstName, lastName, age, employeeId){
  var that = Person(firstName,lastName,age);
  that.employeeId = employeeId;
  that.getEmployeeId = function(){return that.employeeId;}
  that.setEmployeeId = function(employeeId){that.employeeId = employeeId;}
  return that;
}

The difference of the two classes is only employeeId available to the Employee class everything else inherited from the Person class. The Employee augment the Person and return that object. Here how to access:

var e1 = Employee('Oj', 'Hewa', 35, 1234);
undefined
e1.getEmployeeId()
1234
e1.setEmployeeId(4321)
undefined
e1.getEmployeeId()
4321
e1.getFirstName()
"Oj"
e1.getUserFullName()
"Oj Hewa"
e1.employeeId
1234
e1.firstName
undefined

Another thing to notice is that firstName and lastName are completely hidden. Something can be do the the employeeId as well.

Navigate the DOM

Here the function to navigate through the dom;

      function walkTheDom(node, func){
        func(node);
        node = node.firstChild;
        while (node) {
          walkTheDom(node, func);
          node = node.nextSibling;
        }
      }

this can be call as walkTheDom(document, function(node){console.log(node);}) in the debugger.

ES6 features

These features are existing. For example, Maps

var map = new Map();
map.set('a', "A");
map.set('b', "B");
map.set('c', "C");
map.set('d', "D");

function dispKeys(){
  for (key of map.keys()){
    console.log(`key is ${key}.`);
  }
}
function dispVals(){
  for (val of map.values()){
    console.log(`value is ${val}.`);
  }
}

function dispKeyVal(){
  for ( e of map.entries()){
    console.log(e)
  }
}

function displFE(){
  map.forEach((val, key) => console.log(`key is ${key}
    and value is ${val}.`))
}

As shown int the above example, forEach function with lambda function is really functional programming features. The backtick character for templating with ${variable} and which allow to have multi-lines as well.