어떤 객체에서 다른 클래스를 의존하고자 할 때 구상 클래스에 의존하지 말고 인터페이스와 같이 추상화 된 것에 의존하라는 법칙이다. DIP에서 의존성은 객체간에 의존성을 말한다. 이를 역전한다는 것의 의미는 구상클래스에 의존하는 부분을 추상화한 클래스나 인터페이스로 의존하도록 하여, 의존 관계를 추상화로 역전시켰다는 것이다. 코드로 보자

const Renderer = class {
  constructor() {}

  _render() {
    throw "override method!";
  }

  render() {
    this._render();
  }
};

const TableRenderer = class extends Renderer {
  constructor() {
    super();
  }

  _render() {
    console.log("table render!");
  }
};

const ConsoleRender = class extends Renderer {
  constructor() {
    super();
  }

  _render() {
    console.log("console render!");
  }
};

rendering = (renderType) => {
  let render;
  if (renderType == "tableRender") {
    render = new TableRenderer();
  } else if (renderType == "consoleRender") {
    render = new ConsoleRender();
  }

  render.render();
};

rendering("tableRender");
rendering("consoleRender");

어떤 데이터를 받아 render하는 클래스를 만들었다. Renderer 클래스를 추상 클래스로 만들고 이를 확장하는 클래스 TableRendererConsoleRenderer를 만들었다. 위 코드는 DIP를 만족한다. 특정 클래스인 TableRendererConsoleRenderer에 의존하는 것이 아니라 Renderer클래스에 의존하게 하고 내부 구현은 각 클래스의 _render()메소드를 오버라이딩하여 구현하도록 했다. 새로운 렌더러가 필요하다면 Renderer클래스를 구현한 클래스를 만드면 해결되도록 하여 변경에 용이하게 되었다.

참고