콜백함수 현명하게 사용하기

이번 시간엔 콜백 함수에 대해 배울거에요. 앞 시간에 수 차례 우리는 콜백 함수를 이미 사용해 왔습니다. 가령 예를 들면, setTimeout, 배열에 대한 forEach 등에서요.

// setTimeout
setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

// forEach
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

이처럼 다른 코드의 인자로 넘겨주는 함수인 콜백함수의 여러가지 특징과 바람직하지 않은 상황(콜백 지옥)hell을 만났을 때 어떻게 대처해야 할지 등에 대한 내용을 배워봅시다. 이러한 과정에서 자연스럽게 동기 vs 비동기의 개념도 학습하게 돼요. Let’s get it!! 비동기적인 것을 동기적으로 만드는 것도 필요~~!!

 

(1) 콜백함수란

1. 다른 코드의 인자로 넘겨주는 함수에요! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 얘기겠죠. forEach, setTimeout 등이 되겠네요.
2. 콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 돼요.(제어권 !!)
3. (코어자바스크립트의 예시) 다음 날 친구와 8시에 만나기로 한 스펀지밥 😂
   1. (현명하지 않은) 알람을 안 맞춘 스펀지밥.
      1. 불안한 마음으로 계-속 깨요
      2. 밤새 몇시인지 확인하느라 뒤척여 컨디션이 좋지 않아요
      3. 수시로 시간을 구하는 함수를 직접 호출했어요(제어권 : 스펀지밥)
         1. 시간을 구하는 함수 : 눈 뜨고 → 일어나고 → 시계 보고 → 아직 안됐네? → 다시 눕고 → 눈 감고 → 잠 들고
   2. (현명한) 알람을 맞춘 스밥
      1. 알람시계를 세팅하고 꿀잠을 자요!
      2. 6시에 알람소리를 듣고 상쾌하게 일어나 컨디션이 너무 좋아요
      3. 시계의 알람을 설정하는 **함수(알람시계)**를 호출했고, 그 **함수(알람시계)**가 ‘알아서’ 스펀지밥이 정해놓은 시간이 됐을 때 ‘알람이 울리는 결과’를 반환했어요(제어권 : 함수 즉, 알람시계) → **action에 대한 제어권**은 함수에게 있었어요 😎

callback = call(부르다) + back(되돌아오다) = 되돌아와서 호출해줘!

< 💡 다시 말하면, 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘!

1. 즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 **자체적**으로 **내부 로직**에 의해 이 콜백 함수를 적절한 시점에 실행 ← 이 적절한 시점 역시 제어권이 있는 위임받은 코드가 알아서 함.

콜백함수