---
title: "Explain the concept OOPs in JavaScript"  
description: "Object-oriented programming (OOP) in JavaScript is a programming paradigm that allows you to structure your code in a way that models real-world objec"  
author: "Ravi Vishwakarma"  
published: 2024-06-18  
updated: 2024-06-18  
canonical: https://www.mindstick.com/blog/304383/explain-the-concept-oops-in-javascript  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 4 minutes  

---

# Explain the concept OOPs in JavaScript

Object-[oriented programming](https://www.mindstick.com/forum/162/object-oriented-programming-oop-s) (OOP) in JavaScript is a programming paradigm that allows you to structure [your code](https://www.mindstick.com/forum/157976/how-can-you-use-jquery-s-testing-framework-such-as-qunit-to-write-unit-tests-for-your-code) in a way that models real-world objects and their interactions. JavaScript, while primarily a prototype-based language, supports OOP concepts such as [encapsulation](https://www.mindstick.com/articles/12229/encapsulation-and-access-specifier), [inheritance](https://www.mindstick.com/articles/13095/inheritance-and-its-types), [polymorphism](https://www.mindstick.com/articles/1827/objective-c-polymorphism), and abstraction through its [object model](https://www.mindstick.com/forum/158432/what-is-the-document-object-model-dom-and-how-does-it-relate-to-web-development). \
Here's an explanation of these concepts in the context of JavaScript:

**1. Objects and Constructors**\
In JavaScript, objects are created using constructors or literal notation. Constructors are functions used with the new keyword to create instances of objects. Objects can contain properties (variables) and methods (functions).

```javascript
// Constructor function
function Car(make, model) {
   this.make = make;
   this.model = model;
   this.drive = function() {
       console.log(`Driving ${this.make} ${this.model}`);
   };
}
// Creating instances
let myCar = new Car('Toyota', 'Corolla');
let anotherCar = new Car('Honda', 'Civic');
myCar.drive(); // Output: Driving Toyota Corolla
anotherCar.drive(); // Output: Driving Honda Civic
```

**2. Encapsulation**\
Encapsulation in JavaScript involves bundling the data (properties) and methods (functions) that operate on the data into a single unit (object). This helps in hiding the internal state of objects and protecting them from outside interference.

```javascript
function BankAccount(accountNumber, balance) {
   let _accountNumber = accountNumber;
   let _balance = balance;
   this.deposit = function(amount) {
       _balance += amount;
       console.log(`Deposited ${amount}. New balance: ${_balance}`);
   };
   this.withdraw = function(amount) {
       if (amount <= _balance) {
           _balance -= amount;
           console.log(`Withdrawn ${amount}. New balance: ${_balance}`);
       } else {
           console.log('Insufficient balance');
       }
   };
   this.getBalance = function() {
       return _balance;
   };
}
let myAccount = new BankAccount('12345', 1000);
myAccount.deposit(500); // Output: Deposited 500. New balance: 1500
myAccount.withdraw(200); // Output: Withdrawn 200. New balance: 1300
console.log(myAccount.getBalance()); // Output: 1300
```

**3. Inheritance**\
In JavaScript, inheritance is achieved through prototype chaining. Each object has a prototype object, which [acts as](https://answers.mindstick.com/qa/51373/what-were-president-johnson-s-first-official-acts-as-president) a template for properties and methods that the object inherits. Prototypes allow objects to inherit from other objects.

```javascript
// Parent constructor
function Vehicle(make, model) {
   this.make = make;
   this.model = model;
}
// Adding a method to the prototype
Vehicle.prototype.start = function() {
   console.log(`Starting ${this.make} ${this.model}`);
};
// Child constructor inheriting from Vehicle
function Car(make, model, color) {
   Vehicle.call(this, make, model); // Call the parent constructor
   this.color = color;
}
// Inherit Vehicle's prototype
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // Set correct constructor
// Adding a method to the child prototype
Car.prototype.drive = function() {
   console.log(`Driving ${this.color} ${this.make} ${this.model}`);
};
// Creating instances
let myCar = new Car('Toyota', 'Corolla', 'blue');
myCar.start(); // Output: Starting Toyota Corolla
myCar.drive(); // Output: Driving blue Toyota Corolla
```

**4. Polymorphism**\
Polymorphism in JavaScript refers to the ability of different objects to respond to the same message (method invocation) in different ways. This is achieved through [method overriding](https://www.mindstick.com/articles/12227/method-overloadind-and-method-overriding-in-c-sharp) and dynamic method binding.

```javascript
// Parent class
class Animal {
   speak() {
       console.log('Animal makes a sound');
   }
}
// Child classes with overridden methods
class Dog extends Animal {
   speak() {
       console.log('Dog barks');
   }
}
class Cat extends Animal {
   speak() {
       console.log('Cat meows');
   }
}
// Polymorphic behavior
let dog = new Dog();
let cat = new Cat();
dog.speak(); // Output: Dog barks
cat.speak(); // Output: Cat meows
```

**5. Abstraction**\
Abstraction in JavaScript involves hiding the complexity of objects and exposing only the [essential features](https://answers.mindstick.com/qa/101965/what-are-the-essential-features-of-a-smart-home-hub). This allows developers to work with objects at a higher level without worrying about their internal details.

```javascript
// Abstract class (using function constructor)
function Shape() {
   if (this.constructor === Shape) {
       throw new Error('Cannot instantiate abstract class');
   }
}
// Abstract method
Shape.prototype.area = function() {
   throw new Error('Abstract method not implemented');
};
// Concrete classes inheriting from Shape
class Rectangle extends Shape {
   constructor(width, height) {
       super();
       this.width = width;
       this.height = height;
   }
   area() {
       return this.width * this.height;
   }
}
class Circle extends Shape {
   constructor(radius) {
       super();
       this.radius = radius;
   }
   area() {
       return Math.PI * this.radius * this.radius;
   }
}
// Using concrete classes
let rect = new Rectangle(5, 10);
console.log(rect.area()); // Output: 50
let circle = new Circle(5);
console.log(circle.area()); // Output: ~78.54
```

---

Original Source: https://www.mindstick.com/blog/304383/explain-the-concept-oops-in-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.