Sign in
Log inSign up

Class(objects blueprint) Patterns in JavaScript

Prabu Subra's photo
Prabu Subra
·Dec 19, 2017

Function Declarations and Expressions are the ways to define classes for objects in JavaScript. The main different between these is hoisting. Declarations are function hoisted whereas Expressions are variable hoisted.

foo(); // Function Declaration!!!
console.log(boo); // undefined
boo(); // Uncaught TypeError: boo is not a function
function foo(){
     console.log("Function Declaration!!!");
}

var boo = function(){
    console.log("Function Expression!!!");
}
foo();
boo();

Function declaration can be used or invoked even before its definition but function expression can be invoked only after its definition. it is bubbled up as a variable with _undefined _value.

JavaScript programmers can define a class even without using class key word!!! we have few patterns to define and use the OOPS class concepts.

  1. Constructor Functional Pattern
  2. Factory Function Pattern
  3. Prototype-based Pattern
  4. using class keyword

Constructor Functional Pattern:-

In this Pattern new keyword is used to create objects.

function Person(name, city, area, age) {
    this.name = name;
    this.city = city;
    this.getDetails = function(){
        return checkAge() ? name+", ("+age+"), from "+city+", "+area:name+", from "+city+", "+area;
    }
    let checkAge = function(){
        return age && age > 16?true:false;
    }
}

var person1 = new Person("Steve","Bangalore","BTM 2nd stage",32);
var person2 = new Person("Mark","Bangalore","Electronic city",14);
console.log(person1); //Person {name: "Steve", city: "Bangalore", getDetails: ƒ}
console.log(person1.getDetails()); //Steve, (32), from Bangalore, BTM 2nd stage
console.log(person2); //Person {name: "Mark", city: "Bangalore", getDetails: ƒ}
console.log(person2.getDetails()); //Mark, from Bangalore, Electronic city

variables and methods inside functions will not be accessible unless until you add them to this keyword. this keyword is deciding whether variables and methods inside a class is private or public. this is used to hide the implementation from outside world.

In above example variables name, city and method getDetails are public because it is assigned to this keyword, variable area, age and method checkAge are private because it is not assigned to this keyword.

Factory Function Pattern:-

In this pattern objects can be created without using new Keyword. it is same as Functional Pattern but the difference is class itself return the JavaScript object, so no need to create objects by using new keyword. whatever variables and methods added to returned objects those are public, if it not added on return object then they are private to the class.

function Person(name, city, area, age) {
    let getDetails = function(){
        return checkAge() ? name+", ("+age+"), from "+city+", "+area:name+", from "+city+", "+area;
    }
    let checkAge = function(){
        return age && age > 16?true:false;
    }
    return {
        name:name,
        city:city,
        getDetails:getDetails
    }
}

var person1 = Person("Steve","Bangalore","BTM 2nd stage",32);
var person2 = Person("Mark","Bangalore","Electronic city",14);
console.log(person1); //{name: "Steve", city: "Bangalore", getDetails: ƒ}
console.log(person1.getDetails()); //Steve, (32), from Bangalore, BTM 2nd stage
console.log(person2); //{name: "Mark", city: "Bangalore", getDetails: ƒ}
console.log(person2.getDetails()); //Mark, from Bangalore, Electronic city

Prototype-based Pattern:-

The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype object. The Prototype pattern is also referred to as the Properties pattern. variables are added to this keyword, it will be accessible by methods using this keyword.

Methods are stored in class.prototype property.

function Person(name, city, area, age) {
    this.name = name;
    this.city = city;
    this._area = area;
    this._age = age;
    this._checkAge = function(){
        return this._age && this._age > 16?true:false;
    }
}
Person.prototype.getDetails = function(){
        return this._checkAge() ? this.name+", ("+this._age+"), from "+this.city+", "+this._area:this.name+", from "+this.city+", "+this._area;
}
var person1 = new Person("Steve","Bangalore","BTM 2nd stage",32);
var person2 = new Person("Mark","Bangalore","Electronic city",14);
console.log(person1); //Person {name: "Steve", city: "Bangalore", _area: "BTM 2nd stage", _age: 32, _checkAge: ƒ}
console.log(person1.getDetails()); //Steve, (32), from Bangalore, BTM 2nd stage
console.log(person2); //Person {name: "Mark", city: "Bangalore", _area: "Electronic city", _age: 14, _checkAge: ƒ}
console.log(person2.getDetails()); //Mark, from Bangalore, Electronic city

class keyword:-

The class keyword is used to define class declaration and expression. The main difference between function declarations are hoisted whereas class declarations are not hoisted. so you have use after defining the class.

class Person {
    constructor(name, city, area, age){
        this.name = name;
        this.city = city;
        this.area = area;
        this.age = age;
    }
    getDetails(){
        return this.checkAge()? this.name+", ("+this.age+"), from "+this.city+", "+this.area:this.name+", from "+this.city+", "+this.area;
    }
    checkAge (){
        return this.age && this.age > 16?true:false;
    }
}

var person1 = new Person("Steve","Bangalore","BTM 2nd stage",32);
var person2 = new Person("Mark","Bangalore","Electronic city",14);
console.log(person1); //Person {name: "Steve", city: "Bangalore", area: "BTM 2nd stage", age: 32}
console.log(person1.getDetails()); //Steve, (32), from Bangalore, BTM 2nd stage
console.log(person2); //Person {name: "Mark", city: "Bangalore", area: "Electronic city", age: 14}
console.log(person2.getDetails()); //Mark, from Bangalore, Electronic city

constructor is used to create and initialize the objects. there should be only one constructor per class definition.

class patterns concepts are interesting and going like the ocean, working to explore deep.

Hope, I explore and write more. Please feel free to comment your suggestions.

Thanks, see you soon…

4