call( ), apply( ), bind( ) 차이점

call, apply, bind 메서드는 함수 호출 방식과 관계없이 this를 지정할 수 있게 해줍니다.

call과 apply는 사용하는 매개변수의 타입이 다릅니다.
bind는 call과 apply와 다르게 this를 영구히 바꾸어 사용한다는 차이점이 있습니다.

사용법

---

call 메서드

일반적인 함수와 마찬가지로 매개변수를 직접 받습니다.

함수.call( this로 지정할 값, 함수가 사용할 매개변수1, 함수가 사용할  매개변수2, … );

apply 메서드

apply는 매개변수를 배열로 받습니다.
배열요소를 함수의 매개변수로 사용할 때 유용합니다.

함수.apply( this로 지정할 값, [ 함수가 사용할 매개변수1, 함수가 사용할 매개변수2, … ] );

call과의 차이점

call은 spread operator를 사용하여 배열을 개별요소로 사용했습니다.

const num = [3, 10, 1, 6, 4];

const min = Math.min.call(null, ...nums);
// 1

const min = Math.min.apply(null, nums);
// 1

bind 메서드

함수의 this값을 영구히 바꿀 수 있습니다.
bind는 함수를 호출하지 않고, 미리 특정 인자값을 적용하여 새로운 함수를 반환합니다.

const 변수 = 함수.bind( this로 지정할 값 );
변수( 함수가 사용할  매개변수1, 함수가 사용할 매개변수2, ...)
// this값을 바꾼 함수를 변수에 초기화 하고 초기화된 변수를 함수처럼 사용합니다. 

const 변수 = 함수.bind( this로 지정할 값, 함수가 사용할 매개변수1, 함수가 사용할 매개변수2 );
변수( 함수가 사용할 매개변수3 )
// 위와 같이 매개변수도 미리 초기화할 수 있습니다.

전체 사용 예시

bind는 변수 c에 초기화 하여 사용할 경우 c의 this는 변수 b로 고정됩니다.

function a(x, y, z) {
	console.log(this, x, y, z)
}

let b = {
	bb: 'bbb'
};


a.call(b, 1, 2, 3)
// {bb: "bbb"} 1 2 3

a.apply(b, [1, 2, 3]);
// {bb: "bbb"} 1 2 3

let c = a.bind(b);
c(1, 2, 3)
// {bb: "bbb"} 1 2 3

let d = a.bind(b, 1, 2);
d(3)
// {bb: "bbb"} 1 2 3