TIL18: Callback Function

비동기 처리 방식이 동기 처리 방식보다 좋은 점이 많지만 어느 함수가 먼저 완료되는지 알 수 없다면 coding flow를 구성하는데 어려움이 발생할 수 밖에 없습니다. 결국 비동기 처리의 순서를 제어하기 위한 방법이 필요한데 그 중에서 대표적인 방식이 Callback Function을 이용하는 것입니다.

• 아래와 같은 예시 코드가 있습니다.

const printString = (string) => {
  setTimeout(
    () => {
      console.log(string);
    }, 
    Math.floor(Math.random() * 100) + 1
  );
};

이 코드를 이용해 아래와 같이 실행해 보면, A, B, C의 출력 순서는 절대 고정적으로 정해지지 않습니다.

const printAll = () => {
  printString("A");
  printString("B");
  printString("C");
};
printAll(); // ?

• 하지만 callback 함수를 전달 인자로 이용하여 아래와 같이 실행해 보면, A, B, C의 출력 순서는 고정적으로 제어가 됩니다.

const printString = (string, callback) => {
  setTimeout(
    () => {
      console.log(string);
      callback();
    }, 
    Math.floor(Math.random() * 100) + 1
  );
};

const printAll = () => {
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {})
    });
  });
};
printAll(); // A, B , C

• Callback Error Handling Design and Usage

const somethingGonnaHappen = callback => {
  waitingUntilSomethingHappens();
  if (isSomethingGood) {
    callback(null, something);
  }
  if (isSomethingBad) {
    callback(something, null);
  }
}

somethingGonnaHappen((err, data) => {
  if (err) {
    console.log('ERROR!!');
    return;
  }
  return data;
});

코드 출처: 코드스테이츠(CodeStates)