Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hrmrakib/oop-in-js
https://github.com/hrmrakib/oop-in-js
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hrmrakib/oop-in-js
- Owner: hrmrakib
- Created: 2024-12-06T10:58:19.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2024-12-08T04:23:47.000Z (16 days ago)
- Last Synced: 2024-12-08T05:19:13.731Z (15 days ago)
- Language: JavaScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Learning Object-Oriented Programming (OOP) in JavaScript is an excellent step for a beginner to master JavaScript more deeply. I'll guide you step-by-step, starting with the key concepts.
---
### **Important Concepts to Learn in OOP**
1. **Objects**: Fundamental units of OOP.
2. **Classes**: Templates for creating objects.
3. **Properties**: Characteristics of an object (data fields).
4. **Methods**: Functions associated with an object.
5. **Encapsulation**: Keeping data safe within an object.
6. **Inheritance**: Sharing properties and methods between classes.
7. **Polymorphism**: Using the same method name in different ways.
8. **Abstraction**: Hiding complex details and showing essential features.
9. **`this` Keyword**: Refers to the current object.
10. **Prototypes**: Mechanism for inheritance in JavaScript.
---
### **Detailed Explanation of OOP in JavaScript**
#### **1. Objects**
- In JavaScript, objects are collections of key-value pairs.
- Example:
```javascript
const person = {
name: "John",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet(); // Output: Hello, my name is John.
```
---
#### **2. Classes**
- A `class` is a blueprint for creating objects.
- Example:
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const john = new Person("John", 30);
john.greet(); // Output: Hello, my name is John.
```
---
#### **3. Encapsulation**
- Restrict access to certain parts of an object using private fields or methods.
- Example:
```javascript
class BankAccount {
#balance; // Private field
constructor(balance) {
this.#balance = balance;
}
deposit(amount) {
this.#balance += amount;
console.log(`Deposited ${amount}. Current balance: ${this.#balance}`);
}
getBalance() {
return this.#balance;
}
}
const account = new BankAccount(100);
account.deposit(50); // Output: Deposited 50. Current balance: 150
console.log(account.getBalance()); // Output: 150
```
---
#### **4. Inheritance**
- One class (child) can inherit properties and methods from another class (parent).
- Example:
```javascript
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
makeSound() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Buddy");
dog.makeSound(); // Output: Buddy barks.
```
---
#### **5. Polymorphism**
- Methods in child classes can override parent class methods.
- Example:
```javascript
class Shape {
calculateArea() {
console.log("Calculating area...");
}
}
class Circle extends Shape {
calculateArea(radius) {
console.log(`Area of circle: ${Math.PI * radius * radius}`);
}
}
const circle = new Circle();
circle.calculateArea(5); // Output: Area of circle: 78.53981633974483
```
---
#### **6. Abstraction**
- Use abstract-like behavior by creating a base class with general methods and letting child classes define the specifics.
- Example:
```javascript
class Vehicle {
start() {
console.log("Starting vehicle...");
}
}
class Car extends Vehicle {
start() {
console.log("Car is starting...");
}
}
const myCar = new Car();
myCar.start(); // Output: Car is starting...
```
---
#### **7. `this` Keyword**
- Refers to the object that calls the method.
- Example:
```javascript
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
console.log(this.count);
}
}
const counter = new Counter();
counter.increment(); // Output: 1
```
---
#### **8. Prototypes**
- Every JavaScript object has a prototype from which it can inherit methods and properties.
- Example:
```javascript
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log(`Hello, my name is ${this.name}.`);
};
const john = new Person("John");
john.greet(); // Output: Hello, my name is John.
```
---
### **Summary**
To master OOP in JavaScript:
1. Start with objects and classes.
2. Understand encapsulation for data safety.
3. Learn inheritance and polymorphism for code reuse.
4. Practice with real-world examples, like building classes for e-commerce items, users, etc.
Would you like to explore advanced examples or ask about any specific concept?