Object-Oriented in Javascript

Keesha Hargrove
3 min readJan 4, 2022

One of the best things modern developers do is to write code in an object-oriented way. By using Object-Oriented JavaScript Programming we can write code in the proper format for specific real-world objects so they don’t overlap.

Classes and constructors are used in object-oriented programming to initialize real-world objects. Class templates, which are referred to as blueprints for objects in Javascript, are created by a constructor. These blueprints or constructors are given objector instances, and based on these instances the calculation is performed. Several objects or instances can be created by a single constructor.

Javascript uses unique mechanisms for object-oriented programming. These are

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

Objects

Different types of data are stored in objects, which are unique identifiers. An object is a type of data storage based on key-value pairs. Both properties and methods can be key-value pairs.

Objects can be created by two types -:

Defining An Object

var truck = {

name : ‘’Ford”,

color : “white”,

getName : function(){

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

}

}

console.log(truck.name); // prints Ford

console.log(truck.color); //prints white

console.log(truck.getName()); // prints The color of Ford is white

  1. Defining a Constructor

Function truck( name, color) {

This.name = name;

This.color = color;

}

Var truck1 = new truck( “Ford”, “white” )

Var truck2 = new truck( “Honda”, “blue”)

console.log(truck1.name); //prints Ford

console.log(Truck2.name); //prints Honda

Classes

Classes don’t exist in Javascript, but objects do. An object inherits properties from its prototype when it is created. In JavaScript, classes are introduced by ECMAScript. Objects and instances of a class may be created. Classes are like blueprints for creating various objects in the real world.

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 truck1 = new truck(“Nissan”, “red”);

Var truck2 = new truck(“Jeep”, “black”);

Encapsulation

In object-oriented programming, encapsulation refers to wrapping of a real-life object into an object class or object.

As well as data hiding, encapsulation sometimes means abstracting data. The access modifiers are provided by other object-oriented languages so that properties of an object can be restricted across an application. JavaScript developers very well know that these access modifiers don’t exist in React, but Javascript uses its own method of limiting the scope of variables.

Inheritance

A class or an object can inherit the properties of another class or another object through inheritance. A real-life object has certain properties. An employee is a person, so since we already have the properties defined, we do not have to define them again.

By passing these properties to the parent class when calling or invoking the constructor, we are using the super keyword.

Example -:

Class student {

constructor(name, gender){

this.name = name;

this.gender = gender;

}

}

Class kid extends student {

constructor(name, gender,id){

super(name, gender);

This.id = id;

}

}

Var kid1 = new kid(“Bob”, “male”, “12”)

console.log(kid1.name + “ ID : ”+ kid1.id) //prints Bob ID : 12

There are two classes named student and kid. The student class has properties such as name and gender while the kid class has properties such as ID. Kids inherit the properties of the student class. This is how members of one class are inherited from another class using the super keyword.

These are examples of Objects, Classes, Encapsulation, and Inheritance in Object-Oriented Javascript.

--

--