[JS] 함수 메서드 call, apply

함수를 실행시키는 방법에는 가장 많이 쓰는 방법인 function()을 사용한 함수 호출, new 키워드를 이용한 호출, 그리고 함수 메서드 call,apply를 이용하여 호출 하는 방법이 있다.

function add(x,y) {
  console.log(x + y);
}
add(2,8); // 10
add.call(null, 2, 8); // 10
add.apply(null, [2,8]); // 10

위 예시를 보면 호출하는 방식은 전부 다르지만 결과는 똑같은 걸 볼수 있다.
그러면 호출 방법에 따라 매개변수가 어떠한 역할을 하는지 자세히 알아보자.

call & apply

func.call(thisArg[, arg1[, arg2[, ...]]])
func,apply(thisArg, [argArray])

thisArg: func 호출에 제공되는 this의 값
첫 번째 인자로 들어오는 thisArg는 함수를 실행할 때 this를 정해줄 수 있다.
두 번째부터 들어오는 인자들은 call일 경우 함수 실행시 전달될 인수 리스트를 받고 apply의 경우에는 인수들의 단일 배열을 받는다.

아래 예제를 보면 두 메서드의 차이점을 알 수 있다.

function add(x,y) {
 this.val = x + y;
  console.log(this.val);
}

let obj = {
  val : 0
}

add.call(obj, 2, 8);// 10
add.apply(obj, [2, 8]);// 10

• apply로 배열을 인자로 보내기

let arr = [10, 25, 15, 3, 21];
Math.max(arr);// NaN
Math.max.apply(null, arr);// 25

Math.max()의 매개 변수는 NumberType만이 올 수 있지만 arr은 배열이기 때문에 NaN을 반환해 준다. 이럴 경우 apply를 사용해서 arr의 최댓 값을 찾을 수 있다.

• call, apply로 prototype 빌려쓰기

  아래 예제를 보면 call,apply를 활용하여 배열 메서드를 사용할 수 있다.

function moreThanFive(str) {
	return str.length > 5;
}
let arr = ['one', 'two', 'three', 'four', 'five'];
arr.filter(moreThanFive);// ['three']
Array.prototype.filter.call(arr, moreThanFive);// ['three']
Array.prototype.filter.call(arr, [moreThanFive]);// ['three']

근데 여기서 굳이 call과 apply를 사용할 이유가 없다. 하지만 배열이 아닌 유사배열인 경우 우리는 Array 메서드를 사용할 수 가없다. 이럴 경우 call과 apply를 사용하면 유사배열에도 Array의 메서드를 사용할 수 있게 된다.