📖 Promise
💬 정의
- JavaScript의 비동기 로직 처리용 객체
- CallBack Hell을 해결하기 위해 ES6부터 지원
- then(), catch()문의 체이닝으로 분기(에러) 처리 가능
📖 Async / Await
💬 정의
- JavaScript의 비동기 로직 처리용 키워드
- Promise를 기반으로 사용하며 Promise의 단점(then Hell)
을 해결하기 위해 ES8부터 지원
1. 동기적인 로직처럼 직관적인 코드의 실행 순서를 보여줌
- try...catch문으로 분기(에러) 처리 가능
💡 답변
Async / Await와 Promise 차이
첫번째 차이점은 에러 핸들링 기능 여부입니다.
먼저 ES6부터 지원하는 Promise는 비동기 로직 처리용 객체이며
then, catch 메서드를 활용하여 에러 핸들링이 가능합니다.
ES8부터 지원하는 Async / Await는 비동기 로직 처리용 키워드이며
에러 핸들링을 할 수 있는 메서드가 따로 존재하는 객체가 아니므로
try-catch 문을 활용해 에러를 핸들링해야합니다.
두번째 차이점은 코드의 가독성입니다.
Promise가 콜백 지옥 등의 단점을 해결하기 위해 지원을 시작했지만
여전히 then 지옥이라는 가독성 문제가 있지만
Async / Await는 동기적인 로직처럼 직관적인 코드의 흐름으로
읽을 수 있습니다.
Promise와 Callback의 차이
먼저 비동기 처리 결과 값의 저장 및 사용에서 차이가 있습니다.
Callback의 경우 비동기 로직의 결과값을 처리하려면 Callback안에서만 처리해야하고
Callback밖에서는 비동기의 응답 값을 알 수 없지만
ES6부터 지원하는Promise는 객체형으로 존재하기 때문에 then()을 사용하여
값을 확인 가능합니다.
그리고 가독성 차이가 있습니다.
Callback을 중첩해서 사용하는 콜백지옥에 빠지게되면
코드의 들여쓰기를 계속 해야되고 가독성이 안좋습니다. 거기다가 에러핸들링까지하면
가독성이 더욱 나빠집니다. 하지만 promise는 then,catch 메서드로 직관적인 코드가
되어 가독성이 좋아집니다. 하지만 여전히 중첩해서 사용하면 then지옥이라 호칭될 만큼
가독성이 매우 좋은편은 아닙니다.
