[JavaScript] Callback Function｜콜백함수 동기,비동기

콜백함수

함수를 전달해서 두 가지의 함수(printYes, printNo)가 if 상황이 맞으면 전달된 함수를 호출한다.

간단히 정의하면 다른 함수에 입력값으로 전달되서 다른 함수에 의해서 호출된다는 것이다.

 

 

 

 

예제) 정답이면 yes! 정답이 아니면 no! 반환

function quiz(answer, printYes, printNo) {
   if (answer === 'like it') {
   printYes();
   } else {
   printNo();
   }
}

const printYes = function() {
   console.log('yes!');
};

const printNo = function() {
   console.log('no!');
};

quiz('hate it', printYes, printNo);   //no!
quiz('like it', printYes, printNo);   //yes!

 

 

---

 

 

콜백함수는 동기와 비동기 처리로 실행한다.

 

동기 - 코드를 위에서부터 아래로 순차적으로 출력

비동기 - 언제 코드가 실행될지 예측할 수 없음

 

setTimeout() 메서드

타이머 후에 지정된 함수를 실행한다.

HTML에서 제어하는 DOM API이기 때문에 브라우저에게 1초 뒤에 2를 출력하라는 요청을 보내고 응답을 기다리지 않고 다음 콘솔(3)을 출력한다.

 

 

예제)

function printImmediately(print) {
print();
}

function printWithDelay(print, timeout) {
setTimeout(print,timeout);
}


console.log('1')

//setTimeout(function() {
//console.log('2');
//}, 1000);
setTimeout(() => console.log('2'), 1000);

console.log('3');

printImmediately(() => console.log('sync callback'));

printWithDelay(() => console.log('async callback'), 2000)


/*
1
3
sync callback
2
async callback
*/

1 - 동기

2 - 비동기 1초 후 출력

3 - 동기

sync - 동기

async - 비동기 2초 후 출력

 

 

 

참고

https://www.youtube.com/watch?v=s1vpVCrT8f4