콜백 함수란?

• callback function
  • call : '부르다', '호출(실행)하다'
  • back : '뒤돌아오다', '되돌다'
  • 두 단어의 합성어로 '되돌아 호출해달라'는 명령
• 다른 코드의 인자로 넘겨주는 함수
• 콜백 함수를 넘겨 받은 코드는 이 콜백 함수를 필요에 따라 적적한 시점에 실행
  • 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보냄
  • 함수 X는 해당 조건을 스스로 체크해서 Y를 직업 호출

제어권

• 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임

호출 시점

예제 - setInterval

let count = 0;
const timer = setInterval(function () {
  console.log(count);
  if (++count > 4) clearInterval(timer);
}, 300);

// 실행 결과
// 0
// 1
// 2
// 3
// 4

• 300ms 마다 카운팅 된 숫자를 출력하고 카운트가 4를 넘으면 타이머를 초기화 시켜 종료
• 300ms 마다 주기적으로 callback 함수가 호출

예제 - setInterval cbFunc 명시적 표현

let count = 0;
const cbFunc = function () {
  console.log(count);
  if (++count > 4) clearInterval(timer);
}
let timer = setInterval(cbFunc, 300);

// 실행 결과
// 0
// 1
// 2
// 3
// 4

• 콜백 함수를 보다 명시적으로 표현 (cbFunc)
• cbFunc, setInterval의 호출 주체와 제어권 비교

인자

예제 - Array.prototype.map

const newArr = [10, 20, 30].map(function (currentValue, index) {
  console.log(currentValue, index);
  return currentValue + 5;
});

console.log(newArr);

// 실행 결과
// 10 0
// 20 1
// 30 2
// [15, 25, 35]

예제 - Array.prototype.map 인자 순서 변경

const newArr = [10, 20, 30].map(function (index, currentValue) {
  console.log(index, currentValue);
  return currentValue + 5;
});

console.log(newArr);

// 실행 결과
// 10 0
// 20 1
// 30 2
// [5, 6, 7]

• 콜백 함수를 호출 할 때 넘기는 인자 값은 이름에 관계 없이 순서대로 값이 전달
• 전달되는 인자의 순서는 콜백 함수를 호출 주체가 되는 함수(또는 메서드)가 결정

this

• 콜백 함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조
• 하지만 제어권을 넘겨 받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조

예제 - Array.prototype.map 구현

Array.prototype.map = function (callback, thisArg) {
  let mappedArr = [];
  for (let i = 0; i < this.length; i++) {
    const mappedValue = callback.call(thisArg || window, this[i], i, this);
    mappedArr[i] = mappedValue;
  }
  return mappedArr;
}

const result = [10, 20, 30].map(function (value, index) {
  console.log(this, value, index);
  return value + 100;
});

console.log(result);

// 실행 결과
// Window 10 0
// Window 20 1
// Window 30 2
// [110, 120, 130]

const anotherResult = [10, 20, 30].map(function (value, index) {
  console.log(this, value, index);
  return value + 100;
}, [1, 2, 3]);

console.log(anotherResult);

// 실행 결과
// [1, 2, 3] 10 0
// [1, 2, 3] 20 1
// [1, 2, 3] 30 2
// [110, 120, 130]

• thisArg가 있는 경우에는 해당 값을 콜백 함수의 this로 지정 없는 경우, 전역 객체(window)를 this로 지정

처음 예제를 봤을 때에는 this를 다르게 지정하면 map의 실행 결과도 다르게 나오는 것인 줄 알았는데, 실행을 해보고 그렇지 않은 결과가 나와서 조금 당황 했다. 곰곰히 생각을 해보니 thisArg로 넘기는 것은 콜백 함수의 this를 지정하는 것이지 map 메서드의 this를 지정하는게 아니기 때문에 결과 값에는 영향이 없는게 맞다.

예제 - addEventListener

const cbFunc = function () {
  console.log(this);
};

setTimeout(cbFunc, 300);
// 실행 결과
// Window

const arr = [1, 2, 3, 4, 5];
arr.forEach(cbFunc);
// 실행 결과
// Window
// Window
// Window
// Window
// Window

arr.forEach(cbFunc, arr);
// 실행 결과
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5]

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a')
  .addEventListener('click', cbFunc);
// 실행 결과
// <button id="a">클릭</button>

• setTimeout
  : 내부에서 콜백 함수를 호출할 때 call 메서드의 첫번째 인자에 전연 객체를 넘기기 때문에 콜백 함수 내부에서의 this는 전역 객체를 가리킴
• forEach
  : 별도의 인자로 this를 받는 경우. 콜백 함수 다음 인자로 this로 지정할 객체를 넘기지 않은 경우에는 this가 전역 객체를 가리키고, this로 지정할 객체를 넘긴 경우에는 this가 해당 객체를 가리킴
• addEventListener
  : 내부에서 콜백 함수를 호출 할 때 call 메서드의 첫번째 인자에 addEventListener 메서드의 this를 그대로 넘기도록 정의돼 있기 때문에 콜백 함수 내부에서 this가 addEventListener를 호출 한 주체 HTML 엘리먼트를 가리킴