add composition vs inheritance

Author: arpitmehrotra

README.md

@@ -19,3 +19,5 @@
 9. **Interface Segregation Principle** - The main idea of the interface segregation principle is that any class that implements an interface must use all functions/properties of the interface. JavaScript does not have actual interfaces, but a class inheritance structure is similar enough. This means that any class that inherits from another class needs to use all of the methods/properties from the base class. This encourages writing small classes instead of large classes.
 
 10. **Dependency Inversion Principle** - The main idea of the dependency inversion principle is that any class that uses a dependency should only ever use the dependency through a predefined interface/wrapper. This makes it so that your code will never directly depend on a low level API for its operations. The reason this is so important is because if you ever need to change or remove that dependency it becomes really difficult when it is used all over your code. By wrapping this dependency in an interface you can depend on the interface you created which will make changing out the dependency painless.
+
+11. **Inheritance vs Composition** - With inheritance, you describe exactly what objects are and how they're related to each other but with composition, you're describing what an object can do.

composition-vs-inheritance/after.js

@@ -0,0 +1,51 @@
+function swimmer({ name }) {
+  return {
+    swim: () => console.log(`${name} swam`),
+  };
+}
+
+function flyer({ name }) {
+  return {
+    fly: () => console.log(`${name} flew`),
+  };
+}
+
+function attackerAndWalker({ name }) {
+  return {
+    attack: () => console.log(`${name} attacked`),
+    walk: () => console.log(`${name} walked`),
+  };
+}
+
+function swimmingMonsterCreator(name) {
+  const monster = { name };
+  return {
+    ...monster,
+    ...attackerAndWalker(monster),
+    ...swimmer(monster),
+  };
+}
+
+function flyingSwimmingMonsterCreator(name) {
+  const monster = { name };
+  return {
+    ...monster,
+    ...swimmer(monster),
+    ...attackerAndWalker(monster),
+    ...flyer(monster),
+  };
+}
+
+const obj = swimmer({ name: "Fish" });
+obj.swim();
+
+const swimmingObj = swimmingMonsterCreator("Swim Monster");
+swimmingObj.swim();
+swimmingObj.attack();
+swimmingObj.walk();
+
+const flyingswimmingObj = flyingSwimmingMonsterCreator("Flyer Swimmer Monster");
+flyingswimmingObj.swim();
+flyingswimmingObj.fly();
+flyingswimmingObj.attack();
+flyingswimmingObj.walk();

composition-vs-inheritance/before.js

@@ -0,0 +1,49 @@
+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`);
+  }
+}
+
+// Code gets duplicated here as we are following inheritance
+class FlyingSwimmingMonster extends Monster {
+  fly() {
+    console.log(`${this.name} flew`);
+  }
+  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();