Function Composition Vs Inheritance

Introduction

Function Composition is pretty much one of the most interesting topics in JavaScript Development. Every single math student would have come across composition in your Set Theory chapter, this function composition is similar to that. The main use case of function composition is that it helps us write clean code and makes the best use of the available code. Let us see why this is better than other approaches.

Inheritance

Let us see a situation where you have to create a video game with monsters. An ideal idea anyone would come up with is, to create a Monster class and use OOP concepts.

class Monster {
  constructor(name) {
    this.name = name;
  }
  attack() {
    console.log(`${this.name} attacked`);
  }
  walk() {
    console.log(`${this.name} walked`);
  }
}
class FlyingMonster extends Monster {
  fly() {
    console.log(`${this.name} flew`);
  }
}
class SwimmingMonster extends Monster {
  swim() {
    console.log(`${this.name} swam`);
  }
}

const bear = new Monster("bear");
bear.walk;
bear.attack();
const eagle = new FlyingMonster("eagle");
eagle.walk();
eagle.attack();
eagle.fly();
const shark = new SwimmingMonster("shark");
shark.walk();
shark.attack();
shark.swim();

Output:

bear walked
bear attacked
eagle walked
eagle attacked
eagle flew
shark walked
shark attacked
shark swam

Here flying monster and swimming monster are inherited from the parent monster class. Imagine a situation where you have to create a flying swimming monster.

You would inherit swimming monsters in your new class and create a copy of fly() function.

class FlyingSwimmingMonster extends SwimmingMonster {
    fly() {
      console.log(`${this. name} flew`)
    }
}

But this will not be efficient in a large codebase because the fly function is repeated and redundant. So to solve this problem. We have a very good approach in functional programming.

Functional Programming

//Functional Programming approach
// Destructuring the needed parameters for the function then returning a variable that points towards the function
function swimmer({ name }) {
  return {
    //here the arrow function will take teh paramater that swim function will take during the function call.
    swim: (speed) => console.log(`${name} swam with speed ${speed}`),
  };
}
function attackerAndwalker({ name }) {
  return {
    attack: () => console.log(`${name} attacked`),
    walk: () => console.log(`${name} attacked`),
  };
}
function flyer({ name }) {
  return {
    fly: () => console.log(`${name} flew`),
  };
}

function swimmingMonsterCreator(name) {
  const monster = { name: name };
  return {
    // using the spread operator here, we can add any new function to the object that is beaing created.
    ...monster,
    ...swimmer(monster),
    ...attackerAndwalker(monster),
  };
}
function flyingSwimmingMonsterCreator(name) {
  const monster = { name: name };
  return {
    ...monster,
    ...swimmer(monster),
    ...flyer(monster),
    ...attackerAndwalker(monster),
  };
}

const Dragon = flyingSwimmingMonsterCreator("Toothless");
Dragon.attack();
Dragon.swim(45);
Dragon.fly();

Output

Toothless attacked
Toothless swam with speed 45
Toothless flew

Here as you can see, each individual function has been coded in such a way that they can be spread using the "spread operator" wherever needed.

Conclusion

Functional programming is more suited for large code bases, where you want redundant code to be much less. Whereas, Object Oriented programming is more suited when you want your logic to be well segregated and preserved. I would really suggest you to read hacker noon's blog on function decomposition, because that gives more use cases on where it can be used.

Blog

Function Composition Vs Inheritance

Indira Kumar A K

Introduction

Inheritance

Functional Programming

Conclusion

Reference

Join Our Newsletter. No Spam, Only the good stuff.

Related