[Javascript] 동기(synchronous) vs 비동기(asynchronous)

자바스크립트 싱글 스레드 작업 수행방식

- 싱글 스레드 : 한 번에 한 작업만, 하나의 main thread에서 처리되며 다른작업은 앞선 작업이 끝나야 수행된다.

- 동기방식 : 코드가 작성된 순서대로 처리하며 이전 작업이 진행 중일때는 다음 작업을 수행하지않고 대기한다.

- 비동기 방식 : 여러 개의 작업을 동시에 실행시킴. (callback, promise를 사용하여 처리)

동기방식의 쓰레드 처리

비동기 방식의 쓰레드 처리

 

앞선 이유들로인해(e.g. related to blocking) 많은 웹 API기능은 현재 비동기 코드를 사용하여 실행되고있다.

 

 

 

 

---

 동기 방식

알게 모르게 사용해왔던 동기적 방식.

taskA()가 작업이 완료되기 전까지는 console.log("코드 끝")이 실행되지 않는다.

 

 

 

 비동기 방식

function taskAsync() {
  setTimeout(() => {
    console.log("A TASK END");
  }, 2000);
}
taskAsync();
console.log("Async() 코드 끝");

지시 순서는 taskAsync 함수가 먼저였지만 실행이 종료되기 전에도 "코드 끝" 문자가 출력된다.

 

 

 

 

 콜백함수를 사용해서 파라미터 전달하기

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

taskAsyncParam(3, 4, (res) => {
  console.log("A TASK RESULT : ", res);
});

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

 

call stack : 작성한 코드의 실행에 따라서 호출 스택을 쌓는 영역 

이정환 한 입 크기로 잘라먹는 리액트 JS Engine 설명

 

 

 

 

여러함수들을 setTimeout()을 이용하여 콜백하기

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

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

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskAsyncParam(3, 4, (res) => {
  console.log("A TASK RESULT : ", res);
});

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

taskC(14, (res) => {
  console.log("C TASK RESULT : ", res);
});

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

 

 

위 예제에

콜백 부분을 변경해서 출력 (콜백함수에 콜백함수에 콜백함수)

taskAsyncParam(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); //
    });
  });
});

생각보다 비동기처리 안에 비동기가 또 필요한 상황이 많지만, 가독성이 너무 안좋기 때문에 콜백지옥을 벗어나야한다.

 

그럴때 필요한게 Promise (비동기 작업의 최종 완료 또는 실패를 나타내는 객체).

 

To be continued...

 

 

 

 

 

 

 

 

참고

- https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing

- 한입리액트