[JavaScript] Decorator

 Decorator Pattern(데코레이터 패턴)은 "주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 유연한 대안이 될 수 있다." 고 위키백과에 정의되어 있습니다. 객체의 함수 혹은 전역 함수의 기능을 새로 붙여서 사용하거나 기능을 수정할 때 사용한다고 생각합니다. 

 

 다음 예제를 통해 데코레이터를 좀 더 알아보고, 자바스크립트에서 데코레이터 패턴을 사용하기 위한 방법을 제시해보도록 하겠습니다. 

 

 

# Contents

---

• 자바스크립트에서 Decorator Pattern

 

 

# 자바스크립트에서 Decorator Pattern

---

 먼저 기본적인 흐름에 대해 알아보도록 하겠습니다. 아래 그림을 보면서 설명하도록 하죠.

 

 

 위의 예제는 ProcessMath 객체를 하나 생성합니다.

 객체에는 findMax 함수와 Something 함수가 존재합니다. 

 

 findMax 함수는 값 2개를 얻어서 max값을 찾는 함수입니다. Something 함수는 "hello world"를 출력하는 함수입니다. 

 

 또한 ProcessMath 안에 함수 혹은 전역변수에 정의된 함수를 받아 캐시해주는 DecoratorPattern 함수를 정의해보았습니다.

 이 함수를 통해서 ProcessMath의 findMax 함수를 데코레이터 해보고, 어떠한 부분에서 실용성이 있는 지 알아보겠습니다.

 

1. Source Code

let processMath = {
    findMax(min, max) {
        console.log(this.something());
        console.log(`min : ${min} , max : ${max}`);
        return max;
    },

    something() {
        return "hello world";
    },
};

function decoratorPattern(func, hash) {
    let cache = new Map();
    return function () {
        let key = hash(...arguments);

        if (cache.has(key)) {
            return cache.get(key);
        }

        let result = func.call(this, ...arguments);

        cache.set(key, result);
        return result;
    };
}

function hashFuncion(arg1, arg2) {
    return `${arg1},${arg2}`;
}

processMath.findMax = decoratorPattern(processMath.findMax, hashFuncion);
console.log(`find Max result : ${processMath.findMax(5, 10)}`);
console.log(`find Max result recall : ${processMath.findMax(5, 10)}`);

 

2. Analyze

 ProcessMath 객체는 findMax 함수와 something 함수가 존재합니다. decoratorPattern을 통해 ProcessMath.findMax 함수를 캐싱하는 코드입니다. DecoratorPattern 함수에서는 첫번째 인자에서 findMax 함수를 두번째 인자에서는 Argument를 일정한 키로 바꿔주는 함수를 받고 있으며, 만들어진 함수를 통해 Argument로 들어온 인자들을 키로 사용하여 키의 대한 값이 있으면 캐싱해서 보여주는 역할을 합니다. 

 

 아주 간단한 코드이지만 엄청나게 효율적인 코드입니다.

 

 예를 들어 많은 로직 처리가 있는 함수를 캐싱하게 된다면 그만큼의 메모리의 효율을 차지할 수 있으며 소스코드 또한 매력적으로 변할 수 있습니다. 남들이 이해하기 보다 쉬운 코드를 짜는 것과 정해진 자원 내에서 효율적인 코드를 작성하는 것이 프로그래머의 기초 역량 중 하나라고 생각합니다.