[JavaScript] 함수의 호출 방법 - call과 apply

November 03, 2019

javascript

JavaScript의 call과 apply는 함수를 호출하는데 사용되는 메소드이다.
더 자세히 알아보기 전에 먼저 함수의 기본적인 호출 방법에 대해 알아보자.

function sum (arg1, arg2) {
    return arg1 + arg2;
}
 
console.log(sum(2, 3)); // 5

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

그렇다면 이제 call과 apply로 함수를 호출하는 방법에 대해 알아보자.

call과 apply 비교

공통점

call과 apply는 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 다른 객체에 상속할 수 있다.

차이점

call과 apply는 지원되는 인수의 타입만 제외하면 매우 유사하지만 apply는 인수(파라미터)의 리스트 대신 인수들의 배열을 사용할 수 있다. 배열 리터럴이나 Array 객체를 사용할 수 있다.
- func.apply(this, ['eat', 'bananas'])
- func.apply(this, new Array('eat', 'bananas'))

Example

function sum (arg1, arg2) {
  return arg1 + arg2;
}

console.log(sum(2, 3)); // 5
console.log(sum.call(this, 2, 3)); // 5
console.log(sum.apply(this, [2, 3])); // 5

기본적으로 Function 객체는 call과 apply 메소드를 가지고 있는데 sum도 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;
}
 
console.log(sum.apply(o1)); // 6
console.log(sum.apply(o2)); // 185
cs

(줄 12) : 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한다. 이렇게 되면 (줄 4~10)의 함수 sum안에 있는 this는 객체 o1을 뜻하게 되는 것이다.
(줄 4~10) : 함수 sum안에서 반복문을 돌면서 객체 o1의 키값들 val1, val2, val3이 차례대로 name이라는 값으로 들어가게 되며 this[name]의 값은 해당 키값의 value들을 말한다. 그래서 차례대로 1, 2, 3이 더해져 6이라는 결과가 나온 것이다.
(줄 13) : sum.apply(o2)도 이와 같은 방식으로 185라는 결과가 나온다.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.title = "WINDOW";
var obj = {
  title : "OBJECT"
};
 
function func() {
  console.log(this.title);
};
 
func(); // WINDOW
func.call(this); // WINDOW
func.call(obj); // OBJECT
func.apply(this); // WINDOW
func.apply(obj); // OBJECT
cs

(줄 10) : 일반적인 방법으로 함수를 호출했다. func함수 내의 this는 window 객체를 가리키기 때문에 window.title인 WINDOW가 출력된다.
(줄 11) : call을 사용하여 함수를 호출했고 인자로 this를 넘겼다. 여기서 this는 window 객체를 가리키기 때문에 함수 func는 window의 메소드가 되는 것이다. 따라서 func내의 this는 window 객체를 가리키기 때문에 window.title인 WINDOW가 출력된다.
(줄 12) : call을 사용하여 함수를 호출했고 인자로 obj 객체를 넘겼다. 따라서 함수 func는 obj객체의 메소드가 되기 때문에 func내의 this는 obj 객체를 가리키므로 obj.title인 OBJECT가 출력된다.
(줄 13) : func.call(this)와 같은 원리로 WINDOW가 출력된다.
(줄 14) : func.call(obj)와 같은 원리로 OBJECT가 출력된다.

Reference

👋@Jess2

👩🏻‍💻Frontend Developer

GitHub Facebook LinkedIn