[FP&ES6+] callback, Promise를 이용한 비동기 동시성 프로그래밍

함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.

 

 

✅ callback을 이용한 비동기 동시성 프로그래밍

callback은 함수에 파라미터로 들어가는 함수이다.

코드를 순차적으로 실행하고 싶을 때 콜백 함수를 사용한다.

자바스크립트는 특성상 비동기적으로 처리되기 때문에 함수의 실행을 순차적으로 작성했다고 하더라도 이 함수들이 해당 순서대로 동작하는 것은 보장할 수 없다.

따라서 순서를 확실하게 보장하고 싶은 경우 먼저 실행할 함수에 다음 실행할 함수를 인자로 넣어 순차적으로 실행하게 하는 것이다.

 

function add10(a, callback) {
  setTimeout(() => callback(a + 10), 100);
}

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

// output
// 15

 

콜백 함수를 사용해 비동기 동시성 프로그래밍을 하는 예시는 위와 같다.

add10이라는 함수의 인자로 연산에 필요한 값과 이 결괏값을 처리할 함수인 callback 함수를 받는다.

add10 함수 실행 시 add10 함수 내의 연산이 먼저 이루어지고 그 결괏값이 callback 함수로 넘어가 console.log로 출력된다.

 

 

✅ Promise를 이용한 비동기 동시성 프로그래밍

Promise는 Promise class를 통해서 만들어진 인스턴스를 반환하는데 그 값은 대기(pending), 성공(funfilled), 실패(rejected)를 다루는 일급 값으로 이루어져 있다.

정해진 기능을 수행하고 나서 정상적으로 실행되었다면 처리되었다는 메세지와 함께 연산 결과를 반환하고 실패 시에는 에러를 반환한다.

 

function add20(a) {
    return new Promise(resolve => setTimeout(() => resolve(a + 20), 100));
}
add20(5).then(console.log);

// output
// 25

 

Promise를 사용해 비동기 동시성 프로그래밍을 하는 예시는 위와 같다.

add20 함수에서는 콜백 함수를 사용한 때와는 달리 실제로 연산에 필요한 값만을 인자로 받는다.

Promise에서 결과값을 처리할 함수를 받아둔 다음에 Promise가 해결되면 받아둔 함수를 실행한다.

여기서 중요한 점은 promise를 리턴한다는 점이다.

 

 

✅ callback과 Promise 비교

함수 반복

 

// callback
add10(5, res => {
    add10(res, res => {
        add10(res, res => {
            console.log(res);
        });
    });
});

// promise
add20(5)
    .then(add20)
    .then(add20)
    .then(console.log);
    

// output
// 35
// 65

 

Promise를 사용할 때에는 then 함수를 사용해 원하는 만큼 추가적인 작업이 가능하다.

callback 함수를 사용할 때에는 순차적으로 실행할 함수의 수만큼 안으로 파고들어 가야 하기 때문에 코드가 복잡해지고 이벤트 관리도 어려워진다.

 

 

비동기 상황을 다루는 방법

 

var cb = add10(5, res => {
    add10(res, res => {
        add10(res, res => {
            console.log(res);
        });
    });
});

console.log('cb: ', cb);

var p = add20(5)
    .then(add20)
    .then(add20)
    .then(console.log);

console.log('promise: ', p);

// output
// cb:  undefined
// promise:  Promise {<pending>}
// 35
// 65

 

Promise가 callback과 다른 점 중 제일 중요한 것은 비동기 상황을 일급 값으로 다룬다는 점이다.

위에서 말했듯이 Promise는 대기(pending), 성공(funfilled), 실패(rejected)를 다루는 일급 값으로 이루어져 있다.

 

callback을 보면 비동기적인 상황을 다루는 것이 코드로만 표현되어 있다.

코드를 평가하면 undefined가 나오기 때문에 함수의 실행만으로는 어떤 상황이 일어나는지 알 수 없다.

함수의 리턴값은 중요하게 다뤄지지 않고 setTimeout이 일어난다는 점과 setTimeout이 끝났을 때 callback 함수를 실행한다는 것만 남아있다.

 

Promise를 보면 비동기 상황에 대한 값을 만들어서 리턴하고 있다.

코드를 평가했을 때 그 자리에 Promise가 리턴된다.

이처럼 비동기 상황이 값으로 다루어지고 있기 때문에 일급이며 이 값은 변수에 할당될 수도 있고 함수에 전달될 수도 있다.

따라서 그 이후에 이 Promise를 가지고 then() 을 통해 원하는 일들을 다룰 수 있다.

 

 

 

코딩애플, 콜백 함수가 뭔지 한국어로 쉽게 설명하는 영상

https://www.youtube.com/watch?v=-iZlNnTGotk