Object-Oriented Javascript for Beginners – AppStory

Writing code in Object-oriented way is one of the best things that modern developer does. Object-Oriented Javascript Programming is used to write a code in the proper format on the real objects in our world so that every object does not get mixed with others. In this article, we will learn how object-oriented javascript is applied in real-world scenarios. 

Object-oriented programming makes use of the classes and constructor to initialize the real-world objects. Javascript does not use classes it uses a constructor to create a class template which can be referred to as a blueprint of the object. The objector instances are created for these blueprints or constructor then the calculations are performed on these instances. For one constructor, multiple instances or objects can be created.

Object-oriented javascript uses certain different mechanisms. These are 

1. Objects
2. Classes
3. Encapsulation
4. Inheritance

Objects

Objects are the unique identities that are used to store different types of data. Objects are a multiple key-value pair storage datatype. These key-value pairs can be both properties as well as methods.

Objects can be created by two types -:

Defining an Object

var car = {

name : ‘’Mercedes”,

color : “black”,

getName : function(){

return (“The color of ” + this.name + “ is “ + this.color);

      }

}

console.log(car.name); // prints Mercedes

console.log(car.color); //prints black

console.log(car.getName()); // prints The color of Mercedes is Black 

2. Defining a Constructor

Function car( name, color) {

This.name = name;

This.color = color;

}

Var car1 = new car( “Mercedes”, “black” )

Var car2 = new car( “BMW”, “white”)

console.log(car1.name); //prints Mercedes

console.log(car2.name); //prints BMW

Classes

In javascript, there are no classes, but there are objects. Whenever an object is created it inherits the properties of its prototype. ECMAScript has introduced the concept of classes in javascript. The classes can have many objects and instances. A class is like a blueprint that can be used to create multiple real-life objects.

NOTE – Like other object-oriented languages, javascript does not have classes. Even the classes provided by ECMAScript are objects. Javascript is a prototype-based object-oriented language.

Example -: Classes provided by ECMAScript

Class car {

constructor(name, color) {

This.name = name;

This.color = color;

}

}

Var car1 = new car(“Ferrari”, “red”);

Var car2  = new car(“Audi”, “black”);

Encapsulation

Encapsulation refers to the wrapping, In an object-oriented language the properties, characteristics, and methods of a real-life object are encapsulated or wrapped in a single class or object. 

Sometimes encapsulation also means data hiding or data abstraction. Other Object-oriented languages provide the access modifiers to restrict the use of properties of an object throughout the application. Reactjs developers very well know that Javascript does not have such access modifiers but it has its own way to restrict the scope of the variables.

Inheritance

Inheritance provides the way of inheriting the properties from one object to another object or from one class to another class. Suppose there are two real-life objects Person and Employee that have certain properties. We know that an employee is a person so there is no need to define the properties again, we can simply inherit all the properties of the person object. 

Whenever we call or invoke the constructor we use the super keyword to pass the properties to the parent class.  

Example -: 

Class person {

constructor(name, gender){

this.name = name;

this.gender = gender;

}

}

Class employee extends person {

constructor(name, gender,id){

super(name, gender);

This.id = id;

}

}

Var employee1 = new employee(“Ayush”, “male”, “22”)

console.log(employee1.name + “ ID : ”+ employee1.id) //prints Ayush ID : 22

There are two classes person and employee. A person class has the property name and gender and employee have property ID. The employee class inherits the properties of a person. We use the super keyword for invoking the constructor of the Person class and this is how the values are inherited from one class to another.

These are the major functions we need to learn about  Object-Oriented Javascript.

Hope you understand everything 

Thank You!!