JavaScript - 비동기(1)

*비동기 프로그래밍

1) Callback 함수와 Promise

• 콜백 함수는 인자와 함수를 받아 처리하므로 여러가지 작업을 처리하는 과정에서 구조가 복잡해짐
• promise를 활용하면 then을 통해 그 다음에 실행될 함수를 실행할 수 있다.

//일반 콜백함수로 비동기를 구현
function add10(a, callback) {
    setTimeout(() => callback(a + 10), 1000);
}

add10(5, res => {
    log(res);
})

// promise 활용
function add20(a) {
    return new Promise(resolve => setTimeout(() => resolve(a+20), 100));
}

add20(5)
    .then(log);

1. 두 함수의 가장 큰 차이는 Promise는 비동기 연산을 1급 값으로 다룬다.
2. 무슨 의미인가? return의 유무 차이이다. 위의 코드에서 add10은 함수 그 자체로 실행 시에 해당하는 작업만 마치면 다른 작업을 이어할 수 없다.
3. 하지만, add20은 Promise 객체를 반환해 .then을 활용해 계속해서 작업을 이어붙일 수 있다는 점에서 다르다.
4. 비동기로 일어난 상황에서 값으로 다룰 수 있다.(Promise를 활용) => 1급 객체이다(값으로 이용, 변수 할당, 인자로 전달 모두 가능).
5. 대기되는 값을 만든다는 점에서 콜백하고 다르다.

정확히 이 개념을 알고 웹 개발에 적용하려면 Call Stack, Task Queue, Event Loop 그리고 Web Api에 대한 이해가 필요하다. Ajax 요청을 통해 Web Api에 어떻게 작업이 넘어오는지 이해하면 좋다. 간단하게 설명하면,

• Call Stack에 작업이 쌓인다.
• 비동기 AJax, setTimeout 등의 작업은 콜백 함수와 함께 브라우저(Web Api)에 위임한다.
• 해당 작업이 완료되면 Task Queue로 넘어가 쌓인 순서대로 Event loop가 Call Stack의 작업이 끝나 호출해주기를 기다린다.