Object-Oriented Programming in JavaScript
Object-Oriented Programming (OOP) is a programming paradigm that uses objects and classes to structure and organize code. JavaScript supports OOP principles like encapsulation, inheritance, and polymorphism.
Classes and Objects
A class is a blueprint for creating objects. An object is an instance of a class.
// Class and Object Example
class Dog {
constructor(name, breed) {
this.name = name;
this.breed = breed;
}
bark() {
return "Woof!";
}
}
const myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.bark()); // Output: Woof!
Inheritance
Inheritance allows a class to inherit properties and methods from another class. The extends
keyword is used.
// Inheritance Example
class Animal {
speak() {
return "Animal sound";
}
}
class Cat extends Animal {
speak() {
return "Meow";
}
}
const myCat = new Cat();
console.log(myCat.speak()); // Output: Meow
Encapsulation
Encapsulation is the bundling of data and methods that operate on the data into a single unit (class). In JavaScript, encapsulation can be achieved using closures or private fields (introduced in ES2022).
// Encapsulation Example
class Person {
#name; // Private field
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}
const person = new Person("Alice");
console.log(person.getName()); // Output: Alice
// console.log(person.#name); // Error: Private field cannot be accessed outside the class
Polymorphism
Polymorphism allows methods to behave differently based on the object that calls them. It is achieved through method overriding.
// Polymorphism Example
class Animal {
speak() {
return "Animal sound";
}
}
class Dog extends Animal {
speak() {
return "Woof!";
}
}
class Cat extends Animal {
speak() {
return "Meow";
}
}
const animals = [new Dog(), new Cat()];
animals.forEach(animal => console.log(animal.speak()));
// Output: Woof!
// Meow
Abstraction
Abstraction is the concept of hiding complex implementation details and exposing only the necessary features. In JavaScript, abstraction can be achieved using classes and interfaces (via TypeScript or design patterns).
// Abstraction Example
class Shape {
draw() {
throw new Error("Method 'draw()' must be implemented.");
}
}
class Circle extends Shape {
draw() {
return "Drawing a circle.";
}
}
const circle = new Circle();
console.log(circle.draw()); // Output: Drawing a circle.
Static Methods and Properties
Static methods and properties belong to the class itself rather than instances of the class. They are accessed using the class name.
// Static Methods and Properties Example
class MathUtils {
static PI = 3.14;
static square(num) {
return num * num;
}
}
console.log(MathUtils.PI); // Output: 3.14
console.log(MathUtils.square(5)); // Output: 25
Getters and Setters
Getters and setters allow you to define methods to get or set the value of an object's properties.
// Getters and Setters Example
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(newName) {
this._name = newName;
}
}
const person = new Person("Alice");
console.log(person.name); // Output: Alice
person.name = "Bob";
console.log(person.name); // Output: Bob
Back to Tutorial