call, apply, bind 삼총사

처음 나왔을 때 개념을 확실히 못잡은 채로 내비뒀더니

얘네가 나올때마다

'뭐더라..'

하면서 매번 다시 MDN을 뒤지게 된다.

우리집 시니어의 도움을 받아

지금 개념을 잡아놨으니,

까먹기 전에 정리를 해두자.

 

this binding

쟤네를 이해하려면,

선결과제가 있다.

this binding을 이해해야 한다.

 

this는 this고

binding은 뭘까

묶다.감다.

약간 느낌이 온다.

this binding은 

this에다가 뭔갈 묶는 거구나.

 

const cityinfo = {
  city: 'Seoul',
  weather: 'cold',
};

function tellWeather() {
  return `today's ${this.city}'s weather is ${this.weather}'`;
}

console.log(tellWeather());  // today's undefined's weather is undefined'

 

위 예시에서 함수 tellWeather 내부의 this는 뭘까.

함수가 일반함수로 호출되면 함수내의 this는 전역객체를 가리킨다.

this 는 전역객체에 묶여있다.

즉, this에 전역객체가 binding 된 것이다.

 

저 함수가 내 의도대로 작동하려면,

tellWeather 내의 this는 

cityinfo라는 객체에 binding돼야 한다.

그럴 때 사용할수 있는것이

call, apply, bind이다.

 

call / apply / bind

이 삼총사는 비슷한데 각자 다 다르다.

셋 다 this를 새로 binding해준다는 것은 같지만

각자의 개성이 있다.

 

우선 call 과 apply는 함수를 호출하는 함수다.

const cityinfo = {
  city: 'Seoul',
  weather: 'cold',
};

function tellWeather() {
  console.log(`today's ${this.city}'s weather is ${this.weather}'`);
}

tellWeather.call(cityinfo); // today's Seoul's weather is cold

 

나는 그냥 this binding만 해주려고 했는데,

지 맘대로 tellWeather까지 호출했다.

 

반면 bind는

const cityinfo = {
  city: 'Seoul',
  weather: 'cold',
};

function tellWeather() {
  console.log(`today's ${this.city}'s weather is ${this.weather}'`);
}

const bind = tellWeather.bind(cityinfo);
bind(); //today's Seoul's weather is cold

불러 줄때 까지는 this binding 만 해놓고 얌전히 기다리다가

불러주면 자신의 결과를 스윽 하고 내민다.

 

그리고 apply는 

기본적으로 call과 유사하지만,

두번째 인수를 배열로 받는다.

 

call, apply, bind의 두번째 인수의 역할은 이렇다.

const cityinfo = {
  city: 'Seoul',
  weather: 'cold',
};

function tellWeather(name) {
  console.log(
    `Hi I'm ${name}. Today's ${this.city}'s weather is ${this.weather}'`
  );
}

tellWeather.call(cityinfo, 'hun');  //Hi I'm hun. Today's Seoul's weather is cold'
tellWeather.apply(cityinfo, ['hun']);  //Hi I'm hun. Today's Seoul's weather is cold'
const bind = tellWeather.bind(cityinfo, 'hun');
bind();  //Hi I'm hun. Today's Seoul's weather is cold'

 

두번째 인수 'hun' 은 tellweather의 인수로 들어간다.

두개 이상도 가능하다.

여기서 차이점이 드러나는데

call 과 bind는  쉼표로 인수를 구분해저 전달해주면 되지만

apply는 배열에 묶어서 전달 해줘야한다.

 

const cityinfo = {
  city: 'Seoul',
  weather: 'cold',
};

function tellWeather(name, broadcasting) {
  console.log(
    `Hi I'm ${name} from ${broadcasting}. Today's ${this.city}'s weather is ${this.weather}'`
  );
}

tellWeather.call(cityinfo, 'hun', 'KBS');
tellWeather.apply(cityinfo, ['hun', 'KBS']);
const bind = tellWeather.bind(cityinfo, 'hun', 'KBS');
bind();

 

이렇게.

이정도면 어느정도 정리가 된듯 하다.

 

비슷하지만 다른 삼총사

call, apply, bind의 특징을 표로 정리하고 마무리 할거다.

	this binding이 이뤄지는가?	함수를 호출하는가?	두개 이상의 인수를 전달하는가?	두번째 혹은 그 이후의 인수를 배열로 전달하는가?
call	⭕️	⭕️	⭕️	❌
apply	⭕️	⭕️	⭕️	⭕️
bind	⭕️	❌	⭕️	❌