[JavaScript] 동기 & 비동기

자바스크립트는 코드가 작성된 순서대로 작업을 처리하며, 이전 작업이 진행 중일 때는 다음 작업을 수행하지 않고 기다린다.

이런 Task 처리 방식을 동기 방식의 처리라고 한다.

function TaskA() {
  console.log("TASK A");
}
function TaskB() {
  console.log("TASK B");
}
function TaskC() {
  console.log("TASK C");
}

TaskA();
TaskB();
TaskC();

동기 방식의 처리

동기적 처리의 단점은 하나의 작업이 너무 오래 걸린다면

모든 작업이 해당 작업이 종료되기 전까지 STOP 되기 때문에 전체 흐름이 지체된다.

 

즉, 성능 상의 문제가 발생한다.

 

다른 언어(C, C++ ... )에서는 멀티스레드 방식을 사용할 수도 있지만, 자바스크립트는 싱글스레드 방식을 사용한다.

 

대신, 자바스트립트에서는 비동기 방식(non-blocking)으로 이를 해결할 수 있다.

비동기 방식은 여러 개의 작업을 동시에 실행시켜 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다.

 

비동기 방식의 처리

 

아래 setTimeout()함수는 자바스크립트의 내장 비동기 함수이다. 

비동기 처리에 값을 활용하고자 할 때는 콜백 함수를 이용하면 된다.

function taskA(a, b, cb) {
  setTimeout(() => { // 비동기 함수의 호출
    const res = a + b;
    cb(res);
  }, 2000);
}

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

taskA(3, 4, (res) => {
  console.log(`A TASK RESULT : ${res}`);
});

taskB(3, 4, (res) => {
  console.log(`B TASK RESULT : ${res}`);
});

console.log("코드 끝");

/* 비동기 방식이므로 TaskA와 TaskB가 동시에 시작하여 B가 먼저 출력되고 그 후, A가 출력되는 것을 확인할 수 있다.*/
//코드 끝
//B TASK RESULT : 12
//A TASK RESULT : 7

 

이렇게 비동기 처리에 콜백함수 값을 이용하다 보면, 아래와 같은 일명 '콜백 지옥'이 나타난다. 콜백 함수를 함수로 전달하는 과정에서 콜백 안에 또다시 함수 호출이 반복되어 결국 함수가 굉장히 deep해지는 현상이다.

 

 

function task() {
    setTimeout(() => {
        console.log('a');
        setTimeout(() => {
            console.log('b');
            setTimeout(() => {
                console.log('c');
            }, 0);
        }, 0);
    }, 0);
}

task();

// a
// b
// c

 

이러한 현상은 비동기를 처리에 사용되는 객체인 Promise 로 해결할 수 있다고 한다. 다음 글은 Promise다^-^

 

콜백지옥