javascript pattern

메서드 빌리기

다른 객체의 메서드를 가져와 자신의 것 처럼 사용가능

var obj1 = {
    method: function() {
        this.val = 2
    }
};
var obj2 = {};
obj2.method = obj1.method;
obj2.method();
obj2  //->{ method: function, val: 2}

• 유사 배열 객체에 Array 매서드를 사용하고 싶을 떄 자주 사용됨

function fn() {
    arguments.forEach = Array.prototype.forEach;
    arguments.forEach(function(v) {
        console.log(v)
    });
}
fn(1, 2, 3);  //1 2 3


function fn2() {
    Array.prototype.forEach.call(arguments, function(v) {
        console.log(v)
    });
}
fn(1, 2, 3);  //1 2 3

믹스인

한 객체의 멤버를 다른 객체에거 넘겨주거나 두개의 객체를 하나로 합치는 것

var obj1 = {
    a: 1,
    b: 2
};
var obj2 = {
    c: 3,
    d: 4
};
var mixin = {};

for (var key in obj1) {
    mixin[key] = obj1[key]
};

for (var key in obj2) {
    mixin[key] = obj2[key]
};

//es6
var mixin={...obj1, ...obj2}

덕 타이핑

메서드 측에서 자신을 호출한 객체를 검증

var obj1 = {
    val: 2,
    method: function() {
        if (!this.val) {
            throw new Error("val 없음");
        }
        return this.val;
    }
};
var obj2 = {};
obj2.method = obj1.method;
obj1.method(); //2
obj2.method(); //Error

네임스페이스 패턴

전역 범위를 갖지 않게 변수의 유효범위를 가두는 것

var a = 1;
var b = 2;
//객체 맴버
var names = {
    a: 3,
    b: 4
}
names.a;
names.b;

//즉시 실행함수
(function() {
    var a = 5;
    var b = 6;
    a    //5
    b    //6

}
)();

모듈 패턴

로직을 전역으로 분리해 독립된 코드 생성

//객체 리터럴 이용
var obj = {
    method: function() {},
    a: 123,
}

//즉시 실행 함수, 클로저 이용
var obj = (function() {
    function privateFn() {}
    var privateVar = 1;
    return {
        publicFn: function() {
            privateFn();
            return privateVar;
        }
    }
}
)()

체이너블 메서드

객체명을 다시 작성할 필요 없이 동일한 객체의 다른 메서드를 호출 가능

var obj = {
    a: function() {
        console.log("a");
        return this;  //return this 추가
    },
    b: function() {
        console.log("b");
        return this;  //return this 추가
    },
}

obj.a().b().a().b();

커링(curring)

클로저를 이용해 함수의 인자를 미리 등록

function add(a, b) {
    return a + b;
}

add(1, 2)  //3

function curry(a) {
    return function(b) {
        return add(a, b);
    }
}

var add1 = curry(1);
add1(2);  //3

//es6 화살표 함수
var add = a=>b=>a + b

데코레이터

메서드를 다른 함수로 감싸서 부가적인 기능 추가

var obj = {
    add: function(a, b) {
        return a + b;
    }
}

var add = obj.add;
obj.add = function(a, b) {
    console.log(a, b);
    return add(a, b);
}

obj.add(1, 2);    //1 2  
                  // 3

메모이제이션

함수내에 불필요한 작업을 피하기 위해 이전에 연산된 결과를 저장하고 사용

function factorial(n) {
    if (n <= 1)
        return 1;
    return n * factorial(n - 1);
}

var factorial = (function() {
    var cache = [1, 1];
    return function(n) {
        if (!cache[n])
            cache[n] = n * factorial(n - 1);
    }
    return cache[n];
}
)();