동기와 비동기

삽질 저장소·2022년 6월 16일
1

JavaScript

목록 보기
3/4

자바스크립트는 하나의 쓰레드에서 코드가 작성된 순서로 작업을 처리한다. (동기적 방식)
동기적 처리의 단점은 하나의 작업이 오래걸릴 시 모든 작업에 영향을 미치며 시간을 잡아먹는다.

비동기 처리방식이란 여러개의 일은 동시에 진행시키는 것.
즉, 특정 코드의 실행이 완료될 때까지 기다리지않고 다음코드를 먼저 수행한다.

자바스크립트는 싱글 스레드로 작동하므로 기본적으로는 동기적 방식을 가진다. 하지만 예를 들어 서버에 요청을 보냈는데 응답이 올 때까지 기다릴 수 없기 때문에 비동기 방식을 사용해야하는 경우가 생긴다.

비동기처리의 예시

function task1(a, b, callback) {
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000);
}
function task2(a, callback) {
  setTimeout(() => {
    const res = a * 2;
    callback(res);
  }, 2000);
}
function task3(a, callback) {
  setTimeout(() => {
    const res = a * -1;
    callback(res);
  }, 1000);
}
task1(1, 2, (num) => {
  console.log(num);
});
task2(7, (num) => {
  console.log(num);
});
task3(10, (num) => {
  console.log(num);
});
console.log("Finish");

실행결과

Finish
-10    //1초
14    //2초
3    //3초

위의 코드는 task1~task3까지 비동기 처리를 수행하는 함수를 생성한 뒤 순서대로 작동을 시킨다. 이때 각각의 함수는 3초, 2초, 1초의 딜레이를 가진뒤 작동한다.

비동기처리를 중첩

function task1(a, b, callback) {
  setTimeout(() => {
    const res = a + b;
    callback(res);
  }, 3000);
}
function task2(a, callback) {
  setTimeout(() => {
    const res = a * 2;
    callback(res);
  }, 2000);
}
function task3(a, callback) {
  setTimeout(() => {
    const res = a * -1;
    callback(res);
  }, 1000);
}
//콜백지옥 발생
task1(1, 2, (a_num) => {
  console.log("a: ", a_num);
  task2(a_num, (b_num) => {
    console.log("b: ", b_num);
    task3(b_num, (c_num) => {
      console.log("c: ", c_num);
    });
  });
});
console.log("Finish");

Finish
a: 3    //3초
b: 6    //2초
c: -6    //1초
// 총 6초

위의 코드처럼 비동기처리의 결과를 다른 비동기처리에 넣어주는 방식이 반복되는 현상을
콜백지옥이라고 한다.

0개의 댓글