Home / Web / Classless Javascript (Composition over Inheritance)
Javascript

Classless Javascript (Composition over Inheritance)

A lot has been said about why we don’t need Class syntax in javascript as underneath javascript works on prototypal inheritance unlike other classical inheritance languages such as ruby, python, php, java. And that’s quite true. I think if somebody wants to use OOP in JS then it better be in accordance with prototypal nature of JS.

There are numerous examples available all over to show how we can exactly simulate classical “Classes” using prototypes. All features like private variables, class/static variables etc. can be emulated easily. However people have long complained that Javascript’s prototypal (and in general whole JS) is so dynamic that there are multiple ways/styles of writing classes and that adds confusion to new comers to JS. I think this is also true!

So, ES6 presented us uniform way of writing classes with class keyword which looks like normal classes of other classical languages but is just sugar syntax over prototypal behaviour. This would add consistency in writing (more so in reading..remember we read a lot of code than we actually write) classes in javascript. Again true!

Okay, so this article is not about “Should we use class keyword for classes or write them according to prototypes?”. My point is that we do not need classes and inheritance at all! So no to “class” keyword and even no to prototypal inheritance. And remember that our ultimate aim is “code reuse”, either by inheritance or by other mechanisms. So actually by not using inheritance (prototypal in JS’s case) we are making already small language even smaller, and for good!

Javascript has superb support for first class functions and closures. So we can actually use “Composition over inheritance” and composition plays very nice with plain functions than classes. A lot , also, has been said about why to avoid inheritance. From my experience, I too personally think, , inheritance should be avoided but I have nothing against languages that only supports inheritance. Below are some good resources, notable one being, Golang, which is modern and practical, doesn’t have classes and encourages composition over inheritance.

View More : https://en.wikipedia.org/wiki/Composition_over_inheritance

View More: https://github.com/joshburgess/not-awesome-es6-classes

Composition over inheritance: “Favor ‘object composition’ over ‘class inheritance’.” (Gang of Four 1995:20)

But often we want to have real life example instead of intellectual people’s heavy theories, isn’t it? So let’s see “composition over inheritance” in simple code. Here our ultimate aim is to share/reuse getInfo() functionality of “Person” . We will do it in three ways:

1) ES6 Clasess 2) ES5 Prototypal classes 3) Composition

Problem statement: Reuse getInfo() method/function of Person class/module in Employee class/module

  1. ES6 clasess:

class Person{
constructor(fn, ln){
this.firstName = fn;
this.lastName = ln;
}

getInfo(){
//In real life this method/function will be bigger
return ‘Hi i am ‘ + this.firstName + “ “ + this.lastName;
}
}

class Employee extends Person {
constructor(fn, ln, eid){
super(fn,ln);
this.empid = eid;
}

getId(){
return “Hi my employee id is “ + this.empid;
}
}

const e1 = new Employee(‘john’, ‘doe’, 123);

console.log( e1.getInfo() );// Hi i am john doe
console.log( e1.getId() ); // Hi my employee id is 123

  1. ES5 Prototypal Classes:

function Person(fn, ln){
this.firstName = fn;
this.lastName = ln;
};

Person.prototype.getInfo = function(){
//In real life this method/function will be bigger
return ‘Hi i am ‘ + this.firstName + “ “ + this.lastName;
}

function Employee(fn, ln, empid){
Person.call(this, fn, ln);
this.empid = empid;
};

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.getId = function(){
return “Hi my employee id is “ + this.empid;
}

var e1 = new Employee(“john”, “doe”, 123);

console.log( e1.getInfo() );// Hi i am john doe
console.log( e1.getId() ); // Hi my employee id is 123

  1. Composition

//In real life this method/function will be bigger
//So taking this function out of createPerson will make sense then

function getInfo(firstName, lastName){
return ‘Hi i am ‘ + firstName + “ “ + lastName;
}

function createPerson(fn, ln){
return {
getInfo: function(){ return getInfo(fn, ln)}
};
}

//In real life this method/function will be bigger
//So taking this function out of createPerson will make sense then

function getId(empid){
return “Hi my employee id is “ + empid;
}

//createEmployee makes use of composition. Its’ simple. Any function //which makes use of other functions to compose functionality is //said to be making use of composition. We all use it many times.

function createEmployee(fn, ln, empid){
return {
getId : function(){ return getId(empid);},
getInfo: function(){ return getInfo(fn, ln);}
};
}

var e2 = createEmployee(“john”, “doe”, 123);

console.log( e2.getInfo() );// Hi i am john doe
console.log( e2.getId() ); // Hi my employee id is 123

 

See, first class functions and closures plays so well with javascript and we compose functionality with other functions. And now we can see that we don’t even need prototypal inheritance.

So the big question — Can we not do composition in other classical languages? — We can but its bit more typing there since many can’t have function living independently out of classes (well, in ruby, python etc can..and i guess in C# and Java8 now we can after introducing lamdas). So we need to create small classes having only one method and then we can compose. Its demonstrated in following wikipedia article with C++: Read Here

So.. Show your class…by not using one! 

Your comments, opinions are most welcome!

Note: I agree that prototype chains are faster and closures needs bit memory. In real life though, performance hits are very very small and negligible. A lot of JSPerf tests have shown that it would need millions of object creation to actually realise that closures need bit more memory and are bit slower. In real life, programs that doesn’t happen (Of course unless you are writing compilers, databases and stuff like that  )

Article By: Nikhil Yeole

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

Check Also

Business Online

9 Ways To Promote Your Business Online For Free

Promote Your Business Online : Here are 9 simple yet powerful marketing tips for promoting ...

Leave a Reply