Object Oriented Javascript

Object oriented programming is a programming paradigm that is centered around objects, rather than functions.

The four pillars of OOP are :

• Encapsulation
• Abstraction
• Inheritance
• Polymorphism

Creating Objects

An object in javaScript is a collection of key value pairs.

There are 3 ways you can create objects:

Object literals

const circle = {
radius:1,
location: {
    x: 1,
    y: 1
},
draw: function () {
    console.log('draw');
}

Factory Functions

const createCircle = function(radius) {
return ({
        radius,
        drawRadius: function() {
              console.log(radius);
          }
        })
}

Constructor Functions

function Circle(radius) {
  this.radius = radius;
  this.drawRadius = function() {
    console.log(radius);
    }
}

const circle1 = new Circle(1);

Constructor Property

All objects (with the exception of objects created with

Object.create(null))will have aconstructorproperty. Objects created without the explicit use of a constructor function (i.e. the object and array literals) will have aconstructorproperty that points to the Fundamental Object constructor type for that object.

var o = {};
o.constructor === Object; // true

Private Properties or Methods

Private properties in Factory Functions

const createCircle = function(radius) {
let _radius = radius;
return ({
  drawRadius: function() {
      console.log(_radius);
  }
})
}

const circle1 = createCircle(1);
console.log(circle1.radius); // undefined
circle1.drawRadius(); //1

Private properties in Constructor Functions

function Circle(radius) {
  let _radius = radius;
  this.drawRadius = function() {
    console.log(_radius);
    }
}

const circle1 = new Circle(1);
console.log(circle1.radius); // undefined
circle1.drawRadius();

Getters and Setters

We can define getters and setters by defining a function on the constructor function :

function Circle(radius) {
  let _radius = radius;

  this.drawRadius = function() {
    console.log(_radius);
    }

  this.getRadius = function() {
      return _radius;
  }  
}

const circle1 = new Circle(1);
console.log(circle1.getRadius()); // 1

but if we want the property to be accessed with circle1.getRadius syntax (intestead of circle1.getRadius()) we can use :

Object.defineProperties(object, name, {
    get: ...,
    set: ...
})

function Circle(radius) {
  let _radius = radius;

  this.drawRadius = function() {
    console.log(_radius);
    }

  Object.defineProperty(this, 'radius', {
    get() {
      return _radius;
     }
    })
}

const circle1 = new Circle(1);
console.log(circle1.radius); // 1

or in Factory Functions

const createCircle = function(radius) {
  let _radius = radius;

   let obj = {
        drawRadius: function() {
          console.log(_radius);
        }
   }

  Object.defineProperty(obj, 'radius', {
      get() {
        return _radius;
       }
  })

  return obj;
}

Inheritance