[JS] function call, apply, bind 차이

JS를 사용하다보면 함수 내부에서 this 참조가 원하지 않는 객체를 참조하거나 아예 유실되어버리는는 경우가 종종 발생한다.
이러한 경우에 사용할 수 있도록 JS에서는 Function.prototype의 call, apply, bind를 제공하고있으며, 세 메소드는  모두 함수에 this 참조를 연결한다는 공통점을 갖지만 사용법 측면에서 다음과 같은 소소한 차이가 있다.

1. Function.prototype.call: 함수 내부에서 참조할 this와 매개 변수 목록을 하나씩 나열하여 전달하는 식으로 함수를 호출한다.
2. Function.prototype.apply: 함수 내부에서 참조할 this와 매개 변수 목록을 배열로 전달하는 식으로 함수를 호출한다.
3. Function.prototype.bind: 함수 내부에서 참조할 this를 전달하여 새로운 함수를 반환한다.

즉, call과 apply는 대상 함수를 즉시 호출하지만 bind는 새로운 함수를 반환한다는 점을 기억하자.

---

코드 예시

• 아래의 call과 apply 메소드 호출, 그리고 bind를 통해 생성된 bounded 함수의 호출은 모두 같은 결과를 반환한다.

const me = {
    name: 'ingnoh',
};

function show(alias, age) {
    console.log(this.name, alias, age);
}

show('monkey', 3); 				// undefined monkey 3
show.call(me, 'monkey', 3);		// ingnoh monkey 3
show.apply(me, ['monkey', 3]);	// ingnoh monkey 3

const bounded = show.bind(me);
bounded('monkey', 3);			// ingnoh monkey 3

참고

Function.prototype.call() - JavaScript | MDN

Function.prototype.apply() - JavaScript | MDN

Function.prototype.bind() - JavaScript | MDN