promise의 개념과 콜백함수와의 차이

참고자료: https://namu.wiki/w/callback%20%ED%95%A8%EC%88%98
참고자료: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#%EB%A7%88%EB%AC%B4%EB%A6%AC

콜백함수란?

다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수.
시스템에 의해 호출 시점이 결정되는 함수(비동기 구현을 위한 방법 중 하나)

콜백함수의 문제점( 콜백 지옥 )

비동기 작업을위해 사용되는 콜백의 특성상 비동기 이후에 처리될 작업들을 콜백 내부에 작성해주어야한다. 하지만 아무런 생각없이 사용하다보면 콜백안에 콜백을 무는 식으로 작성하게 되는 경우가 많은데
콜백안에 콜백을 물어서 오른쪽 아래로 코드가 내려가는 형태를 콜백 지옥이라고 한다.

obj.callback(parameter1, () => {
    obj.callback(parameter2, () => {
        obj.callback(parameter3, () => {
            obj.callback(parameter4, () => {
                obj.callback(parameter5, () => {
                    obj.callback(parameter6, () => {
                        console.log('Hello, World!')
                    })
                })
            })
        })
    })
})

이런 형식으로 되면 보기도 힘들고 코드의 흐름을 추적하기도 어렵고 수정도 쉽지가 않다.

promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

프로미스는 newPromise()로 호출시에 3가지의 상태를 가지고있으며 상태란 프로미스의 종료될 때까지처리과정을 의미하고있습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

promise와 콜백의 차이

콜백함수의 떨어지는 가독성을 대신해 Promise API를 사용하여 코드의 양을 줄이고 가독성을 증가시킵니다.