Javascript의 Callback vs Promise

callback  vs promise vs async/await

 

해당 글이 시작되기전 동기와 비동기의 기본 개념 정리가 필요하다면 아래 링크를 타고 먼저 개념 확인 후 아래 글을 읽는 것이 더 좋다고 생각한다.

https://yukang-laboratory.tistory.com/14

Javascript 동기와 비동기 차이를 알아보자

Callback function이란?

Callback function은 javascript의 비동기방식 중 하나로 callback function으로 데이터를 주고받기 위해 사용한다.즉  다른 함수에 매개변수로 넘겨준 함수이다.

 

Callback hell이란?

콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다. 즉 Callback hell은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다.

 

promise란?

javascript는 비동기 방식으로 통신을 하기 위해서 fucntion을 사용하여 데이터를 callback해서 받는다. 여기서 callback하는 부분이 많지 않다면 문제가 되지 않지만 front-end부분이 무거워지고 복잡해지면서 문제가 발생한다. 바로 callback지옥에 빠지는 것이다 아래와 같이 callback지옥에 빠지게 된다면 개발자가 하나의 callback을 받기 위해 너무 많은 작업을 해야하기 때문에 생산성이 떨어진다. 이런 부분을 해결하기 위해서 Promise가 등장하였다.

 

promise의 구성

• 대기(pending) - 이행하지도, 거부하지도 않는 초기 상태
• 이행(fulfilled) - 연산에 성공적으로 완료
• 거부(rejected) - 연산에 실패