콜백과 프로미스 (Callback & Promise)

---

콜백 함수 (Callback Function)

비동기 처리 방식의 문제점을 해결하기 위해, 특정 로직 수행이 완료됐을 때 원하는 동작을 실행시킬 수 있도록 하는 함수!

1. 레스토랑 예약을 예시로 들 수 있다.
   • 우리는 레스토랑 예약을 통해 우리가 원하는 시간대에 웨이팅 없이 식사를 편하게 즐길 수 있고, 웨이팅을 하는 대신 그 시간을 자유롭게 활용할 수 있다.
   • 즉, 예약한 시간대**(로직 수행이 완료됐을 때)에 우리는 식당에 가서 먹기로 했던 메뉴를 시켜먹으면 되는 것이다(동작)**.

---

😈  콜백 지옥

우리는 가끔, 비동기 처리를 위해 콜백함수를 중첩하여 사용하는 경우를 맞이하는데…
이를 콜백 지옥(Callback Hell)이라고 부른다.
이렇게 콜백 함수가 꼬리에 꼬리를 무는 형식은 가독성도 떨어지고 변경 및 유지보수가 어렵다.

⇒ 이러한 콜백 지옥 문제를 해결하기 위해 필요한 것이 Promise와 Async다.

---

🤙  프로미스란?

“A promise is an object that may produce a single value some time in the future”

=> 자바스크립트 비동기 처리에 사용되는 객체로, 미래에 특정한 value를 생성해낸다.
“미래에 하나의 value를 생성해낼 것이라는 약속!”

1. 콜백 함수와 프로미스의 차이점?

   콜백 함수와 프로미스 모두 비동기적 처리 방식의 문제점을 해결하기 위한 함수라는 점에서는 동일하다.
   하지만 Promise는 이러한 콜백함수들이 한 객체로써 뭉쳐서 중첩되어있지 않고
   분리된 객체로써 논리적으로 상호 연결될 수 있도록 하는 하나의 절차적 함수라고 보면 된다.

2. 프로미스의 구조

   • new Promise()
   • resolve()
   • then()

3. 프로미스의 상태(state)

   • Pending(대기) : 비동기처리 로직이 아직 미완료된 상태

     new Promise(function (resolve, reject) {
       // ...
     });

   • Fullfilled(이행) : 비동기 처리가 완료 → 프로미스가 결과값을 반환

     //resolve가 됐고, 이제 then을 활용해 처리 결과값을 받을 수 있다.
     function getData() {
       return new Promise(function (resolve, reject) {
         const data = 100;
         resolve(data);
       });
     }
     
     // resolve()의 결과 값 data를 resolvedData로 받음
     getData().then(function (resolvedData) {
       console.log(resolvedData); // 100
     });

   • Rejected(실패) : 비동기 처리의 오류/실패

     //이렇게 리젝트에 대한 결과값(실패 이유)을 아래의 catch()를 통해 받을 수 있다.
     function getData() {
       return new Promise(function (resolve, reject) {
         reject(new Error('Request is failed'));
       });
     }
     
     // reject()의 결과 값 Error를 err에 받음
     getData()
       .then()
       .catch(function (err) {
         console.log(err); // Error: Request is failed
       });

---

Iterator & Iterable

*이터레이터 : 반복자
이터러블 : 반복 가능한*

1. 자바스크립트에서는 “반복 가능한(Iterable)” 요소들만 순회 또는 반복될 수 있다. ex) 배열

   이터레이터는 next, done, value의 구성을 갖는다!
   done : 이터레이터가 아직 루프중인지 확인
   value : 루프중일 때 해당하는 값을 반환

2. 이터레이터와 배열의 차이?

   이터레이터는 next 메서드만 기능할 수 있기 때문에, 배열의 기능적 부분집합이라고 볼 수 있다.

   • 하지만… 일반적으로 배열이 이터레이터보다 무겁고 배열이 이터레이터보다 메모리 효율성이 떨어진다.
   • 이터레이터는 다음 값 호출을 받았을 때, 그 때 필요한 값만 계산하는 것이 가능하기 때문이다. (next)

---

제너레이터 (Generator)

이터레이터를 사용할 수 있도록 해주는 함수 == 제너레이터
이터레이터 + 이터러블의 조합 == 제너레이터

1. 기본 문법

   function* gen() {
     yield 1;
     yield 2;
     yield 3;
   }
   
   var g = gen(); // "Generator { }"

2. 사용 예시 (무한 반복자)

   function* idMaker() {
     var index = 0;
     while (true) yield index++;
   }
   
   var gen = idMaker(); // "Generator { }"
   
   console.log(gen.next().value); // 0
   console.log(gen.next().value); // 1
   console.log(gen.next().value); // 2
   // ...

---