동기&비동기(2) - 비동기 함수와 콜백함수 사용

비동기 함수의 결과는 콜백함수로 받아볼 수 있음

: 비동기적으로 실행된 함수들에 callBack 함수를 추가하여, 비동기 처리의 종료 여부 or 결과값을 확인할 수 있음

• 두 개의 매개변수(파라미터)를 받아서 더한 값을 출력해주는 비동기 함수 생성

function taskA(a, b, cb){
  setTimeout(() => {
    const res = a + b;  // res = 지역상수 (해당 scope 안에서만 유효한 상수)
    cb(res);
  }, 2000);
}


taskA(3, 4, (a) => {
  console.log(`A task result = ${a}`);
});
console.log('코드 끝');

콜백 함수의 동작 흐름

setTimeout()의 결과값을 받는 방법

(1) taskA() 함수 생성
taskA()에 콜백함수(cb)를 매개변수로 받고, taskA()를 실행힐 때 콜백함수를 정의해준다.
콜백함수는 결과값을 매개변수로 받아서, 해당 값을 출력하는 역할을 한다.
taskA() 내부에서 콜백함수를 실행해주면, 콜백함수가 정의된 곳으로 코드 흐름을 넘겨서 함수가 실행됨.

(2) taskA() 실행
매개변수 cb로 넘겨줄 콜백함수를 정의해줌.
taskA 함수를 정의하는 코드에서 cb라는 매개변수에 해당 함수가 들어올 것이고, taskA() 내부에서 콜백함수를 실행해준다.
이 때,
res(결과값)을 파라미터로 받아서 수행할 함수를 입력해주면 됨.

---

• 실행시간이 각각 다른 함수 A, B, C를 동시에 실행

// 두 인수를 더한 값을 출력하는 함수
function taskA(a, b, cb){
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

// 인수값에 *2 한 값을 출력하는 함수
function taskB(a, cb){
  setTimeout(()=>{
    const res = a * 2;
    cb(res);
  }, 1000)
}

// 인수값에 -1 한 값을 출력하는 함수
function taskC(a, cb){
  setTimeout(()=>{
    const res = a-1;
    cb(res)
  }, 2000)
}

taskA(3, 4, (a) => {
  console.log(`A task result = ${a}`);
});  // 3초 뒤 실행

taskB(5, (res)=>{
  console.log(`task B 의 결과 : ${res}`);
});  // 1초 뒤 실행

taskC(9, (res)=>{
  console.log(`task C 의 결과 : ${res}`);
})

console.log('코드 끝');
// "코드 끝"
// "task B 의 결과 : 10"
// "task C 의 결과 : 8"
// "A task result = 7"