JavaScript is a prototype based programming language. It uses an object as a template to get the properties of other objects. In this article on OOP in JavaScript, you will learn about how Object-oriented programming is incorporated in JavaScript.
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.
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.
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
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.
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 Post Graduate Program in Full Stack Web Development entails 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!
