Javascript에 있어서 헷갈리는 것 중 하나가 있다면 this 였다.

thsi에 대한 정확한 이해도 필요하겠지만, call 과 apply를 이용해 바인딩되는 객체를 지정해줄 수 있다.

call 사용법

 function.call(Object, parameter1, parameter2 .... );

function은 사용하고자 하는 함수이며, 첫번 째 매개변수로 this로 바인딩 할 객체를 보내줍니다. 그 이후에는 사용하고자 하는 function의 매개변수들을 보내주면 됩니다.

사용법은 정말 간단하죠?

실제로 어떻게 사용하는지 볼까요?

 var arr  = [10,20,30];
 var arr2 = Array.prototype.slice.call(arr);

arr 배열과 동일한 값을 가진 새로운 객체를 생성해 반환하는 Array.prototype의 메서드 slice를 사용하고자 합니다.

위 코드는 Array.prototype.slice = function 이 되는거고, arr = this가 되는 것이죠.

그렇다면 왜 2번째 매개 변수가 없어요? 라고 하면 slice 메서드에서 매개변수를 보내지 않을 경우 전체 다 복사를 하기 때문입니다.

 var arr2 = Array.prototype.slice.call(arr,1,2);

arr 배열에는 10,20,30 값이 들어있고, arr의 1번째 인덱스의 값부터 2번째 미만 인덱스의 값까지 복사를 해서 arr2에 넣어라 라고 해석할 수 있겠네요.

arr2의 값은 20이 되겠습니다.

apply 사용법

 function.apply(Object, Array);

apply는 call과 동일하게 function 메서드에 this를 명시한 Object로 바인딩해주는 역할을 한다.

하지만 똑같다면 필요가 없을것이다.

다른것이 있다면 call은 2번째 매개변수부터는 function의 매개변수를 하나 하나 입력해주지만, apply는 2번째 매개변수를 function에 전달해야 될 매개변수를 배열이나 유사배열 형태로 묶어서 전달해준다.

실제 사용 예시를 보도록 하자.

 var arr  = [10,20,30];
 var arr2 = Array.prototype.slice.apply(arr,[1,2]);

매개변수 1, 2를 [1,2] 로 묶어서 하나의 값으로 전달하였다.

하지만 apply는 바인딩 외에도 다음과 같은 방식으로도 사용될 수 있다.

 var arr = [10,20,30,40,50,60,70,80,90,100];
 console.log(Math.min.apply(this,arr));

Math 객체는 Javascript에서 제공하는 기본 객체로, 수학과 관련된 메서드들을 제공한다.

위에서 사용된 Math.min은 파라미터로 받은 값 중 가장 작은 값을 반환하는데, 이때 파라미터로 배열이 들어갈 수 없다.

즉, 아래와 같이 값을 넘겨줘야만 한다.

 console.log(Math.min(10,20,30,40,50,60,70,80,90));

Server나 Client에서 배열로 값을 받았을 때 그럼 어떻게 해결할 것인가.

바로 방금 전 보여준 코드처럼 apply를 사용하면 된다.

이때의 this는 무의미하며, 2번째 매개변수로 파라미터 값을 넘겨준다는 사실이 중요하다.

즉, apply는 내부적으로 2번째로 넘겨받은 매개변수 배열을 풀어 원래 사용하려던 메서드로 넘겨준다고 추측할 수 있다.