The modern JavaScript with the ES6 syntax and the rise of the popularity like ReactJS, functional programming becomes more and more common. When using React, one of the common practice is to use composition instead of inheritance.
Because I started learning programming when the OOP was the most prevailing paradigm, I was trained to solve the problem by using OOP concepts like polymorphoism, inheritance, encapsulation, etc.
I think JS is the most interesting programming language in the modern technology. It supports server-side and client-side development. With the ES6, it supports OOP keywords like class and also using FP (functional programming) syntax like fat arrow (=>).
In OOP, the most common usage is the inheritance and polymorphoism. The following is an example of inheritance in JS,
class Shape {
constructor(w, h) {
this.width = w;
this.height = h;
}
area() {
return this.width * this.height;
}
}
class Rectangle extends Shape {
constructor(w, h) {
super(w, h);
}
}
class Triangle extends Shape {
constructor(w, h) {
super(w, h);
}
area() {
return super.area() / 2;
}
}
function main() {
const rectangle = new Rectangle(4, 5);
const triangle = new Triangle(4, 5);
console.log('Rectangle area: ', rectangle.area());
console.log('Triangle area: ', triangle.area());
}
main();
The shape area calculation can be re-written to composition instead of inheritance as followings,
class Rectangle {
constructor(w, h) {
this.width = w;
this.height = h;
}
area() {
return this.width * this.height;
}
}
class Triangle {
constructor(w, h) {
this.width = w;
this.height = h;
}
area() {
const rect = new Rectangle(this.width, this.height);
return rect.area() / 2;
}
}
Therefore, Rectangle and Triangle do not inherit from Shape. In fact, Triangle uses Rectangle to calculate the area. This is the object composition, and it is same as the way of composition in React. Furthermore, one of the greatest features of JS is closure. This allows React to pass a function with specific logic as a parameter to a generic component. Thus, the generic component can be designed without the prior knowledge of the business/application logic. This will produce a result similar to method override in OOP.
Moreover, the object composition can be re-written to function composition as FP.
const rectangleArea = (w, h) => w * h; // In math, f(x,y) = x * y
const halving = (area) => area / 2; // In math, g(x) = x / 2
const triangleArea = (w, h) => halving(rectangleArea(w, h)); // In math, h(x,y) = g(f(x,y)) = f(x,y) / 2
function main() {
console.log('Rectangle area: ', rectangleArea(4, 5));
console.log('Triangle area: ', triangleArea(4, 5));
}
main();
Blogarious 