OOJS(Object Oriented JavaScript)

What is Object ?

Well in general object can be defined as collection of properties and properties is an association of keys and value. In JS value can be a function in that case properties known as method.

Ways Of Creating Object In JavaScript

1. Using the Object() constructor: This one is simplest way of creating an empty object in javascript.

syntax:

var myObject = new Object();

Fact: when we pass any value to new Object(val) then resultant object will be an instance of Object according to val.

for example :

var myObject = new Object(1);
myObject instanceof Number // true
var myObject2 = new Object();
myObject2 instanceof Object // true
myObject2 instanceof Number // false

2. Using the bracket’s syntax: This results same like new Object() but syntax is pretty simple and mostly used by developers.

syntax:

var myObject = {};

3. Using Object.create() method: We can create new object by passing null as an argument in Object.create(). That will create a new object without having __proto__ as a property of it.

syntax:

var myObject = Object.create(null); //myObject don't have __proto__

We can clearly see here obj1 i.e. created using Object.create(null) don’t have __proto__

4. Using Function constructor: By using function constructor we can define a constructor function that will return a new instance of an object every time whenever we call that with a new keyword. This method is generally used by developer when they want to create many instances having the same type.

syntax:

var objFunction = function(propName){
    this.propName = propName;
}
var obj1 = new objFunction("property of object 1");
var obj2 = new objFunction("property of object 2");
console.log(obj1);
console.log(obj2);

output:

5. Using Function constructor and prototype: Every function constructor have a property named as prototype that can be used to add properties in function constructor. Properties that are added via prototype will go inside __proto__ instances of function constructor.

syntax:

function objFunction(){};
objFunction.prototype.newProperty = "this is a new property";
var obj = new objFunction();
console.log(obj);

output:

6. Using ES6 class: As we know es6 introduces class in javascript. class is not different from constructor function just a sugarcoat over constructor behind the scene both are same just implementation is different.

syntax:

class myObjectClass {
 constructor(name){
    this.name = name;
 }
}
var obj = new myObjectClass("Sam"); // this will return new object     having property name and value Sam
console.log(obj); 

output:

7. Singleton pattern : This method will allow only one single instance existence for a single type.

syntax:

var obj = new function () {
this.name = "some name";
}

Let’s take a real-life example:

Let’s say we have a CAR so car can have different properties like color, brand, wheels, engine and so on, if we have to represent this same as an object in JS we can do it like this:

//Object Literals
Car = {
Name: “CRV”,
Brand: “Honda”,
Colour: “white”,
Wheels: 4,
Engine: “V8”,
}

The above syntax is known as Object Literals in JS. We can add more properties to object Car by using dot operator or by using square bracket syntax is as follow:

//Using dot Operator
Car.newPropertyName = “new Value”;
//Using Square Bracket
Car[“newProp2”] = “new val 2”;
console.log(Car);
Output :
{
Brand: “Honda”
Colour: “white”
Engine: “V8”
Name: “CRV”
Wheels: 4
newProp2: “new val 2”
newPropertyName: “new Value”
}

We can follow the same if we want to add an method in our object Car:

Car.showDetails = function () {
console.log(`${this.Name} have ${this.Wheels} wheels with ${this.Engine} engine`);
}
Car.showDetails(); // CRV have 4 wheels with V8 engine

Object Literals method is not feasible in all the case as we can see if we follow this syntax we always have to write whole code again and again to create new object. So Object Literals method is feasible only in case when we need only one unique type of object.

Get Saurabh Singh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To create many object having same type we can create a blue print for that and create as many object we needed to do this we can follow Object Constructor approach .

// Object Constructor
function CarFactory(name, brand, color, engine) {
this.name = name;
this.brand = brand;
this.color = color;
this.engine = engine;
}
// Add property to CarFactory using prototype
CarFactory.prototype.hasSunRoof = "yes";
const crv= new CarFactory(“CRV”, “honda”, “red”, “v8”); //
const city= new CarFactory(“City”, “honda”, “white”, “v6”);
console.log(crv); //CarFactory {name: “CRV”, brand: “honda”, color: “red”, engine: “v8”}
console.log(city); //CarFactory {name: “City”, brand: “honda”, color: “white”, engine: “v6”}
console.log(crv.hasSunRoof); // yes

So in above case we have a blueprint or if I go more technically we can say we have a constructor function named as CarFactory that can be used to create as may object we want by using new keyword followed by the CarFactory(“parameters”).

Features of OOJS(Object Oriented JavaScript)

Inheritance in JavaScript

Just like in other object oriented languages inheritance concept is same i.e. when we share properties of one class with other class called Inheritance or we can say if we have parent child relationship between two classes we achieve Inheritance. Let’s take a look how we can do the same in JavaScript.

Let’s assume we have three classes

1.CarFactory

2.SuvFactory

3.SedanFactory

Both SuvFactory and SedanFactory can have properties of CarFactory so we can say CarFactory can be the parent class for both.

//parent class
function CarFactory(name, brand, color, engine) {
this.name = name;
this.brand = brand;
this.color = color;
this.engine = engine;
this.sound = function () {
console.log(`${this.brand} ${this.name} says Vroom Vroom`);
}
}
//child class
function SuvFactory (name, brand, color, engine) {
//call parent class constructor
CarFactory.call(this,name, brand, color, engine);
this.type = “SUV”;
}
//child class
function SedanFactory (name, brand, color, engine) {
//call parent class constructor
CarFactory.call(this,name, brand, color, engine);
this.type = “sedan”;
}
const crv = new SuvFactory(“CRV”,”honda”,”black”,”v8");
const city = new SedanFactory(“city”, “honda”, “red”, “v6”);
console.log(crv); //SuvFactory {name: “CRV”, brand: “honda”, color: “black”, engine: “v8”, type: “SUV”}
crv.sound(); //honda CRV says Vroom Vroom
console.log(city); //SedanFactory {name: “city”, brand: “honda”, color: “red”, engine: “v6”, type: “sedan”}
city.sound(); //honda city says Vroom Vroom

so in above example now we have two different type of objects for crv (SuvFactory) and city(SedanFactory) and both have inherited properties from CarFactory class

Abstraction In JavaScript

In above example class SuvFactory and SedanFactory doesn’t need to know how the sound method is implemented but still we can use that sound method . SuvFactory and SedanFactory doesn’t need to explicitly implement sound method unless we want to change the implementation of that method, this is called abstraction.

Encapsulation In JavaScript

Encapsulation is defined as wrapping up the data in a single unit just like we did in above example we have a crv object that encapsulate different properties.