[JS] call( ) / apply( ) / bind( )

call(), apply(), bind() 란?

call(), apply(), bind()는 this를 이해하기 위한 발판이다.
자바스크립트에서 this를 자유자제로 바꿀 수 있도록 해주는 메소드이다.

MDN설명

ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했다.

const SangUk = {
  age: 24,
  gender: 'male'
}

function profile(name) {
  console.log(name, this.age, this.gender);
}

profile.apply(SangUk, ['SangUk']);  // SangUk 24 male
profile.call(SangUk, 'SangUk');  // SangUk 24 male
profile.bind(SangUk, 'SangUk').call();  // SangUk 24 male

• apply() : call 함수와 유사하지만, 매개변수는 배열로 받는 것에 있어 차이가 있다.
• call() : 객체를 바인딩 함과 동시에 호출을 한다.
• bind() : 바인딩이된 함수를 반환하며, 한번더 후출 시 함수를 실행한다.

call()과 apply()의 공통점 / 차이점

• 공통점
  • 모두 함수를 호출하는데 사용된다.
  • 첫 번째 매개변수는 공통으로 함수 내에서 this의 값으로 사용된다.
• 차이점
  • call()은 쉼표로 구분된 인수를 두 번째 인수로 취하고, apply()는 인수의 배열을 두 번째 인수로 취한다.

예제

function add(a, b) {
  return a + b;
}
console.log(add.call(null, 1, 2));    // 3
console.log(add.apply(null, [1, 2]);  // 3