콜백함수는 메서드들을 다루면서 자주 봤던 개념이지만, 명확하게 알고 있지 못했다.
강의를 통해서 어느정도 파악했다 생각했던 것도 잠시, 머릿속에서 새하얗게 지워져 있었다.🙄 그래서 콜백함수의 개념과 예제를 기록해서 내 머릿속에 기록하려고 한다.

콜백함수란?

다른 '함수 또는 메서드'에게 자기 자신(콜백함수)를 인자로 전달하여 실행하게 끔 하는 함수를 말하는데, 그 '함수 또는 메서드'가 호출할 때 실행되어지도록 통제권까지 같이 건네준다.

정의만 보고는 당최 이해가 되지 않는 소리라서 콜백함수의 사례를 2가지로 들어보겠다.

① sort( )

전에 포스팅한 적 있는 sort() 메서드에도 콜백함수가 쓰인다.

var array = [1, 3, 2];

array.sort(); // [1, 2, 3];

sort()메서드는 배열의 요소를 정렬하여 배열로 반환해주는 메서드이다.
메서드의 구문을 보면, sort의 매개변수로 인자로 정렬 순서를 정의하는 함수, 바로 콜백함수, 바로 콜백함수가 들어간다.

arr.sort( [compareFunction] )
⏸
arr.sort( function (a, b) {} )
⏸
arr.sort( 콜백함수 )

이렇게 함수가 통째로 인자로 들어가는데 아래 예제에서는 foo함수를 예를 들어서 설명해보겠다.

---

원하는 순서로 값을 정렬하는 방법은 총 3가지이다.

◾ return a - b < 0 낮은 값에서 높은 값 순으로

const numbers = [1, 4, 2, 3, 5]

function foo(a, b) {
  return a - b; 
}

numbers.sort(foo);
console.log(numbers); // [1, 2, 3, 4, 5]

◾ return b - a > 0 높은 값에서 낮은 값 순으로

const numbers = [1, 40, 2, 31, 5]

function foo(a, b) {
  return b - a; 
}

numbers.sort(foo);
console.log(numbers); // [40, 31, 5, 2, 1]

◾ return 0 정렬하지 않을 경우

const numbers = [1, 40, 2, 31, 5]

function foo(a, b) {
  return 0; 
}

numbers.sort(foo);
console.log(numbers); // [1, 40, 2, 31, 5]

foo라고 이름을 지어줬지만, 자주 호출할 일이 없을 경우에는 이름을 붙이지 않고 익명함수나 화살표함수로 사용하면 된다.

// 익명함수
array.sort(function(a, b) { 
  return a - b;
}

// 화살표함수
array. sort((a, b) => {
  return a - b;
}

⏩ 내가 sort 메서드를 호출하면서,
특정 조건일 경우 foo함수를 실행해서 나에게 알려달라고
sort 메서드에게 추가로 요청을 한다. foo함수의 통제권은 sort메서드에게 있다.
sor 메서드는 스스로 판단하고 함수를 실행한다.

이렇게 콜백함수를 인자로 넘겨주면서 제어권도 함께 위임한 함수를 말한다.
콜백함수를 위임받은 함수/ 메서드는 적절한 시점에 스스로 판단하여 함수를 실행한다.

---

② sort( )

최근에 미니 프로젝트를 만들면서 잔에러로 고생 꽤나 하게 했던 web api인
setInterval도 콜백함수를 호출하는 메서드이다.

🥕 setInterval을 이용해서 10초에서 1초씩 줄어들다가 0초가 되면 멈추는 함수를 만들어보았다.

const timerText = document.querySelector('.timer');

let timer = null;
let seconds = 10;

timer = setInterval(() => {
  if (seconds < 0) {
    clearInterval(timer);
    return;
  }
  
  timerText.textContent = seconds--;
}, 1000);
 

setInterval함수를 호출할 때 두 개의 매개변수, 화살표함수와 숫자 1000을 전달했다.
첫번째 인자인 함수인 콜백함수는 1초마다 (1000ms) 자동으로 실행된다.

콜백함수 내부에서는 seconds를 출력하는데, seconds 가 0보다 작을 경우 timer ID를 인자로 받아서
clearInterval을 실행한다. 0보다 작지 않을 경우에는 1초씩 줄어드는 값을 화면에 출력한다.

setInterval(() => {}, 1000)

⏩ setInterval은 필자인 내가 호출하고 제어하는 반면,
첫번째 인자인콜백함수 는 setInterval만이 호출하고 제어할 수 있다.**