[JavaScript] apply() 와 call()

이번에는 apply()와 call()에 대해서 알아보았다. 

apply() 메서드는 주어진 값과 배열로 제공되는 arguments로 함수를 호출해준다. call() 과 유사하지만 둘은 차이점이 있다.

 

call() 은 함수에 전달될 인수 리스트를 받는데 비해, apply() 는 인수들의 단일 배열을 받는다.

 

MDN에서는 이렇게 명시하고 있다. 

 

그래서 간단한 예제들을 통해 살펴 보았다.

 

// 기본 사용법
// func.apply(thisArg, [argsArray]) 현재사용할 객체, 배열
// func.call(thisArg[, arg1[, arg2[, ...]]]) 현재 사용할 객체, 객체를 위한 인수

function myFunction(x, y, z) { 
  return x + y + z;
}
var args = [0, 1, 2];

console.log(myFunction.apply(null, args)); // 3
console.log(myFunction.call(null, 1, 2, 3)); // 6

 

다음은 MDN에 있던 예제를 살짝 바꿔본 것이다. 기본적으로 둘은 기능이 같지만 전달인자가 리스트인지 단일 배열인지의 차이인것 같다.

 

apply()와 call() 을 활용하면 배열을 합치거나 복사하는 것도 가능하다.

// MDN 예제 참조 - 두 개의 배열 합치기
var array = ['a', 'b'];
var elements = [0, 1, 2];

array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

array.push.call(array, 0, 1, 2);
console.info(array); // ["a", "b", 0, 1, 2] // call과 apply 모두 동일한 결과가 나온다.

// MDN 예제 참조 - 배열 복사 (얕은 복사)
var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

 

call 과 apply 는 기능은 동일하지만 쓰이는 방법이 조금 다르다. 

함수에서 유용하게 쓰일 뿐만 아니라 배열에서도 유용하게 쓰이니 꼭 알아두어야겠다.