TIL 9일차 + 콜백 함수란?

콜백함수란?

 

callback = call(부르다) + back(되돌아오다)

즉, 정의된 함수의 참조를 통해 나중에 (back)호출(call)하는것을 의미합니다.

 

콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다.

인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다를 의미하고

인자를 넘겨줌으로써 제어권도 함께 위임한다고 할수 있습니다.

콜백 함수를 위임 받은 코드는 자체적으로 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행하게 됩니다.

var count = 0;
var count = 0;
var Func = function() {
	console.log(count);
	if(++count > 4) clearInterval(timer);
};
var timer = setInterval(Func, 300);
// 0
// 1
// 2
// 3
// 4

setInterval = 콜백함수의 제어권을 넘겨 받은 코드

위 코드에서는 setInterval이 언제 콜백함수를 호출할지에 대한 제어권을 가지게 됩니다.

호출주체 = setInterval, 제어권 = setInterval

 

위코드를 말로 풀어서 설명하자면

"Func함수를 setInterval에 넘겨줄테니 너가 0.3초마다 함수를 돌아가며 count가 4보다 크다면 멈춰줘!"

가 됩니다.

말로만 풀어봐도 호출의 주체와 제어권은 setInterval에 있는것을 알수가 있습니다.

 

---

 

콜백 함수 사용할 때의 주의할점

 

1. 인자로 넣을 때

콜백함수에 함수를 인자로 넣을때 함수 뒤에()와 함께 호출해 버리면 즉시실행 함수가 됩니다.

이렇게 되면 함수를 인자로 전달하는 것이 나닌 함수의 리턴값을 인자로 전달하게 됩니다.

리턴 값이 없을 경우 ( )와 함께 인자를 넣게 되면 undefined가 들어가게 됩니다.

function main(x){
    console.log('st');
    x();
    console.log('ed');
}

function sayhi(){
    console.log('hi');
    return 1;
}

main(sayhi);
// st
// hi
// ed
main(sayhi());
// hi
// st
// x()들어가는 값이 1이기 때문에 1은 함수가 아니므로  x is not a function at main 오류가 발생.

 

2. 콜백지옥

콜백지옥이란 익명함수로 전달하는 과정이 반복되어 코드의 들여 쓰기 수준이 지옥 수준인 경우를 말합니다.

이러한 문제는 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생합니다.

setTimeout(
  function (name) {
    var coffeeList = name;
    console.log(coffeeList);

    setTimeout(
      function (name) {
        coffeeList += ", " + name;
        console.log(coffeeList);

        setTimeout(
          function (name) {
            coffeeList += ", " + name;
            console.log(coffeeList);

            setTimeout(
              function (name) {
                coffeeList += ", " + name;
                console.log(coffeeList);
              },
              500,
              "카페라떼"
            );
          },
          500,
          "카페모카"
        );
      },
      500,
      "아메리카노"
    );
  },
  500,
  "에스프레소"
);

 

3. 에러 처리하기가 어렵습니다.

 

---

 

 

콜백 함수의 이점

위 콜백지옥의 카페 메뉴 출력 코드에서처럼  함수를 굳이 정의하지 않고

익명 함수로도 전달이 가능합니다.

function person(x){
    const name = 'startcoriny'
    x(name); //원하는 위치에 호출 할 수가 있음
}

function hi(name){
    console.log(name+'!! hi!!');
}

function hello(name){
    console.log(name+'!! hello!!');
}

person(hi); // startcoriny!! hi!!
person(hello); // startcoriny!! hello!!

콜백함수는 마치 부품을 갈아 끼우는것처럼

함수의 인자를 우리가 원하는 위치에 원하는 콜백함수로 교체해 가면서 다른 기능을 하게끔 할수 있습니다. 

 

콜백함수는 함수 내부 구현사항에서 원하는 시점에 콜백함수를 호출해 줄수 있습니다.

이러한 점은 네트워크 통신처럼 비동기적으로 실행되는 함수를 처리할 때 굉장히 편리합니다.

사용자의 데이터를 로딩하는 것과 같은 비동기적인 일이 다끝마친 뒤에 콜백함수가 실행되게 만들어야 된다면

원할 때 콜백함수를 호출할수가 있습니다.

 

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊