JS: Object-Oriented Programming in JavaScript

Basic OOP Concepts

The four basic concepts of OOP are:

• Encapsulation
• Inheritance
• Abstraction
• Polymorphism

Before the release of OOP, functional programming was the dominant programming paradigm. However, as programs grew larger and more complex, managing them became increasingly difficult. This was due to the fact that many functions were interconnected and changes to one function could have ripple effects throughout the entire program. This resulted in what is commonly referred to as "spaghetti code."

To address this problem, the OOP paradigm was developed. In OOP, functions and variables are combined into objects, which consist of methods (functions) and properties (variables).

Encapsulation

Wikipedia defines it:

In object-oriented programming (OOP), encapsulation refers to the bundling of data with the methods that operate on that data, or the restricting of direct access to some of an object’s components. Encapsulation is used to hide the values or state of a structured data object inside a class, preventing unauthorized parties’ direct access to them. Publicly accessible methods are generally provided in the class (so-called “getters” and “setters”) to access the values, and other client classes call these methods to retrieve and modify the values within the object.

Simply, data in class are manipulated by the method(setter) and retrieve by the method(getter) to ensure that we control the data and validate it. In JavaScript, encapsulation is achieved by defining properties as private or public. Private properties can only be accessed and modified within the class itself, while public properties can be accessed and modified from outside the class.

Inheritance

Inheritance in JavaScript OOP allows for the creation of new classes based on existing classes. This means that a child class (the newly created class) inherits all the properties and methods from its parent class (the existing class).

Inheritance is useful because it allows us to avoid redundant code. For example, if we want to create a class that describes a person and another class that describes a student, we can create the student class by inheriting from the person class. This way, the student class automatically inherits all the properties and methods of the person class, such as name and age.

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
}

class Student extends Person {
	constructor(name, age, school_id, classes) {
		super(name, age);
		this.school_id = school_id;
		this.classes = classes;
	}
}

Abstraction

Abstraction is a way of hiding the implementation details of a class and exposing only the necessary functionalities to the user. This allows the user to interact with the class without needing to know the details of how it works.

In JavaScript, abstraction is achieved by using interfaces or abstract classes. These are classes that define a set of methods that must be implemented by any class that inherits from them.

Polymorphism

Polymorphism is the ability of a function to take on different forms depending on the context in which it is used. In OOP, polymorphism allows for the same method name to be used in different contexts with different implementations.

For example, in a class hierarchy with a base class and several derived classes, a method with the same name can be used in each class but with different functionality. This is known as method overriding.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getInfo() {
    return `Name: ${this.name}, Age: ${this.age}`;
  }
}

class Student extends Person {
  constructor(name, age, school_id, classes) {
    super(name, age);
    this.school_id = school_id;
    this.classes = classes;
  }

  getInfo() {
    return `Name: ${this.name}, Age: ${this.age}, School ID: ${this.school_id}, Classes: ${this.classes}`;
  }
}

const person = new Person('Minwoo Gwak', 25);
console.log(person.getInfo()); 

const student = new Student('Minwoo Gwak', 21, 999999, ['Computer Science', 'Mathematics']);
console.log(student.getInfo());