javascript_in_depth_14

디자인 패턴 실용 - 커링 패턴

커링 패턴은 함수를 설계할 떄 인자 전체를 넘겨서 호출할 수도 있지만, 일부 인자는 먼저 입력해두고 나머지만 입력받을 수 있도록 새로운 함수를 만드는 패턴을 의미한다. 특히, 자바스크립트에서는 클로저가 있어서 먼저 일부 입력된 값을 유지하고, 가지고 있는 것을 아주 쉽게 구현할 수 있기 때문에 자바스크립트에서 유용하게 사용할 수 있는 패턴이다.

활용

커링 패턴은 자바스크립트의 언어적인 특징 때문에 아주 쉽게 구현할 수 있으며, 인자가 많은 공통 라이브러리를 사용할 때 유용하게 활용할 수 있다는 장점이 있다. 하지만 클로저도 그렇지만 프로그램이 돌아가는 순서를 쫒아가기에는 조금 힘들 수도 있다는 단점이 있으니 개발 효율성과 소스 관리에 대한 균형을 잘 맞춰야 한다.

예제

// 커링 패턴을 이용한 단위 변환
(function () {
    Function.prototype.curry = function() {
        if (arguments.length<1) {
            return this;
        }
        var _this = this,
            args = Array.prototype.slice.apply(arguments);
        return function() {
            return _this.apply(this, args.concat(Array.prototype.slice.apply(arguments)));
        }
    }

    function unitConvert(fromUnit, toUnit, factor, input) {
        return `${input} ${fromUnit} === ${(input*factor).toFixed(2)} ${toUnit}`;
    }

    var cm2inch = unitConvert.curry('cm', 'inch', 0.393701),
        metersquare2pyoung = unitConvert.curry('m^2', 'pyoung', 0.3025),
        kg2lb = unitConvert.curry('kg', 'lb', 2.204623),
        kmph2mph = unitConvert.curry('km/h', 'mph', 0.621371);

    console.log(cm2inch(10));
    console.log(metersquare2pyoung(30));
    console.log(kg2lb(50));
    console.log(kmph2mph(100));
}());

// XMLHttpRequest를 위한 커링 패턴
(function () {
    Function.prototype.curry = function() {
        if (arguments.length<1) {
            return this;
        }
        var _this = this,
            args = Array.prototype.slice.apply(arguments);
        return function() {
            return _this.apply(this, args.concat(Array.prototype.slice.apply(arguments)));
        }
    }

    function ajax(method, url, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status === 200) {
                callback.call(this, xhr.responseText);
            }
        }
        xhr.send(data);
    }

    var ajaxGet = ajax.curry("GET"),
        ajaxPost = ajax.curry("POST"),
        ajaxPut = ajax.curry("PUT"),
        ajaxDelete = ajax.curry("DELETE");

    ajaxGet("/data", null, function (responseText) {
        console.log(responseText);
    });
}());