FrontEndJavaScript

[JS] call과 apply

FrontEnd, JavaScript

함수의 호출 방법 - call과 apply

call과 apply에 대해 알아보기 전에 먼저 함수의 기본적인 호출 방법에 대해 알아보자.

1
2
3
4
5
function sum(arg1, arg2) {
    return arg1 + arg2;
}
 
document.write(sum(2, 3)); // 출력결과 > 5

sum이라는 함수에 매개변수로 두 개의 값을 받고 있으므로 이 함수를 호출할 때, sum(2, 3)이런 식으로 호출했다. 함수의 리턴값은 5다.

이 외에도 JavaScript에서는 기본적인 함수 호출 방법 이외의 다른 방법들을 제공한다. 함수의 호출 방법인 call과 apply에 대해 알아보자.


call과 apply

아래의 call Example과 apply Example은 위의 기본적인 함수 호출과 동일한 결과를 가져온다.

call Example

1
2
3
4
5
function sum(arg1, arg2) {
  return arg1 + arg2;
}

document.write(sum.call(null, 2, 3));

apply Example

1
2
3
4
5
function sum(arg1, arg2) {
    return arg1 + arg2;
}
 
document.write(sum.apply(null, [2, 3]));

기본적으로 Function 객체는 call과 apply메소드를 가지고 있는데, sum도 Function객체의 인스턴스이기 때문에, 객체 Function의 메소드인 call과 apply를 호출할 수 있다.

call과 apply는 비슷하지만, 매개변수를 전달하는 방식이 다르다. 개발자가 편한 방식을 선택하면 되는데, arguments객체를 그대로 전달해도 되거나 매개변수로 전달할 데이터가 이미 배열 형태로 준비되어 있다면 apply가 나을 것이고, 그렇지 않다면 call이 나을 것이다. 전달할 매개변수가 없다면 두 메소드는 완전히 동일하다.


그런데 왜 굳이 call과 apply같은 방식을 사용하여 함수를 호출해야 하는가?

call과 apply를 사용하여 함수를 호출하면 그 함수를 해당 객체의 메소드로 만들어 버린다.

아래의 예제를 보자.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
o1 = {val1:1, val2:2, val3:3};
o2 = {v1:10, v2:50, v3:100, v4:25};
 
function sum(){
    var _sum = 0;
    for(name in this){
        _sum += this[name];
    }
    return _sum;
}
 
alert(sum.apply(o1)); // 결과 : 6
alert(sum.apply(o2)); // 결과 : 185

우선 12행의 sum.apply(o1)를 살펴보자. sum.apply(o1)는 함수 sum을 객체 o1의 메소드로 만들고, sum을 호출한다.

이렇게 되면, 함수 sum안에 있는 this는 객체 o1을 뜻하게 되는 것이다.

함수 sum안에서 반복문을 돌면서 객체 o1의 키값들 (val1, val2, val3)이 차례대로 name이라는 값으로 들어가게 되며, this[name]의 값은 해당 키값의 value들을 말한다.

그래서 차례대로 1, 2, 3이 더해져 6이라는 결과가 나온 것이다.
13행도 12행과 마찬가지로 실행된다.

아래의 또 다른 예제를 보자.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.color = "red";
var obj = {
  color : "blue"
};
 
function func() {
  document.write(this.color);
};
 
func(); // 출력결과 > red
func.call(this); // 출력결과 > red
func.call(obj); // 출력결과 > blue
func.apply(this); // 출력결과 > red
func.apply(obj); // 출력결과 > blue
  • (줄 10) : 일반적인 함수 호출 방법으로 함수를 호출했다. 함수 내의 this는 window객체를 가리키기 때문에 red가 출력된다.
  • (줄 11) : call을 사용하여 함수를 호출했고 인자로 this를 넘겼다. 여기서 this는 window객체를 가리키기 때문에 함수 func()는 window의 메소드가 되는 것이다. 따라서 func()내의 this는 window를 가리키기 때문에 red가 출력된다.
  • (줄 12) : call을 사용하여 함수를 호출했고 인자로 obj객체를 넘겼다. 따라서 함수 func()는 obj객체의 메소드가 되기 때문에 func()내의 this는 obj를 가리키므로 blue가 출력된다.
  • (줄 13, 14) : 각각 줄 11, 12와 같은 원리로 red와 blue가 출력된다.
Share