What Is OOP In JavaScript And How Is It Implemented?

What Is Object-oriented Programming?

Object-oriented Programming treats data as a crucial element in program development and doesn't allow it to flow freely around the system. It ties data more securely to the function that operates on it and protects it from accidental modification from an outside function. OOP breaks down a problem into several entities called objects and builds data and functions around these objects. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Basic concepts of Object-oriented Programming 

Objects 

Objects are the basic run-time bodies in an object-oriented framework. They may represent a place, a person, an account, a table of data, or anything that the program needs to handle. Objects can also represent user-defined data such as vectors, time, and lists.

Consider two objects, “customer” and “account” in a program. The customer object may send a message requesting the bank balance. 

Classes 

We know that objects hold the data and the functions to manipulate the data. However, the two can be bound together in a user-defined data type with the help of classes. Any number of objects can be created in a class. Each object is associated with the data of type class. A class is therefore a collection of objects of similar types. 

For example, consider the class “Fruits”. We can create multiple objects for this class -

Fruit Mango;

This will create an object mango belonging to the class fruit.  

Encapsulation

Encapsulation is the wrapping up/binding of data and function into a single unit called class. Data encapsulation is the most prominent feature of a class wherein the data is not accessible to the outside world, and only those functions wrapped inside the class can access it. These functions serve as the interface between the object’s data and the program. 

Inheritance

The phenomenon where objects of one class acquire the properties of objects of another class is called Inheritance. It supports the concept of hierarchical classification. Consider the object “car” that falls in the class “Vehicles” and “Light Weight Vehicles”.

In OOP, the concept of inheritance ensures reusability. This means that additional features can be added to an existing class without modifying it. This is made possible by deriving a new class from the existing one. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

OOP Concepts in JavaScript

Now that you are familiar with OOP concepts, this section will show you how JavaScript implements them. 

Creating Objects in JavaScript

• We can create an object using the string literal in JavaScript. 

var student = {        name: "Chris",        age: 21,        studies: "Computer Science",    };    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

• Creating objects using the new keyword.

var student = new Object();    student.name = "Chris",    student.age=21,    student.studies = "Computer Science";    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

• Creating an object using the object constructor. 

function stud(name, age, studies){        this.name = name;        this.age = age;        this.studies = studies;    }    var student = stud("Chris", 21, "Computer Science");    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

The output for all three scenarios is 

Class Implementation in JavaScript

JavaScript uses the ES6 standard to define classes. Consider the following example. 

class Cars {     constructor(name, maker, price) {       this.name = name;       this.maker =  maker;       this.price = price;     }     getDetails(){         return (`The name of the car is ${this.name}.`)     }   }   let car1 = new Cars('Rolls Royce Ghost', 'Rolls Royce', '$315K');   let car2 = new Cars('Mercedes AMG One', 'Mercedes', '$2700K');   console.log(car1.name);       console.log(car2.maker);     console.log(car1.getDetails()); 

The output of the above code is 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Encapsulation in JavaScript

Encapsulation includes wrapping the property and the function within a single unit. Consider the following example: 

class Emp_details{     constructor(name,id){         this.name = name;         this.id = id;     }     add_Address(add){         this.add = add;     }     getDetails(){         console.log(`Employee Name: ${this.name}, Address: ${this.add}`);     } } let person1 = new Emp_details('Anand',27); person1.add_Address('Bangalore'); person1.getDetails(); 

Here, the class holds the data variables name and id along with the functions add_Address and getDetails. All are encapsulated within the class Emp_details. 

The output of the above code is: 

These are some basics of Object-oriented programming concepts in JavaScript. 

Master Core Java 8 Concepts, Java Servlet & More!

Java Certification TrainingENROLL NOW

Next Steps

We hope this article on Object-oriented Programming in JavaScript helped you. 

To learn more about JavaScript and perhaps make a career as a developer, certification will come in handy. It is highly recommended and could catapult your coding career. Simplilearn's Java Certification Trainingentails the fundamentals of JavaScript, including the enumeration and elaboration of various data types in JavaScript, an explanation of loops and conditional statements in JavaScript, and an overview of the concepts of objects and variables in JavaScript..

If you have any questions or feedback, let us know in the comments section. Our experts will get back to you ASAP!