Object Oriented Programming In JavaScript

Q: 1). Is Oops possible in JavaScript?

Answer: Yes, JavaScript supports inheritance through prototyping, properties and methods. It also supports polymorphism, encapsulation and many sub-classing paradigms.

Q: 2). Why do some of the developers not consider JavaScript as an object oriented language?

Answer: Many developers do not consider JavaScript a true object-oriented language due to its lack of class concept and because it does not enforce compliance with OOP principles.

Q: 3). What is an object in JavaScript?

Answer: In JavaScript, an object is a standalone entity, with properties and type.

Q: 4). How can we create objects in JavaScript?

Answer: Use the new keyword with Object() constructor to create objects in JavaScript.

Introduction

Javascript is a programming language that is widely used for web development. In this blog, we will explore some of the important concepts on object-oriented mechanisms that are supported by JavaScript.

Before moving on to the topics let us see what kind of questions are asked in JavaScript interviews related to oop:

How object-oriented programming concepts are implemented in JavaScript?
How did JavaScript differ from other programming languages?
How would you implement inheritance in JavaScript?

So, to find out the answers, read the blog till the end. Let’s begin!

Features of OOP in JavaScript

Some of the important object-oriented features in JavaScript are:

Object
Classes
Encapsulation
Inheritance

Let us discuss the above features one by one and practice them on the JS compiler.

Objects

An object is a unique entity in JavaScript which contains various properties and methods. Let us consider an example, “car” is a real-life object, which has characteristics like the model, type, colour, horsepower and also performs certain actions like driving.

The above characteristics of an object are known as the property of that object in oops, and the actions are called methods in oops.

Objects are everywhere in the JavaScript programming language, either in the form of function, arrays and string.

Let us consider an example for object:

//Defining object
let codingninjas = {
course_1:'JAVA',
course_2:'C++',
course_3:'DBMS',
Course_4:'Python'

}
console.log(codingninjas.course_1);
console.log(codingninjas.course_2);
console.log(codingninjas.course_3);
console.log(codingninjas.course_4);

Output:

JAVA
C++
DBMS
Python

Constructors:

A constructor allows us to provide custom initialization to an instantiated object before any other methods can be called.

Let understand constructors with the help of an example:

function car(first_name,last_name){
this.car_name = first_name;
this.car_year = last_name;
}
//creating new instances of person object
let car1 = new car('BMW',2020);
let car2 = new car('Audi',2018);

console.log(car1.car_name +" "+car1.car_year);
console.log(car2.car_name +" "+car2.car_year);

Output:

BMW 2020
Audi 2018

Know What is Object in OOPs here in detail.

Classes

Classes are an overview of an object. A class can have many objects associated with it, because the class is a template of the object, while objects are instances of the class or the implementation of the class.

A key point to be noted is, JavaScript is a prototype-based object-oriented language, which means it doesn’t have classes but it defines behaviours of a class using constructor function and then we reuse it using the prototype.

Example:

function Car(name,maker,engine){
  this.name = name,
  this.maker = maker,
  this.engine = engine
};

Car.prototype.getDetails = function(){
  console.log('The name of the car is '+ this.name);
}

let car1 = new Car('Altros','Suzuki','1340cc');
let car2 = new Car('Rk7','Rangerover','998cc');

console.log(car1.name);
console.log(car2.maker);

console.log(car1.getDetails());

Output:

Altros
Range Rover
The name of the car is Altros

Encapsulation

It deals with wrapping property and function in a single unit. Let us look at one example:

class car{
constructor(name,id){
  this.name = name;
  this.id = id;
}
add_fueltype(add){
  this.add = add;
}
getDetails(){
console.log(`Name is ${this.name},Fuel-type is: ${this.add}`);
}
}

let car1 = new car('BMW',21);
car1.add_fueltype('Petrol');
car1.getDetails();

Output

Name is BMW, Fuel-type is: Petrol

In the above example, we created a car object using the constructor. Then we have Initialized its property, and we have used its functions. We are not bothered about the implementation details of the code.

We are simply working with an object interface without considering the implementation details.

Inheritance

It is a concept in which the property and methods of an object are being used by another object by the means of inheritance. In JavaScript, an object inherits an object i.e. certain features (property and methods) of one object can be reused by other objects in JavaScript.

Example:

class vehicle{
  constructor(name){
  this.name = name;
}
  //method to return the string
toString(){
  return (`Name of vehicle: ${this.name}`);
}
}
class car extends vehicle{
  constructor(name,id){
  //super keyword to for calling above class constructor
  super(name);
  this.id = id;
}
toString(){
  return (`${super.toString()},Car Id: ${this.id}`);
}
}
let car1 = new car('BMW',22);
console.log(car1.toString());

Output

Name of Vehicle: BMW, Car Id: 22

In the above example, we define a vehicle object with certain property and method, and then we inherit the vehicle object in the car object and use all the properties and methods of the vehicle object as well define certain properties and methods for the car.

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions

1). Is Oops possible in JavaScript?

Answer: Yes, JavaScript supports inheritance through prototyping, properties and methods. It also supports polymorphism, encapsulation and many sub-classing paradigms.

2). Why do some of the developers not consider JavaScript as an object oriented language?

Answer: Many developers do not consider JavaScript a true object-oriented language due to its lack of class concept and because it does not enforce compliance with OOP principles.

3). What is an object in JavaScript?

Answer: In JavaScript, an object is a standalone entity, with properties and type.

4). How can we create objects in JavaScript?

Answer: Use the new keyword with Object() constructor to create objects in JavaScript.

For example: const person = new Object();

5). What is the difference between function and object in JavaScript?

Answer: Functions are first-class objects in JavaScript because they have the same attributes and methods as any other object. Functions may be called, which sets them apart from other objects. They are, in a nutshell, Function objects.

Key takeaways

In this blog, we discussed concepts of oops in JavaScript with the help of various examples on topics such as constructors, classes, encapsulation, inheritance.