Object Oriented In Javascript

Last few days I passed with Javascritp with its OOP concept. I found some beauties in Javascript programming language. So far everything we use in Javascript as function. But the object oriented concept is also available in the Javascript. Through Javascript is a class-less language but everything is an object in the Javascript. Basically, Javascript follows object-oriented, imperative, and functional programming styles as the same time.

First create an object that we can reuse in different purposes.

var Rectangle = function (length, width) {
  this.length = length;
  this.width  = width;
  //Methods defined internally
  this.calcArea = function() {   
      return this.length * this.width;
  this.getWidth = getWidth; //Methods defined externally: Anti pattern
function getWidth(){
  return this.width;

I create the object in constructor way. Now start using it..

//Creating instance of Rectangle
var myRectangle = new Rectangle(2, 4); 

The outputs are:


You can create as much as new instance of Rectangle using this template. Now, method added as prototype. Let’s make it clear a bit. So far we have two methods one is calcArea() and another one is getWidth(). Both of the methods create when object is created but you want to add a new method to Rectangle (already Rectangle is constructed) that other objects of Rectangle can use that. Suppose we want to add a new method named: getLength. We will have to add getLength() to the prototype of the constructor function.

Rectangle.prototype.getLength = function(){
  return this.length;

Now call the new method..


The output is:


Suppose a new object square has the same functionality as Rectangle has. We can again all methods to the square but it goes against the “DRY” principle of programming: Don’t Repeat Yourself. So, we will inherit square from Rectangle.

var Square =  function (length) {
  this.length = length;
  this.width  = length;
//For Inheriting all methods
Square.prototype =  new Rectangle();
//Creating instance of Square
var mySquare = new Square(2);

And, the output is:


Actually, Square using all the methods of Rectangle.

By the way, ECMAScript 5 introduced a new cool method: Object.create(). By calling the method, you can create a new object easily. The method accepts always the prototype of a object as its first argument.

So, you can also inherit in following way,

Square.prototype =  Object.create(Rectangle.prototype);

If want to know more about the method, just go through this link: MDN Link
Happy Learning *^_^*


Eftakhairul Islam

Hi, I'm Eftakhairul Islam, a passionate Software Engineer, Hacker and Open Source Enthusiast. I enjoy writing about technical things, work in a couple of startup as a technical advisor and in my spare time, I contribute a lot of open source projects.


One thought on “Object Oriented In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Read previous post:
Search and replace a node in XML

Yeah.. Finally, I came back to my blog.. I was too much busy with new my job. Recently I switched...