2020.4.29 ~ 4.30 TIL

어.. 노래라도 들으면서 할까요..? 물론 작성하는 시점에서는 못 듣겠지만요. 여담이지만 기타를 배우고 싶다는 생각을 10년째 하고 있네요. 쉬는 기간 많았는데, 그때라도 할 걸 그랬습니다. 과거를 후회하는 건 아니지만 ㅎ..ㅎ 미래에 배울 기회가 있겠죵. 24시 바쁘디 바쁜 의사인 분들도 하시는데 저라고 못하겠습니까!!

bind가 뭔가요

bind는 apply와 call과 같이 첫 번째 인자 값을 this가 그대로 따라서 가게 됩니다. bind와 apply, call의 차이점이라면 후자인 두 개는 바로 실행을 하게 되는 함수이고, bind는 바로 실행을 하지 않고 묶어 주는 역할을 합니다. 호출을 기다리고 있다가, 호출이 되면 bind가 실행이 되는 것이죠.

바아로 예제를 보십시다요.

function foo() {
  console.log(this);
}
foo(); //window
//foo는 펑션 인보케이션을 따르기 때문에 window를 가리킵니다.

let obj = {a: 1};
//저는 이 객체를 foo의 this로 설정하고 싶습니다.

foo.apply(obj) // {a: 1} (obj)
//apply로 실행한 결과입니다. this가 obj로 나옵니다.
let applyFoo = foo.apply(obj);
applyFoo; //undefined
//foo.apply에 변수를 할당한다고 하더라도 되지 않고 undefined가 뜨게 됩니다. call도 마찬가지예요.

bind는 다릅니다. apply가 바로 호출을 하는 거였다면, bind는 호출이 올 때까지 가지고 있습니다.

function foo() {
  console.log(this);
}
foo(); //window

let obj = {a: 1};

foo.bind(obj) // ƒ foo()
let bindingFoo = foo.bind(obj) // ƒ foo()
bindingFoo; // ƒ foo()
bindingFoo(); // {a: 1}

//바인드는 바로 호출을 하려고 해도 되지 않고, 해당 변수를 꼭 호출시켜야만 실행이 됩니다.

또 하나의 예제를 봅시다.

this.today = "window.today";
let obj = {
  today: '오늘은 공휴일입니다. 혼자서 공부합니다.'
}

function foo() {
  console.log(this.today);
}

setTimeout(foo, 3000); //window.today
setTimeout(foo.bind(obj), 3000); //오늘은 공휴일입니다. 혼자서 공부합니다.
setTimeout(foo.apply(obj), 3000); //error

setTimeout을 사용한 예제인데요, 함수 foo를 넣었을 땐 전역으로, 바인드를 사용해서 obj를 넣었을 땐 원하는 바와 같이 obj로 되었습니다. 그런데 apply는 안 되네요.

apply는 바로 호출을 해 주기 때문에 3초의 시간을 기다릴 수가 없어서 에러가 뜹니다. 이런 식으로, 호출을 잠시 동안 미뤄 두고, 나중에 쓰고 싶을 때 bind를 사용합니다. 물론 변수로 넣어 줘도 가능합니다.

let bindingFoo = foo.bind(obj);
setTimeout(bindingFoo, 3000); //오늘은 공휴일입니다. 혼자서 공부합니다.