[구조 패턴] 데코레이터 패턴

📕 구조 패턴(Structural Pattern)이란?

클래스나 객체를 조합해 더 큰 구조를 만드는 패턴으로 예를 들어 서로 다른 인터페이스를 지닌 2개의 객체를 묶어 단일 인터페이스를 제공하거나 객체들을 서로 묶어 새로운 기능을 제공하는 패턴이다.

📗 데코레이터 패턴 이해 및 예제

사용목적

원래의 객채(Body)의 수정없이 객체를 확장할 수 있다.

특징

원래의 몸체[(body)를 인자로 받아와서 내용을 확장해서 할당.
데코레이터 패턴은 상속(Inheritance)과 합성(Composition)을 사용하여 객체에 동적으로 책임을 추가할 수 있게 합니다.
이 방법은 서브 클래스를 생성하는 것보다 유연한 방법을 제공함.

예제1 Class 형식

//1. class형
class Body {
  constructor () {
    this.item = ['apple'];
  }

  getting(){
    return this.item;
  }
}
let body = new Body()
body.getting() //[ 'apple' ])


class Arm {
  constructor (body) {
    this.body = body;
    this.item = ['banana'];
  }

  getting(){
    return [...this.body.getting(),...this.item];
  }
}
body = new Arm(body) 
body.getting() //[ 'apple', 'banana' ]

예제1 Class 상속 사용

//상속 사용 (클래스의 중복을 없애기 위해 상속 해서 addonDecorator기능으로 여러개 생성가능)
class AddonDecorator { //추상클래스 
  constructor(baseBody){
    this.baseBody = baseBody;
  }

  getting(){
    return [...this.baseBody.getting(),...this.item];
  }
}

class Leg extends AddonDecorator {
  constructor (body) {
    super(body)
    this.item = ['orange'];
  }
}

class Foot extends AddonDecorator {
  constructor (body) {
    super(body)
    this.item = ['grape'];
  }
}

body = new Leg(body)
body.getting() // [ 'apple', 'banana', 'orange' ]
body = new Foot(body)
body.getting() //[ 'apple', 'banana', 'orange', 'grape' ]

예제2 함수 형식

[js] 함수합성(Function Composition)

//함수 합성

const pipe = (...fnc) => (x) => fnc.reduce((y, f) =>{
  //y는 누산값
  //f는 순서대로 실행되는 함수
  console.log(f)
  return f(y)
}, x)
//reduce두번째 인수x 는initialValue(초기값)



const pipe2 = (...fnc) => (x) => fnc.reduce((init,f)=>f(init),x) 

const fnc1 = () => {
  const item = ['apple']
  return item
}
const fnc2 = (baseItem) => {
  const item = ['banana']
  return [...baseItem,...item] //base인자 받고 합쳐줭
}
const fnc3 = (baseItem) => {
  const item = ['orange']
  return [...baseItem,...item]
}

pipe2(fnc1,fnc2,fnc3)() //[ 'apple', 'banana', 'orange' ]
pipe2(fnc1,fnc2)() //[ 'apple', 'banana']