콜백 함수를 사용하는 이유와 문제점, 그리고 프로미스의 등장과 활용에 대해 정리합니다.

🛎️ 콜백 함수

콜백 함수란?

• callback의 단어 정의는 회신(부름에 대답하기)
• callback 함수란, 단어 그대로 해석하자면 부름에 대답하는 함수
• 다른 함수의 인자로 호출되어, 다른 함수 안에서 값을 돌려주는 함수이다.

콜백 함수의 특징과 단점

자바스크립트의 비동기 처리

자바스크립트의 동기 처리 (개념 이해에 도움이 되어 가져왔다)
자바스크립트는 싱글쓰레드 기반 언어이고 동기처리보다는 콜스택으로 올라온 실행문을 바로바로 처리한다는 개념일 듯 합니다. 그리고 시간이 오래걸리는 코드들은 이벤트 루프를 통해서 스택이 여유로울때 비동기처럼 처리하게 되겠죠.
- '자바스크립트는 기본적으로 동기로 동작하지 않나요?'에 대한 답변 중

함수 중간에 필요한 인자를 불러오는 일이 필요할 때, 자바스크립트는 그 일을 콜백함수에게 외주 주고 자바스크립트는 함수 나머지를 진행한고 이해했다.

콜백 지옥

• ES6 이전에 콜백함수를 활용하는 패턴은 '콜백 Callback Hell' 이라는 문제점이 있었다.
  예를 들어, 아래와 같이 함수가 연속적으로 Callback 함수의 결과값으로 나머지 로직을 실행해 나가는 경우...

  a 함수 ➤ 'b 콜백함수의 리턴값'을 이용해 로직을 진행

  b 콜백함수 ➤ 'c 콜백함수의 리턴값'을 이용해 로직을 진행

  c 콜백함수 ➤ 'd 콜백함수의 리턴값'을 이용해 로직을 진행

  d 콜백함수

• 가독성 나쁨
• 에러 처리 곤란
• 여러개의 비동기 처리를 한 번에 처리하는데 한계가 있음
  ... 라는 단점이 있었다

⏱️ 프로미스

프로미스의 등장

• ES6 에서 도입된 생성자
• 콜백함수의 처리가 완료되었을 때 다음 로직이 진행되도록, 즉, 비동기 작업에 순서를 설정할 수 있다
  - 예를들어, <서버에서 가져온 데이터를 화면에 보여주는 함수> 실행 시 콜백함수를 호출해 서버에서 데이터를 가져오는 중인데, 나머지 로직이 진행되어 '화면에 표시'하는 로직이 실행되는 문제점을 해결한다
  

구조

const QQQ = new Promise((resolve, reject) => {
	if (서버에서 데이터 불러오기 응답이 성공) {resolve 함수 실행}
	else {reject 함수 실행}
	}

활용하기 - 콜백의 단점 보완

📌 MDN: Promise() 생성자

• then, catch, finally 등 MDN에서 다양한 Promise의 Method를 확인할 수 있다
• 메서드를 활용해 콜백패턴의 단점을 보완했다