콜백 함수는 함수다

예제 - 메서드를 콜백 함수로 전달

const obj = {
  vals: [1, 2, 3],
  logValues: function (v, i) {
    console.log(this, v, i);
  }
};

obj.logValues(1, 2);
// 실행 결과
// obj, 1, 2

[4, 5, 6].forEach(obj.logValues);
// 실행 결과
// Window, 4, 0
// Window, 5, 1
// Window, 6, 2

• 어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 함수 일 뿐

콜백 함수 내부의 this에 다른 값 바인딩하기

• 객체의 메서드를 콜백 함수로 전달하면 객체의 메서드가 아니라 함수로 전달되기 때문에 해당 객체를 this로 바라볼 수 없게 됨

예제 - 전통적인 방식

const obj1 = {
  name: 'obj1',
  func: function () {
    const self = this;
    return function () {
      console.log(self.name);
    }
  }
};

const callback = obj1.func();
setTimeout(callback, 1000);

// 실행 결과
// obj1

• 메서드 내부에서 self 변수에 this를 담아서 사용
• 실제로 this를 사용하지도 않을뿐더러 번거로움

예제 - this를 사용하지 않은 경우

const obj1 = {
  name: 'obj1',
  func: function () {
    console.log(obj1.name);
  }
};

setTimeout(obj1.func, 1000);

// 실행 결과
// obj1

• 훨씬 간결하고 직관적이지만 아쉬운 부분도 있음
• this를 이용해 다양한 상황에 재활용할 수 없게 됨

예제 - func 함수 재활용

const obj1 = {
  name: 'obj1',
  func: function () {
    const self = this;
    return function () {
      console.log(self.name);
    }
  }
};
const callback = obj1.func();
setTimeout(callback, 1000);
// 실행 결과
// obj1

const obj2 = {
  name: 'obj2',
  func: obj1.func
};
const callback2 = obj2.func();
setTimeout(callback2, 1500);
// 실행 결과
// obj2

const obj3 = { name: 'obj3' };
const callback3 = obj1.func.call(obj3);
setTimeout(callback3, 2000);
// 실행 결과
// obj3

• 위의 예제처럼 this를 우회적으로 활용한 경우에는 재사용이 가능
• 하지만 this를 사용하지 않고, 객체 이름을 직접 사용할 경우에는 재사용이 불가능

예제 - bind 메서드 활용

const obj1 = {
  name: 'obj1',
  func: function () {
    console.log(this.name);
  }
};

setTimeout(obj1.func.bind(obj1), 1000);
// 실행 결과
// obj1

const obj2 = { name: 'obj2' };
setTimeout(obj1.func.bind(obj2), 1500);
// 실행 결과
// obj2

• ES5에 추가 된 bind 메서드를 이용한다면 깔끔하게 해결 가능