자바스크립트(Javascript) 함수의 기본 패턴들 (콜백, 메모이제이션, 커리)

자바스크립트 공부한 것들 정리한다. 이번에는 함수의 기본적인 패턴에 대해서 알아본다. 콜백패턴, 즉시실행 함수, 메모이제이션 패턴, 설정 객체 패턴, 커리에 대하여 간략하게 보자.

콜백패턴

function writeCode(callback) {
    ...
    callback();
}

콜백의 유효범위에서 콜백이 객체의 메서드인 경우가 많다. 콜백 메서드가 자신이 속해있는 객체를 참조하기 위해 this를 사용하면 예기치 않는 동작이 있을 수 있다. 콜백함수와 콜백이 있는 객체를 전달하고, call 메서드로 바인딩 한다.

즉시 실행 함수

함수가 선언되자마자 실행되도록 하는 문법.

(function () {
    alert('watch out!');
}());

구성

• 함수 표현식으로 선언
• 즉시 실행되도록 () 를 추가
• 전체 함수를 괄호로 감싼다.

객체 프로퍼티를 정의할 때도 사용. 전역변수를 남기지 않고 작업할 수 있어서 임시변수가 전역변수를 어지럽히지 않는다.

즉시객체 초기화

위와 비슷하게 init() 메서드를 실행해 객체를 사용.
일회성 작업에 적합하다. 완료되면 객체에 접근할 수 없음. 접근하고 싶다면 init마지막에 return this; 를 추가하면 됨

함수 프로퍼티 - 메모이제이션 패턴

함수 프로퍼티에 결과값을 캐시할 수 있다. 다음 호출 시 복잡한 연산을 거치지 않아도 되므로 반복을 줄인다.

함수이름, arguments.callee

설정 객체 패턴

깨끗한 API를 제공하는 방법.
함수의 전달인자가 많을 수 있다. 순서도 헷갈리기 때문에 설정 객체를 이용하면 편함.

var conf = {
    username: "test",
    ....
}

말그대로 넘길 설정값들을 객체로 만들어 객체를 넘겨버리도록 함. DOM엘리먼트나 CSS스타일 지정할 때 유용.

커리(Curry)

함수형 프로그래밍 (Functional Programming) 에서 자주 사용되는 기능인데 자바스크립트에서 적용이 가능하다.

함수적용

함수형 프로그래밍에서 함수를 호출한다 기 보단 적용한다 의 개념으로

sayHi.apply(null, ["hi"]);
sayHi.call(null, "hi");

첫 번째 인자는 this와 바인딩할 객체, null이면 전역객체와 바인딩.

커링(Currying)

함수를 커링한다..? 커링은 함수를 변형하는 과정. 한 함수가 있으면 부분 적용을 처리하는 함수.

function add(x, y) {
    var oldx = x, oldy = y;
    if (typeof oldy === "undefined") {
        return function(newY) {
            return oldx + newY;
        }
    }

    return x + y;
}

// 
add(3)(5) // 8

var add2000 = add(2000);
add2000(10) // 2010

좀 더 개선된 add함수의 커링화.

function add(x, y) {
    if (y === "undefined") {
        return function(y) {
            return x + y;
        };
    }

    return x + y;
}

좀 더 범용적인 함수를 만들 수 있음.

커링을 사용해야 할 경우

함수 호출 시 대부분의 매개변수가 비슷할 때 적합하다.
일부를 적용해서 동적으로 함수를 생성하고 필요한 부분을 추가적으로 저장하면 됨

참고

• 자바스크립트 디자인패턴 책