Code examples of SOLID principles for JavaScript

solid.js

/*
Code examples from the article: S.O.L.I.D The first 5 priciples of Object Oriented Design with JavaScript
https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa#.7uj4n7rsa
*/

const shapeInterface = (state) => ({
  type: 'shapeInterface',
  area: () => state.area(state)
})

const solidShapeInterface = (state) => ({
  type: 'solidShapeInterface',
  volume: () => state.volume(state)
})

const manageShapeInterface = (fn) => ({
  type: 'manageShapeInterface',
  calculate: () => fn()
})

const square = (length) => {
  const proto = {
    length,
    type : 'Square',
    area : (args) => Math.pow(args.length, 2)
  }
  const basics = shapeInterface(proto)
  const abstraccion = manageShapeInterface(() => basics.area())
  const composite = Object.assign({}, basics, abstraccion)
  return Object.assign(Object.create(composite), {length})
}

const circle = (radius) => {
  const proto = {
    radius,
    type: 'Circle',
    area: (args) => Math.PI * Math.pow(args.radius, 2)
  }

  const basics = shapeInterface(proto)
  const abstraccion = manageShapeInterface(() => basics.area())
  const composite = Object.assign({}, basics, abstraccion)
  return Object.assign(Object.create(composite), {radius})
}

const cubo = (length) => {
  const proto = {
    length,
    type   : 'Cubo',
    area   : (args) => Math.pow(args.length, 2),
    volume : (args) => Math.pow(args.length, 3)
  }
  const basics  = shapeInterface(proto)
  const complex = solidShapeInterface(proto)
  const abstraccion = manageShapeInterface(() => basics.area() + complex.volume())
  const composite = Object.assign({}, basics, abstraccion)
  return Object.assign(Object.create(composite), {length})
}

const areaCalculator = (s) => {
  const proto = {
    type: 'areaCalculator',
    sum() {
      const area = []
      for (shape of this.shapes) {
        area.push(shape.calculate())
      }
      return area.reduce((v, c) => c += v, 0)
    }
  }

  return Object.assign(Object.create(proto), {shapes: s})
}

const volumeCalculator = (s) => {
  const proto = {
    type: 'volumeCalculator'
  }
  const areaCalProto = Object.getPrototypeOf(areaCalculator())
  const inherit = Object.assign({}, areaCalProto, proto)
  return Object.assign(Object.create(inherit), {shapes: s})
}

const sumCalculatorOputter = (a) => {
  const proto = {
    JSON() {
      return JSON.stringify(this.calculator.sum())
    },
    HAML() {
      return `HAML format output`
    },
    HTML() {
      return `
        <h1>
          Sum of the areas of provided shapes:
          ${this.calculator.sum()}
        </h1>`
    },
    JADE() {
      return `JADE format output`
    }
  }
  return Object.assign(Object.create(proto), {calculator: a})
}

const shapes = [
  circle(2),
  square(5),
  square(6)
]

const solids = [
  cubo(4)
]

const areas  = areaCalculator(shapes)
const volume = volumeCalculator(solids)

const output = sumCalculatorOputter(areas)
const output2 = sumCalculatorOputter(volume)

console.log(output.JSON())
console.log(output.HAML())
console.log(output.HTML())
console.log(output2.HTML())
console.log(output.JADE())

Thanks for the gist and article Cristian ^
I was only familiar with the const fn = () => { ... } notation.
What's the name of the const fn = () => ( { object } ) notation used here?
Cheers.

@leotm it's called "arrow functions" or "lambda expression"
If you asked about it :)

@leotm, In order to return an object from the arrow function, you need to wrap it in parenthesis so that the objects opening and closing braces are not confused for the functional body.

Great article! I was just experimenting with Object.freeze and noticed that this setup would not work with Object.freeze. However, freeze is new to me and I wonder if freeze would make sense in a factory pattern? Do you have an opinion about that, @crizstian? Thanks!

Great article Cristian ^, this article made me believe that I can code solutions to problem one day myself. Thanks for providing the code as a separate gist.

Thanks for share the article, I feel that applying solid in javascript does not have the same effect as in a poo language, the use of the object.assign does not convince m at all I would have expected to see "class". I think that the best way in js to make a robust and solid code is to aim at functional programming.

Great article!

Hi @crizstian This is kind of a silly question, probably and You most likely already touched on this in the article, but how would you handle multiple interfaces similar to the example found here for c#

https://learn.microsoft.com/en-us/dotnet/csharp/programming-guide/interfaces/how-to-explicitly-implement-members-of-two-interfaces

If you don't mind clarifying this that would be great. Thanks