[Javascript] 함수의 호출_4 (apply(), call() 메서드 사용)

apply()와 call() 메서드를 사용하여 호출하기

---

apply(), call() 메서드는 명시적으로 함수 컨텍스트를 지정할 수 있는 메서드이다.

apply() 메서드

두 개의 매개변수를 전달한다. 

하나는 함수 컨텍스트로 사용할 객체, 다른 하나는 인자 값을 담은 배열이다.

call() 메서드

apply()메서드와 비슷하지만, 인자를 배열로 전달하지 않고 인자 목록으로 직접 전달한다.

사용방법을 살펴보자

function juggle(){
    var result = 0;
    for(var n=0; n<arguments.length; n++){
        result += arguments[n];
    }
    this.result = result; // 결과값을 함수 컨텍스트에 저장
}
 
var ninja1 = {};
var ninja2 = {};
 
juggle.apply(ninja1, [1,2,3,4]);
juggle.call(ninja2, 5, 6, 7, 8);
 
ninja1.result === 10; // true
ninja2.result === 26; // true

juggle함수에서는 this(함수 컨텍스트)에 result 값을 저장하게 되어있다.

apply, call 메서드를 사용하여 각각의 함수 컨텍스트를 ninja1, ninja2로 명지적으로 지정해 주었다.

=> 함수 호출시 임의의 객체를 함수 컨텍스트로 지정할 수 있다.

콜백의 함수 컨텍스트를 강제로 지정하기

함수 컨텍스트로 강제 지정하는 구체적인 예제를 살펴보자

일반적인 명령형 프로그래밍에서는 메서드에 배열을 전달하고 루프를 돌며 배열 요소를 순회하며 연산을 처리한다.

function(collection){

    for(var n=0; n<collection.length; n++){

    // collection[n] 처리

    }

}

함수형 프로그래밍 방식에서는 요소 하나에 대한 연산을 하는 함수를 만들고, 모든 배열 요소를 각각 그 함수에 전달한다.

function(item){

    // item 처리

}

인기 있는 대부분의 자바스크립트 라이브러리에서는 “for-each”함수를 제공하는데, for-each 함수는 배열의 각 요소에 대해 콜백 함수를 호출한다. 단순히 보면 순회 함수는 “현재” 요소를 콜백 함수에 매개변수로 전달할 뿐이지만, 가장 중요한 점은 현재 요소를 콜백의 함수 컨텍스트로 지정한다는 것이다. 

간단한 for-each함수를 구현해보자

function forEach(list, callback){
    for(var n=0; n<list.length; n++){
        callback.call(list[n], n);
   }
}
 
var weapons = ['gun', 'sword', 'missile'];
 
forEach(weapons, function(index){
        this == weapons[index]
    });

forEach에서 callback 함수로 실행되는 함수안의 this(함수컨텍스트)는 weapons의 element가 된다. 

(forEach 함수에서 callback을 call로 호출을 안했을 경우, this(함수컨텍스트)는 전역(window)가 됨)

당장에는 필요가 없어 보일지 모르지만, event처리시 많이 필요하게 되므로 알아두도록 하자