#21. 비동기 프로그래밍(3)

비동기 프로그래밍(3)

지난 시간에 callback을 이용해 비동기 작업에서 순서를 보장하는 방법을 알아보았다.
그런데 callback을 사용한 코드는 callback이 중첩될수록 가독성이 떨어지는 문제가 있었다.

그래서 오늘은 callback hell을 해결할 수 있는 새로운 방법인 Promise를 소개하도록 하겠다.

지난 시간에 callback으로 작성한 코드를 그대로 Promise를 이용해 작성해보고,
두 가지 코드를 비교해보자.

1. Callback 버전

const moveLeft = (cb) => {
    setTimeout(() => {
    	console.log('left')
        
        if(cb){
          cb()
        }
    }, 10)
}

const moveRight = (cb) => {
    setTimeout(() => {
        console.log('right')
        
         if(cb){
          cb()
         }
    }, 30)
}

moveRight(function() {
    moveLeft(function() {
        moveRight(function() {
            moveLeft()
        })
    })
})

2. Promise 버전

const moveLeftPromise = new Promise((resolve, reject) => {
    resolve(() => console.log('left'))
})

const moveRightPromise = new Promise((resolve, reject) => {
    resolve(() => console.log('right'))
})

moveRightPromise
    .then(res => {
        res()
        return moveLeftPromise
    })
    .then(res => {
        res()
        return moveRightPromise
    })
    .then(res => {
        res()
        return moveLeftPromise
    })
    .then(res => res())
    
 // 실행 결과 : right left right left

---

3. 비교
callback이 계속 중첩되면 > 모양의 callback hell이 생겨 가독성이 떨어지는 문제가 있었다.

이를 해결하기 위해 ES6에서 Promise가 도입 되었고,
Promise는 중첩되더라도 callback 처럼 > 모양의 코드가 되지는 않기 때문에 callback에 비해 가독성이 우수하다. 대신에 Promise는 then이 일자로 쭉 연결되는 then chain을 생성한다.

4. 결론
callback과 promise의 역할은 비동기 작업의 순서를 보장해주는 것으로 동일하다.
그렇지만 코드의 가독성은 promise가 더 우수하므로 웬만하면 promise를 사용하도록 하자.

---

지금까지 promise를 사용해 callback hell을 제거하는 방법을 알아보았다.
callback hell을 없애긴 했지만 대신 then chain이 생겼다.
then chain 정도면 깔끔한 코드라고 생각할 수 있지만, 자바스크립트에는 then chain 마저 제거할 수 있는 방법이 존재한다.

오늘은 여기에서 마무리하도록 하고, 다음 시간에 then chain을 제거하는 방법에 대해 소개하겠다.