해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

콜백함수

• 콜백함수란?
  다른 코드의 인자로 넘겨주는 함수이다.

• 콜백 함수를 넘겨받은 해당 코드 혹은 메서드는 그 함수에 대한
  제어권을 가지게 되는데, 제어권 이라고 함은 콜백함수의

  1. 호출시점
  2. 인자
  3. this

  에 대한 내용을 제어할 수 있다는 것이다.

호출시점 / 인자 / this

• 각 제어권은 아래 예시를 통해 확인할 수 있다.

let i = 0;
let timer = setInterval(() => {
  console.log(i);
  i++;
  i > 4 ? clearInterval(timer) : null;
}, 300);
// 0.3초마다 콜백함수가 호출되도록 제어하는 setInterval

[1, 2, 3].map((idx, value) => {
  console.log(idx, value);
  /*
  1 0
  2 1
  3 2
  */
});
// 인자의 명칭과 상관없이 첫번째 인자에는 요소가 두번째 인자에는 인덱스가 배치된다
// map 메서드처럼 콜백 함수가 받는 인자에 대한 규칙이 있을시 제어할 수 있다.

[1, 2, 3].forEach(
  function () {
    console.log(this); // [1,2]
  },
  [1, 2]
);
// forEach 같은 this 인자를 받는 메서드 같은 경우에는 콜백함수의 this 값을 지정해주기도 한다.

콜백 함수는 함수다.

• 위 제목은 당연한 말이지만 호출방식을 생각해보면 좀더 신중하게 생각할 수 있다.

let obj = {
  val: [6, 7],
  func: function () {
    console.log(this);
  },
};

[1, 2].forEach(obj.func);
// obj 가 아닌 전역객체가 출력된다 왜일까?

• 그 이유는 앞선 this 챕터에서 학습했다시피 this 값은 호출 되어야 결정되기 때문이다.
  즉, 콜백함수(인자로 넘겨받은 함수)는 호출된 것이 아닌 함수 자체로써 넘어간 것일 뿐이기 때문에
  forEach 코드 내부에서 호출되며, 그 위치에서 thisBinding 단계가 이루어진다.

콜백 함수 내부 this에 다른값을 바인딩

• 위와 같은 현상 때문에 콜백함수 내에서는 자신 원래 속한 객체의 값을 this 로 가져올 수 없다.
  그래서 이를 위해서 활용하는 방법는 다른 변수에 this 값을 담아 함수 내에서 사용하는 방식이 있다.

let obj = {
  val: [5, 6],
  func: function () {
    let self = this;
    return function () {
      console.log(self);
    };
  },
};

let newFunc = obj.func();
[1, 2].forEach(newFunc); // { val: [ 5, 6 ], func: [Function: func] }
// 이런식으로 활용할 this 값을 미리 정의한 함수를 반환하여 새로운 변수에 할당하는 방식이다.

• 이 방식으로 다른 객체에도 적용하여 this 값으로 끌어낼 수 있을까?

// 두가지 방식이 있다.
let obj = {
  val: [5, 6],
  func: function () {
    let self = this;
    return function () {
      console.log(self);
    };
  },
};

// 1. 프로퍼티로서 해당 함수를 그대로 활용하는 법
let obj2 = {
  val: [7, 8],
  func: obj.func,
};

let newFunc2 = obj2.func();
[1, 2].forEach(newFunc2); // { val: [ 7, 8 ], func: [Function: func] }

// 2. call 메서드를 활용하여 this 값을 지정하는 법
let obj3 = { val: [9, 0] };
let newFunc3 = obj.func.call(obj3);
[1, 2].forEach(newFunc3); // { val: [ 9, 0 ] }

Bind

• 앞서 this 챕터에서 나온 bind 활용하여 좀더 간략한 코드 정리가 가능하다.

let obj = {
  val: [5, 6],
  func: function () {
    console.log(this);
  },
};

[1, 2].forEach(obj.func.bind(obj));
// bind 메서드는 새로운 함수를 반환하기 때문에 this 값이 지정된 함수를 넘겨줄 수 있다.