동기와 비동기

이런 상황을 가정하자

 

실행 순서는크게 상관이 없다고 가정하자.

연산 과정은 코드 한줄한줄마다 다 실행이 된다고 가정.

 

 

 

 

 

 

 

---

실습

먼저 동기적 함수

function taskA() {
  console.log("A 작업 끝");
}
taskA();
console.log("코드 끝");

 

 

비동기적으로 바꾸면

function taskA() {
  setTimeout(() => {
    console.log("A 작업 종료")
  }, 2000); // 2초 대기
}

taskA();
console.log("코드 끝");

 

 

이번엔 콜백 함수를 활용

function taskA(a, b, callback) { // 파라미터와 콜백함수 추가
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000); // 3초 대기
}

taskA(3, 4, (res) => {
  console.log("A Task Result : ", res)
});
console.log("코드 끝");

 

 

 

이제 Task B를 추가, 1초 기다리게 세팅 / 실행 순서 유의

function taskA(a, b, callback) { // 파라미터와 콜백함수 추가
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000); // 3초 대기
}

function taskB(a, callback) { // 파라미터와 콜백함수 추가
  setTimeout(() => {
    const res = a * 2;
    callback(res);
  }, 1000); // 1초 대기
}

taskA(3, 4, (res) => {
  console.log("A Task Result : ", res)
});

// 추가
taskB(7, (res) => {
  console.log("B Task Result : ", res)
});
console.log("코드 끝");

 

TaskC 까지 추가, 2초 대기

function taskA(a, b, callback) { // 파라미터와 콜백함수 추가
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000); // 3초 대기
}

function taskB(a, callback) {
  setTimeout(() => {
    const res = a * 2;
    callback(res);
  }, 1000); // 1초 대기
}

function taskC(c, callback) { // 파라미터와 콜백함수 추가
  setTimeout(() => {
    const res = a * -1;
    callback(res);
  }, 2000); // 2초 대기
}

taskA(3, 4, (res) => {
  console.log("A Task Result : ", res)
});


taskB(7, (res) => {
  console.log("B Task Result : ", res)
});

// 추가
taskB(5, (res) => {
  console.log("C Task Result : ", res)
});
console.log("코드 끝");

 

---

그럼 어떻게 자바스크립트 엔진은 동기적 함수와 비동기적 함수를 구분하여 사용하는가?

 

가장 마지막에 들어온 one() 함수가 가장 먼저 종료되고 가장 먼저 제거된다.

 

Thread는 Callstack에 한 개 있다.

 

이건 동기방식

 

---

비동기 방식

기본 틀

 

실행시작 후 순서

 

---

이제 호출부만 조금 수정한 함수

function taskA(a, b, callback) {
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000);
}

function taskB(a, callback) {
  setTimeout(() => {
    const res = a * 2;
    callback(res);
  }, 1000);
}

function taskC(a, callback) { // 수정: 파라미터명 변경 (c -> a)
  setTimeout(() => {
    const res = a * -1;
    callback(res);
  }, 2000);
}

taskA(4, 5, (a_res) => { //
  console.log("A Result : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B Result : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C Result : ", c_res);
    });
  });
});
console.log("코드 끝");

 

 

이렇게 콜백함수에 콜백함수를 넣어서

비동기처리의 결과를 또 다른 값으로 넣어줄 수가 있다는 것.

이런 경우가 꽤 많다.

 

하지만 콜백지옥...