전통적으로 JavaScript의 객체(object)는 각자 고유한 메서드(method)와 프로퍼티(property)를 가지고 있습니다. 하지만 apply() 함수를 활용하면 여러 객체를 결합하여, 주어진 모든 객체에 접근할 수 있는 하나의 공용 메서드를 만들 수 있습니다.
apply() 함수는 사실 call() 함수와 거의 동일하게 작동합니다. 두 함수 모두 첫 번째 인수로 this에 바인딩할 객체를 받습니다. 차이점은 인수를 전달하는 방식에 있는데, 배열(array) 형태의 변수를 전달해야 하는 상황이라면 apply() 함수가 유용하게 사용됩니다.
1. 개별 인수를 전달하는 경우: call() 함수 사용
아래 예제에서는 여러 요소를 개별적으로 전달하고 있으므로, 굳이 apply() 함수를 사용할 필요가 없습니다. 이런 경우에는 call() 함수가 더 적합합니다.
예제 코드
<html>
<body>
<script>
var obj = {num : 10};
var mul = function(i, j, k){
return this.num * i*j*k;
}
document.write(mul.call(obj,6,3,4));
</script>
</body>
</html>실행 결과
720
call() 함수는 인수를 쉼표로 구분하여 하나씩 전달받기 때문에, 위처럼 개별 값(6, 3, 4)을 넘길 때 정상적으로 계산되어 결과값 720을 출력합니다.
2. 배열을 전달하는 경우: apply() 함수 사용
그렇다면 인수를 배열로 전달하면 어떻게 될까요? 아래 예제에서는 개별 요소 대신 배열을 전달했습니다. 결과는 흥미롭게도 다릅니다. call() 함수는 NaN을 반환하는 반면, apply() 함수는 정상적인 값인 720을 반환합니다.
예제 코드
<html>
<body>
<script>
var obj = {num : 10};
var mul = function(i, j, k){
return this.num * i*j*k;
}
var array = [6,3,4]
document.write(mul.call(obj,array));
document.write("</br>");
document.write(mul.apply(obj,array));
</script>
</body>
</html>실행 결과
NaN 720
왜 이런 차이가 발생할까요?
그 이유는 call() 함수가 배열 자체를 하나의 단일 인수로만 취급하기 때문입니다. 즉, mul 함수의 매개변수 i에는 배열 전체가 들어가고, j와 k는 undefined가 되어 곱셈 결과가 NaN이 됩니다.
반면 apply() 함수는 배열의 요소들을 개별 인수로 풀어서(expand) 전달합니다. 따라서 [6, 3, 4]라는 배열이 i=6, j=3, k=4로 각각 전달되어 정상적으로 10 × 6 × 3 × 4 = 720이 계산됩니다.
정리
- call(): 인수를 쉼표로 구분하여 개별적으로 전달
- apply(): 인수를 배열(또는 배열 형태의 객체)로 한꺼번에 전달
두 함수의 기본 역할은 같지만, 이미 배열 형태로 준비된 데이터를 함수에 전달해야 한다면 apply() 함수를 선택하는 것이 올바른 방법입니다.