1. Classes and Objects
In JavaScript, a class is essentially a blueprint for creating objects. It defines the structure (properties) and behavior (methods) that the objects created from the class will have.
- Class: It is a function that defines a template for creating objects. A class contains:
- Properties (or attributes) that store data. Methods (or functions) that define the behaviors/actions the object can perform.
- Object: An instance of a class. It is created using the new keyword, and it can access the class properties and methods.
Code Example
class Person {
constructor(name, age) {
this.name = name; // property
this.age = age; // property
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person = new Person(‘John Doe’, 30);
person.greet();
Output: Hello, my name is John Doe and I am 30 years old.
* In the above example, Person is the class. name and age are properties, and greet() is a method that is used to introduce the person.
2. Constructors
A constructor is a special method in a class that is automatically invoked when a new object is created from that class. It is typically used to initialize the object’s properties.
- Syntax: The constructor is defined using the constructor keyword within the class.
- Usage: It allows you to pass values when creating an object to set the initial state (values) of the properties.
Code Example
class Person {
constructor(name, age) {
this.name = name; // sets the name property
this.age = age; // sets the age property
}
}
const person = new Person(‘Alice’, 25);
console.log(person.name);
Output: Alice
console.log(person.age);
Output: 25
3. Properties
Properties are the data members of an object. They store the current state or attributes of an object. Each object can have its own unique set of properties.
Code Example
class Car {
constructor(make, model) {
this.make = make; // Property
this.model = model; // Property
}
}
const car = new Car(‘Toyota’, ‘Corolla’);
console.log(car.make);
Output: Toyota
console.log(car.model);
Output: Corolla
Here, make and model are properties that store the data about the car.
4. Methods
Methods are the functions defined inside a class that describe the actions or behaviors of an object. These methods can manipulate the object’s properties or perform specific tasks.
Code Example
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person = new Person(‘Bob’, 35);
person.greet();
Output: Hello, my name is Bob and I am 35 years old.
Here, greet() is a method that prints the greeting message, using the object’s properties.
5. Inheritance
Inheritance is the concept where a class can inherit properties and methods from another class. This helps avoid code duplication by allowing one class (child class) to reuse the properties and methods of another class (parent class).
- The extends keyword is used to create a subclass.
- The super() function is used to call the constructor of the parent class.
Code Example
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Call parent constructor
this.breed = breed;
}
bark() {
console.log(`${this.name} is barking.`);
}
}
const dog = new Dog(‘Max’, ‘Golden Retriever’);
dog.eat();
Output: Max is eating.
dog.bark();
Output: Max is barking.
Here, Dog inherits the eat() method from the Animal class, but it also has its own method bark().
6. Polymorphism
Polymorphism means “many shapes” in Greek, and in OOP, it allows different classes to implement the same method in different ways. The same method name behaves differently depending on the object.
- It can be achieved through method overriding where a subclass provides a specific implementation of a method already defined in its parent class.
Code Example
class Animal {
constructor(name) {
this.name = name;
}
sound() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
sound() {
console.log(`${this.name} barks.`);
}
}
class Cat extends Animal {
sound() {
console.log(`${this.name} meows.`);
}
}
const animals = [new Dog(‘Max’), new Cat(‘Whiskers’)];
animals.forEach(animal => {
animal.sound(); // Each animal makes a different sound.
});
The sound() method is implemented differently in the Dog and Cat subclasses, demonstrating polymorphism.
7. Encapsulation
Encapsulation is the concept of bundling the data (properties) and the methods (functions) that operate on the data into a single unit or class. It also involves restricting direct access to some of the object’s components, making the object more secure.
- Access to an object’s internal state is usually restricted, and it is only modified through methods (getters and setters).
Code Example
class BankAccount {
constructor(accountNumber, balance) {
this.accountNumber = accountNumber;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
}
getBalance() {
return this.balance;
}
}
const account = new BankAccount(‘1234567890’, 1000);
account.deposit(500);
console.log(account.getBalance());
Output: 1500
In this example, the balance property is encapsulated and can only be modified by calling the deposit() method or accessed via the getBalance() method.
8. Abstraction
Abstraction is the concept of hiding the complex implementation details and showing only the necessary and relevant features of an object. It focuses on what an object does, rather than how it does it.
- Abstract classes are often used to provide a common interface for all subclasses while hiding the details.
Code Example
class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
startEngine() {
console.log(‘The engine is started.’);
}
accelerate() {
console.log(‘The car is accelerating.’);
}
}
const car = new Car(‘Toyota’, ‘Camry’, 2015);
car.startEngine();
Output: The engine is started.
car.accelerate();
Output: The car is accelerating.
Here, the Car class provides an abstraction of the car’s operations. The user interacts with the methods startEngine() and accelerate(), without needing to understand the internal implementation of these actions.