liskov substitution Good example as functions

Author: DavidVujic

README.md

@@ -1242,68 +1242,43 @@ renderLargeRectangles(rectangles);
 
 **Good:**
 ```javascript
-class Shape {
-  setColor(color) {
+function makeShape() {
+  function setColor(color) {
     // ...
   }
 
-  render(area) {
+  function render(area) {
     // ...
   }
-}
 
-class Rectangle extends Shape {
-  constructor() {
-    super();
-    this.width = 0;
-    this.height = 0;
-  }
-
-  setWidth(width) {
-    this.width = width;
-  }
+  return {
+    setColor,
+    render
+  };
+}
 
-  setHeight(height) {
-    this.height = height;
-  }
+function makeRectangle(width, height) {
+  let shape = makeShape();
+  shape.getArea = () => width * height;
 
-  getArea() {
-    return this.width * this.height;
-  }
+  return shape;
 }
 
-class Square extends Shape {
-  constructor() {
-    super();
-    this.length = 0;
-  }
-
-  setLength(length) {
-    this.length = length;
-  }
+function makeSquare(length) {
+  let shape = makeShape();
+  shape.getArea = () => length * length;
 
-  getArea() {
-    return this.length * this.length;
-  }
+  return shape;
 }
 
 function renderLargeShapes(shapes) {
   shapes.forEach((shape) => {
-    switch (shape.constructor.name) {
-      case 'Square':
-        shape.setLength(5);
-        break;
-      case 'Rectangle':
-        shape.setWidth(4);
-        shape.setHeight(5);
-    }
-
     const area = shape.getArea();
     shape.render(area);
   });
 }
 
-const shapes = [new Rectangle(), new Rectangle(), new Square()];
+const shapes = [makeRectangle(3, 4), makeRectangle(4, 5), makeSquare(4)];
 renderLargeShapes(shapes);
 ```
 **[⬆ back to top](#table-of-contents)**

examples/liskov-substitution-GOOD.js

@@ -0,0 +1,38 @@
+function makeShape() {
+  function setColor(color) {
+    // ...
+  }
+
+  function render(area) {
+    // ...
+  }
+
+  return {
+    setColor,
+    render
+  };
+}
+
+function makeRectangle(width, height) {
+  let shape = makeShape();
+  shape.getArea = () => width * height;
+
+  return shape;
+}
+
+function makeSquare(length) {
+  let shape = makeShape();
+  shape.getArea = () => length * length;
+
+  return shape;
+}
+
+function renderLargeShapes(shapes) {
+  shapes.forEach((shape) => {
+    const area = shape.getArea();
+    shape.render(area);
+  });
+}
+
+const shapes = [makeRectangle(3, 4), makeRectangle(4, 5), makeSquare(4)];
+renderLargeShapes(shapes);