[JS Deep Dive] call, apply, bind

call vs apply vs bind

함수 호출 방식과 관계 없이 this 값 지정이 가능하게 하는 함수

call

모든 함수에서 사용 가능하며 this값을 특정 값으로 지정 가능

const lee = {
  name: "LEE",
};

const choi = {
  name: "CHOI",
}

function showName() {
  console.log(this.name);
}

// showName 함수의 this 값을 lee로 지정
showName.call(lee);
// { name: 'LEE' }
// showName 함수의 this 값을 choi로 지정
showName.call(choi);
// { name: 'CHOI' }

function updateObj(birth, born) {
  this.birth = birth;
  this.born = born;
}

// lee라는 object을 updateObj 함수의 this 값으로 지정
updateObj.call(lee, 1997, 'seoul');
// choi라는 object을 updateObj 함수의 this 값으로 지정
updateObj.call(choi, 1997, 'gyeong-gi');

console.log(lee);
// { name: 'LEE', birth: 1997, born: 'seoul'}
console.log(choi);
// { name: 'CHOI', birth: 1997, born: 'gyeong-gi' }

apply

call과 기능은 같으나 함수의 매개변수를 처리하는 방식이 배열임

// 위와 같은 경우
updateObj.apply(lee, 1997, 'seoul');
// error 발생 (apply의 경우 배열로 인자를 넘겨주어야 하므로
updateObj.apply(lee, [1997, 'seoul']);
console.log(lee);
// { name: 'LEE', birth: 1997, born: 'seoul' }

bind

this 값을 영구히 바꿀 수 있음
함수를 실행하는 것이 아닌 새로운 함수를 반환.

// updateObj 함수의 this 값에 lee 를 바인딩한 updateLee 라는 새로운 함수 생성
const updateLee = updateObj.bind(lee);
// this값은 이미 lee로 지정되어 있어서 써줄 필요 없음.
updateLee(1997, 'seoul');
console.log(lee);
/// { name: 'LEE', birth: 1997, born: 'seoul' }