apply()와 this

apply 메소드

apply 메소드는 call 메소드와 같이 함수를 호출하며 기능도 같다. 한 가지 다른점이 두번째 파라미터를  배열로 작성하는 것이 다른 점이다. 

일반적으로 call 메소드는 파라미터의 수가 변하지 않을 때 사용하며  apply 메소드는 파라미터가 유동적일 때 사용한다.

두 번째 파라미터 값이 null 또는 undefined 이면 빈 배열로 간주한다.

두 번째 파라미터 값의 데이터 타입이 객체가 아니라면 에러가 발생한다. 

123과 같이 숫자 타입을 지정할 수 없는 것이다. 

{one: 10} 형태로 지정하면 에러가 발생하지는 않지만 arguments 객체에 값이 설정되지 않는다.

파라미터에 함수를 지정하면 먼저 함수를 실행하고 실행한 함수에서 반환한 결과를 파라미터 값으로 사용한다.

호출받는 함수에 파라미터를 지정하지 않은 형태

호출받는 함수에 파라미터를 작성하지 않으면 호출한 함수에서 보낸 파라미터 값이 arguments 객체에 설정된다.

javascript

function get() {
    var list = arguments,
        i = 0;

    // debugger;

    for(; i < list.length; i++) {
        console.log("arguments에 설정 된 값 " + list[i] + " ::: " + "this가 참조하는 객체의 프로퍼티 값 " + this[i]);
    }
}

get.apply({0:10, 1:20, 2:30},[40,50,60]);
/*
 arguments에 설정 된 값 40 ::: this가 참조하는 객체의 프로퍼티 값 10
 arguments에 설정 된 값 50 ::: this가 참조하는 객체의 프로퍼티 값 20
 arguments에 설정 된 값 60 ::: this가 참조하는 객체의 프로퍼티 값 30
 */

apply 메소드의 첫 번째 파라미터에 지정한 {0:10,1:20,2:30}을 this가 참조한다. 두 번째 파라미터에 지정한 [40,50,60]은 arguments 객체에 설정된다. 

위 코드에서는 의도적으로 첫번째와 두번째 파라미터의 프로퍼티의 수를 세개씩 작성한 것이다.  

두번째 파라미터를 배열로 지정하므로 arguments 객체가 2차원 배열이 될 것으로 예측할 수도 있지만 1차원 배열로 설정된다. 

이는 arguments 객체가 배열이 아닌 {name:value} 형태이기 때문이다.

즉, 두번째 파라미터를 [40,50,60] 형태로 지정했지만 arguments 객체는 {0:40,1:50,2:30} 형태로 변환하여 저장한다.

호출받는 함수에 파라미터를 작성한 형태

호출한 함수의 배열 값을 호출받는 함수의 파라미터 이름 순서에 맞추어 매핑한다.

javascript

function get(a,b) {
    console.log(a + b + arguments[2]);
}
get.apply(this,[10,20,30]);
// 60

var obj = {
    value : 123,
    nestedObj : {
        value: 456,
        get: function(a,b) {
            console.log(a + " " + b + " " + this.value + " " + arguments[2])
        }
    }
};

obj.nestedObj.get.apply(obj,[1,2,3]); // 1 2 123 3
obj.nestedObj.get.apply(obj.nestedObj,[1,2,3]); // 1 2 456 3

[call / apply 정리]

• func.call(객체, 인자값);
• func.aplly(객체, 인자값 배열);

call / apply 내부에서는 전달받은 인자를 이용해 다시 함수 func 를 호출해준다. 

func 함수 내부에서 this 를 사용하고 있다면 call / apply 의 첫번째 인자는 func 의 내부에 있는 this 에 할당되고 두번째 인자부터는 func 를 호출하는 인자로 사용한다.

호출하는 모양은 이상하지만 결론은 함수 func 가 호출되는 것이다.

Related Info

1. call() 또는 apply()를 사용한 this 값 설정하기

Jaehee's WebClub