[Javascript] call, apply

함수 실행방법

function add(a, b) {
  return a + b;
}

함수를 실행할 때 보통 add(3, 4)와 같이 함수 뒤에 ( ) 를 붙여서 사용합니다.
함수를 실행하는 또다른 방법이 있습니다. call이나 apply를 사용하는 것입니다.

console.log(add.call(null, 3, 4));     // 7
console.log(add.apply(null, [3, 4]));  // 7

apply는 인자를 배열로 묶어서, call은 쉼표로 구분한 리스트 형식으로 전달합니다.

그렇다면 첫번째 인자로 준 null 은 무엇일까요?
call 앞의 함수(add)의 this 를 바로 이 null 로 바인딩 해주게 됩니다.

this 사용

함수 안에 this를 넣어서 실행해보겠습니다. (크롬에서 실행)

function add(a, b) {
  return this + a + b;
}

add(3, 4);               // "[object Window]34"
add.call(null, 3, 4));   // "[object Window]34"  <-- 1

add.call(2, 3, 4);       // 9  <-- 2
add.apply(2, 3, 4);      // 9

1. this 기본값인 window가 출력되었습니다.
2. this 에 2가 바인딩되어 2 + 3 + 4가 출력되었습니다.

대표적 용도

이 call, apply의 대표적 용도는 arguments 객체와 같은 유사배열객체에 배열메서드를 사용하는 경우입니다.

다음 코드로 arguments를 살펴보겠습니다. (크롬에서 실행)

function showParam() {
  console.log(arguments);
}

showParam(1, 2, 3, 4);    // [1, 2, 3, 4, callee: f, ..생략]

인자로 넣어준 값을 배열 모양으로 출력해줍니다.

이 유사배열객체에 배열메서드인 slice를 사용해보겠습니다.

function showParam() {
  console.log(arguments.slice(0,1));
}

showParam(1, 2, 3, 4); 
// Uncaught TypeError: arguments.slice is not a function

arguments가 배열이 아니기 때문에 배열메서드를 사용할 수 없어서 오류가 뜹니다.
이 때 call이나 apply를 사용할 수 있습니다.

function sliceParam() {
  console.log(Array.prototype.slice.call(arguments, 0, 2));
  console.log(Array.prototype.slice.apply(arguments, [0, 2]));
}

sliceParam(1,2,3,4);   
// [1, 2] 
// [1, 2]

잘 됩니다 !
한마디로 "call 앞에 있는 매서드를 call 의 첫번째 인자에 사용할 것이다" 라고 생각해보았습니다.

읽어주셔서 감사합니다 !

참고

제로초님 블로그 https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd
poiemaweb https://poiemaweb.com/js-this