[JS] 제너레이터와 async/await

1. 제너레이터 함수

코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수

• function* 로 정의한 함수.
• 호출하면 바로 실행되지 않고 “제너레이터 객체(이터레이터)”를 반환.
• 이 객체에는 next(), return(), throw() 메서드가 있고,
• yield 지점에서 실행이 일시중지/재개된다.
• next()를 호출할 때마다 다음 yield까지 진행된다.

 

제너레이터 vs 일반함수

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다

 

일반 함수는 호출하면 제어권이 함수에게 넘어가고, 함수가 호출된 이후 함수 실행을 제어할 수 없다 → 함수 밖에서 실행 중인 함수를 멈추거나 재개할 수 없다

제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다.

function* steps() {
  console.log('A');          // 시작
  yield 1;                   // ⟵ 여기서 일시중지 (값 1을 밖으로 보냄)
  console.log('B');          // 재개되면 여기부터
  yield 2;                   // ⟵ 또 중지 (값 2)
  console.log('C');          // 재개되면 여기부터
  return 3;                  // 종료 (값 3)
}

const it = steps();

console.log(it.next()); // { value: 1, done: false }  ▶ 'A'까지 실행 후 첫 yield에서 멈춤
console.log(it.next()); // { value: 2, done: false }  ▶ 'B' 실행 후 두 번째 yield에서 멈춤
console.log(it.next()); // { value: 3, done: true }   ▶ 'C' 실행 후 return으로 끝

 

2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다

일반 함수를 호출하면 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환.

즉, 함수가 실행되고 있는 동안에는 함수 외부에서 함수 내부로 값을 전달하여 함수의 상태를 변경 X

제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고, 함수 호출자로부터 상태를 전달받을 수 있다.

 

 

3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환

일반 함수는 함수코드를 실행하고 값을 반환

제너레이터 함수 : 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환.

function* askName() {
  const name = yield '이름이 뭐에요?';   // a
  return `안녕하세요, ${name}님!`;       // b
}

const it2 = askName();                    // A
console.log(it2.next());                  // B
console.log(it2.next('은서'));            // C

 

A. askName을 function* 으로 정의되었으므로 제너레이터 함수, 지금은 코드가 실행되지 않음

대신 제너레이터 객체 it2를 반환

→ it2는 next/return/throw 메서드를 가진 이터레이터

B. it2. next() 호출

• 제너레이터 실행이 시작되어 yield 줄
• a 줄에서 yield '이름이 뭐에요?'를 만나면:
  • 밖으로 내보내는 값(value): '이름이 뭐에요?'
  • 일시 중지 위치: a 줄의 yield 표현식 바로 뒤 (대입식의 오른쪽)
  • next()의 반환: { value: '이름이 뭐에요?', done: false }
• 중요: 이 순간 a의 const name = …는 아직 완료되지 않았음.
• yield는 “값을 밖에 내보내고 멈춘” 상태일 뿐

C. it2.next(’은서’)

• 멈춰 있던 지점(①의 yield)에서 다시 재개된다.
• 이번 next('은서')로 전달한 값은, 바로 직전 yield 표현식의 결과가 된다.
  • 즉, const name = (yield '이름이 뭐에요?')에서
  • name에는 '은서'가 대입된다.
• 이어서 b 줄 실행: return 안녕하세요, ${name}님!``
• → 최종 반환값 '안녕하세요, 은서님!'을 내보내며 종료.
• next('은서')의 반환: { value: '안녕하세요, 은서님!', done: true }

 

---

 

2. 제너레이터 함수의 정의

• function* 키워드로 선언
• 하나 이상의 yield 표현식을 포함
• 나머지는 일반 함수 정의와 동일

// 제너레이터 함수 선언문
function* genDecFunc() {
  yield 1;
}

// 제너레이터 함수 표현식
const genExpFunc = function* () {
  yield 1;
};

// 제너레이터 메서드
const obj = {
  * genObjMethod() {
    yield 1;
  }
};

// 제너레이터 클래스 메서드
class MyClass {
  * genClsMethod() {
    yield 1;
  }
}

 

← *(애스터리스크) 의 위치는 functon과 함수명 사이면 다 가능

일관성을 위해 function* 권장

function* genFunc() { yield 1; } //권장

function * genFunc() { yield 1; }

function *genFunc() { yield 1; }

function*genFunc() { yield 1; }

제너레이터 함수는 화살표 함수로 정의 X

const genArrowFunc = * () => {
  yield 1; //제너레이터 함수가 아니므로 yield 사용 불가
}; // SyntaxError: Unexpected token '*'

• 제너레이터 표기는 function* 또는 **async function**에만 붙는 전용 문법
• 화살표 함수 문법( () => {} )에는 를 붙일 자리가 아예 없음
• 즉, 화살표 함수의 문법 규칙에 * 토큰(제너레이터 표지)이 포함되어 있지 않기 때문에 파서가 *를 보고 SyntaxError를 낸다

제너레이터 함수는 new 연산자와 함께 생성자 함수로 호출X

function* genFunc() {
  yield 1;
}

new genFunc(); // TypeError: genFunc is not a constructor

• new가 동작하려면 함수가 생성자(constructible) 여야 한다
• 즉, 내부적으로 [[Construct]]라는 동작을 가져야 한다
• 제너레이터 함수는 “생성자”가 아닙니다. 호출하면 객체를 생성하는 대신 “제너레이터(이터레이터) 객체”를 반환하는 팩토리 역할만 함
• → new genFunc()를 하면 TypeError: not a constructor

 

---

3. 제너레이터 객체

• 제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환
• 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터

→ Symbol.iterator 메서드를 상속받는 이터러블

→ value, done 프로퍼티를 가지는 이터레이터 result 객체를 반환하는 next 메서드 소유하는 이터레이터

function* steps() {
  console.log('A');          // 시작
  yield 1;                   // ⟵ 여기서 일시중지 (값 1을 밖으로 보냄)
  console.log('B');          // 재개되면 여기부터
  yield 2;                   // ⟵ 또 중지 (값 2)
  console.log('C');          // 재개되면 여기부터
  return 3;                  // 종료 (값 3)
}

const it = steps();

console.log(it.next()); // { value: 1, done: false }  ▶ 'A'까지 실행 후 첫 yield에서 멈춤
console.log(it.next()); // { value: 2, done: false }  ▶ 'B' 실행 후 두 번째 yield에서 멈춤
console.log(it.next()); // { value: 3, done: true }   ▶ 'C' 실행 후 return으로 끝

→ next 메서드 : value, done 프로퍼티를 가지는 이터레이터 리절트 객체를 반환

// 제너레이터 함수
function* genFunc() {
  yield 1;
  yield 2;
  yield 3;
}

// 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
const generator = genFunc();

// 제너레이터 객체는 이터러블이면서 동시에 이터레이터다.
// 이터러블은 Symbol.iterator 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체다.
console.log(Symbol.iterator in generator); // true
// 이터레이터는 next 메서드를 갖는다.
console.log('next' in generator); // true

일반함수에는 없는 next, return, throw

next

next return throw

value	yield 된 값	인자로 전달 받은 값	undefined
done	뒤에 남아있으면 false, return으로 뒤에 없으면 true	true	true

제너레이터 함수의 yield 표현식까지 코드 블럭을 실행하고

• value : yield 된 값
• done : 뒤에 남으면 false, return을 만나고 끝나면 true

이터레이터 리절트 객체를 반환

function* genFunc() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (e) {
    console.error(e);
  }
}

const generator = genFunc();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.return('End!')); // {value: "End!", done: true}

 

return

• value : 인수로 전달받은 값
• done : true

이러테이터 리절트 객체를 반환

throw

• 인수로 전달받은 에러를 발생시키고
• value : undefined
• done : true

이터레이터 리절트 객체를 반환

function* genFunc() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (e) {
    console.error(e);
  }
}

const generator = genFunc();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.throw('Error!')); // {value: undefined, done: true}

 

---

 

4. 제너레이터의 일시 중지와 재개

yield 키워드 → 실행 중지 or yield 키워드 뒤에 오는 표현식의 평과 결과를 제너레이터 함수 호출자에게 반환

next 메서드 → 필요한 시점에 다시 재개

// 제너레이터 함수
function* genFunc() {
  yield 1;
  yield 2;
  yield 3;
}

// 제너레이터 함수를 호출하면 제너레이터 객체를 반환
// 이터러블이면서 동시에 이터레이터인 제너레이터 객체는 next 메서드를 갖는다.
const generator = genFunc();

// 처음 next 메서드를 호출하면 첫 번째 yield 표현식까지 실행되고 일시 중지
// next 메서드는 이터레이터 리절트 객체({value, done})를 반환
// value : 첫 번째 yield 표현식에서 yield된 값 1이 할당
// done : 제너레이터 함수가 끝까지 실행되었는지를 나타내는 false가 할당
console.log(generator.next()); // {value: 1, done: false}

// 다시 next 메서드를 호출하면 두 번째 yield 표현식까지 실행되고 일시 중지
// next -> ({value, done})를 반환
// value : 두 번째 yield 표현식에서 yield된 값 2가 할당
// done : 제너레이터 함수가 끝까지 실행되었는지를 나타내는 false가 할당
console.log(generator.next()); // {value: 2, done: false}

// 다시 next 메서드를 호출하면 세 번째 yield 표현식까지 실행되고 일시 중지
// next -> ({value, done})를 반환
// value : 세 번째 yield 표현식에서 yield된 값 3이 할당
// done : 제너레이터 함수가 끝까지 실행되었는지를 나타내는 false가 할당
console.log(generator.next()); // {value: 3, done: false}

// 다시 next 메서드를 호출하면 남은 yield 표현식이 없으므로 제너레이터 함수의 마지막까지 실행한다.
// next -> ({value, done})를 반환
// value -> undefined가 할당
// done : 제너레이터 함수가 끝까지 실행되었음을 나타내는 true가 할당
console.log(generator.next()); // {value: undefined, done: true}

 

 

제너레이터 객체의 next 메서드에 전달한 인수는 제너레이터 함수의 yield 표현식을 할당받는 변수에 할당.
yield 표현식을 할당받는 변수에 yield 표현식의 평가 결과가 할당되지 않는 것에 주의

 

function* genFunc() {
  // 첫 next()를 호출하면 첫 번째 yield까지 실행되고 일시 중지된다.
  // 이때 next()의 반환 객체는 { value: 1, done: false }이며,
  // 아직 x에는 아무 값도 들어가지 않았다(다음 next(arg)로 결정됨).
  const x = yield 1;

  // 두 번째 next(100)을 호출하면, 전달한 100이 바로 직전 yield 표현식의 값이 되어 x에 대입된다.
  // 이어서 실행되어 두 번째 yield에서 (x + 10) = 110을 밖으로 내보내고 일시 중지한다.
  // 마찬가지로 아직 y에는 아무 값도 들어지 않았다.
  const y = yield (x + 10);

  // 세 번째 next(50)을 호출하면, 전달한 50이 직전 yield 표현식의 값이 되어 y에 대입된다.
  // 이어서 함수 끝까지 실행되며, 반환값 x + y = 100 + 50 = 150을 내보내고 done: true로 종료한다.
  return x + y;
}

// 제너레이터 함수를 호출하면 '실행을 미룬' 제너레이터 객체(이터레이터)를 반환한다.
const generator = genFunc(0); // 인자 0은 무시됨(첫 next 전까지는 어떤 인자도 전달되지 않음).

// 1) 첫 호출: 인자를 주더라도 무시된다. 첫 번째 yield(1)까지 실행하고 멈춘다.
let res = generator.next();
console.log(res); // { value: 1, done: false }

// 2) 두 번째 호출: next(100)
//    이전 yield의 결과가 되어 x = 100이 된다.
//    이어서 두 번째 yield에서 (x + 10) = 110을 내보내고 멈춘다.
res = generator.next(100);
console.log(res); // { value: 110, done: false }

// 3) 세 번째 호출: next(50)
//    이전 yield의 결과가 되어 y = 50이 된다.
//    함수가 끝까지 실행되며 x (100) + y (50) = 150을 반환하고 종료한다.
res = generator.next(50);
console.log(res); // { value: 150, done: true }

• next()로 전달한 인자는 이전 yield 표현식을 할당 받는 변수에 들어감
• → 맨 처음으로 전달한 인자는 무시된다.

---

 

5. 제너레이터의 활용

1. 이터러블구현

제너레이터 함수를 이용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간단히 이터러블을 구현할 수 있다

→ 왜? 제너레이터 함수가 이터러블하면서 동시에 이터레이터이므로

// 무한 이터러블을 생성하는 함수
const infiniteFibonacci = (function () {
  let [pre, cur] = [0, 1];        // ⬅️ 폐쇄된 상태(클로저): 이전값/현재값 저장

  return {
    [Symbol.iterator]() { return this; }, // ⬅️ 이터러블: for..of가 부를 때
    next() {                              // ⬅️ 이터레이터: 한 걸음 진행
      [pre, cur] = [cur, pre + cur];      // 피보나치 전진
      return { value: cur };              // done 생략 => 무한
    }
  };
}());

// infiniteFibonacci는 무한 이터러블이다.
for (const num of infiniteFibonacci) {
  if (num > 10000) break;
  console.log(num); // 1 2 3 5 8...2584 4181 6765
}

• IIFE(즉시 실행 함수) 가 한 번 실행되어 객체를 반환하고, 그 반환된 객체를 infiniteFibonacci에 담음.
• 반환된 객체는:
  • Symbol.iterator 메서드가 있어서 이터러블이고,
  • next() 메서드가 있어서 이터레이터이기도 함.
  • return this 덕분에 “이터러블 === 이터레이터” 형태(= 자기 자신이 반복자).

즉, for (const x of infiniteFibonacci)가 시작되면,

• 엔진은 infiniteFibonacci[Symbol.iterator]()를 호출 → 자기 자신을 받음
• 그리고 매 반복마다 next()를 호출해 { value, done }를 받음

[pre, cur] = [cur, pre + cur];
return { value: cur };

 

호출 갱신 후 (pre, cur) 반환 value

1번째 next	(1, 1)	1
2번째 next	(1, 2)	2
3번째 next	(2, 3)	3
4번째 next	(3, 5)	5
5번째 next	(5, 8)	8
…	…	…

위에 코드보다 제너레이터 함수를 사용하면 더 간단하다.

// 무한 이터러블을 생성하는 제너레이터 함수
const infiniteFibonacci = (function* () {
  let [pre, cur] = [0, 1];

  while (true) {
    [pre, cur] = [cur, pre + cur];
    yield cur;
  }
}());

// infiniteFibonacci는 무한 이터러블이다.
for (const num of infiniteFibonacci) {
  if (num > 10000) break;
  console.log(num); // 1 2 3 5 8...2584 4181 6765
}

• yield cur 가 있는 부분까지 호출한 후 다음 next에서는 while true로 되어 있으므로 다시 while 문을 반복

 

2. 비동기 처리

 

next 메서드와 yield 표현식을 통해 함수 호출자와 함수의 상태를 주고 받을 수 있다

→ 프로미스를 사용한 비동기 처리를 동기 처리처럼 구현

→ 프로미스의 후속 처리 메서드 then/catch/finally 없이 비동기 처리 결과 반환하도록 구현 가능

const fetch = require('node-fetch');

// 🧩 제너레이터 실행기
const async = generatorFunc => {
  const generator = generatorFunc(); // 1️⃣ 제너레이터 객체 생성

  const onResolved = arg => {
    const result = generator.next(arg); // 2️⃣ next() 실행

    return result.done
      ? result.value // 7️⃣ 제너레이터 완료 시 value 반환
      : result.value.then(res => onResolved(res)); // 3️⃣ 프로미스 resolve 후 재귀 호출
  };

  return onResolved; // 4️⃣ 클로저(onResolved) 반환
};

// 🌀 제너레이터 함수 실행
(async(function* fetchTodo() { // 5️⃣ async 함수 호출
  const url = '<https://jsonplaceholder.typicode.com/todos/1>';

  const response = yield fetch(url); // 6️⃣ fetch() → 프로미스 반환
  const todo = yield response.json(); // 8️⃣ response.json() → 프로미스 반환
  console.log(todo); // {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
})()); // 9️⃣ 반환된 onResolved() 즉시 실행

1️⃣ 제너레이터 객체 생성

• async(generatorFunc)가 호출되면 내부에서 generatorFunc()—즉 fetchTodo() 제너레이터 함수가 실행만 해서(시작 X) 제너레이터 객체(generator)를 만든다.
• 아직 fetchTodo 본문은 첫 줄도 진행되지 않았음. 제너레이터는 next()가 들어오면 그때부터 돈다.
• onResolved 는 generator 를 캡쳐(기억)하고 있으므로, 언제든지 호출되면 generator.next() 실행 가능 → 클로져

2️⃣ 첫 번째 next() 호출

• onResolved()가 처음 호출된다(인수 없음 → undefined).
• 내부에서 generator.next(undefined) 실행 → fetchTodo가 처음으로 달리기 시작.
• const response = yield fetch(url); 까지 진행되고 멈춤.
  • 이때 result = { value: Promise<Response>, done: false }.
  • 즉, **멈춘 위치는 yield fetch(url)*이고, value는 fetch(url)이 반환한 프로미스.

3️⃣ 프로미스가 해결되면 재귀 재개

• done:false이므로 result.value.then(res => onResolved(res))로 등록.
• fetch(url)이 resolve되면, 그 결과(Response 객체)를 들고 다시 onResolved(res) 호출(재귀 진입).
• 요 포인트가 핵심: yield에서 “멈춘” 제너레이터를, 프로미스가 끝난 값으로 다시 깨워준다는 것.

4️⃣ 클로저(onResolved) 반환

• 1️⃣ 단계에서 언급한 대로, async()는 onResolved를 리턴하고 끝난다.
• 코드에서는 이 반환값을 즉시 실행(IIFE) 하도록 적어놨기 때문에(→ 9️⃣) 흐름이 이어진다.
• 기억하자: onResolved는 generator를 캡처해서, 언제든지 외부에서 다시 next()를 눌러 이어 달릴 수 있게 만든 버튼 같은 존재.

5️⃣ 반환된 onResolved 즉시 실행(IIFE)

• 소스의 (... )(); 부분이 바로 이거.
• async(fetchTodo) → onResolved 반환 → 곧바로 onResolved() 호출.
• 여기서 2️⃣이 시작된다고 봐도 된다(처음 next()가 트리거되는 지점).

6️⃣ 두 번째 next(res) — Response 주입

• 3️⃣에서 등록했던 .then이 불리면, onResolved(res)가 호출된다.
• 내부에서 generator.next(res) 실행 → 방금 받은 Response가 fetchTodo의 response 변수에 할당되면서 다음 줄로 진행.
• 이제 const todo = yield response.json(); 까지 가서 다시 멈춤.
  • 이번 result = { value: Promise<Todo>, done: false }.

8️⃣ 세 번째 next(todo) — 데이터 주입

• response.json()이 resolve되면 또 onResolved(todo) 호출.
• generator.next(todo) 실행 → todo가 변수에 할당되고, console.log(todo)까지 끝.
• 제너레이터 함수 본문이 끝났으므로 다음 next() 결과는
• result = { value: undefined, done: true }.

9️⃣ 완료 처리 (done:true)

• done:true이므로 onResolved는 result.value—즉 undefined—를 그대로 리턴하고 재귀 종료.
• 재귀로 쌓였던 onResolved(...) 호출들이 순차적으로 언와인드되며 모두 undefined로 끝난다.

7️⃣ 최종 반환값은 undefined

• 제너레이터의 반환값(여기서는 명시적 return 없으니 undefined)이 최종 값.
• 즉, 이 “실행기”는 비동기 동작을 순차로 풀어주는 역할만 하고, 특별한 값을 돌려주진 않는다.

 

 

위 코드를 async/await을 사용하면 제너레이터 함수와 같이 실행할 필요 없다

const fetch = require('node-fetch'); // 1️⃣ node 환경에서 fetch 사용을 위한 모듈
const co = require('co'); // 2️⃣ co: 제너레이터 기반 비동기 실행기

co(function* fetchTodo() { // 3️⃣ co()가 제너레이터 함수를 실행
  const url = '<https://jsonplaceholder.typicode.com/todos/1>';

  const response = yield fetch(url); // 4️⃣ fetch() → Promise 반환 → co가 resolve될 때까지 기다림
  const todo = yield response.json(); // 5️⃣ response.json() → Promise 반환 → co가 resolve될 때까지 기다림
  console.log(todo); // 6️⃣ 최종 데이터 출력
});

 

3️⃣ co(function* fetchTodo() { ... })가 호출

co()는 이 제너레이터 함수를 실행하면서 내부에서 next()를 계속 눌러주는 역할

→ co가 대신 “프로미스가 끝날 때마다 알아서 다음 next() 호출 → 비동기 흐름을 자동으로 순서대로 이어주는 관리자

4️⃣ 제너레이터 내부에서 const response = yield fetch(url);이 실행

• fetch(url)은 네트워크 요청을 보내고 Promise<Response>를 반환
• yield를 만나면 함수 멈춤
• co 는 fetch(url)이 완료될 때까지 기다렸다가 결과 Response 객체를 다시 next()인수로 넣어서 제너레이터 재개

5️⃣ const todo = yield response.json();

• response.json() 역시 비동기 함수이므로 Promise를 반환
• 또 한 번 yield에서 멈추고, co가 기다립니다.
• 그 Promise가 resolve되면, 즉 JSON 변환이 끝나면
  • 그 결과 객체(todo 데이터)가 next() 의 인수로 전달되어 todo 변수에 저장

6️⃣ console.log(todo)

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

---

6. async/await

제너레이터를 사용해서 비동기 처리를 동기 처리처럼 동작하도록 구현하면 코드가 길어져서 가독성 저하

→ ES8부터 async/await 도입

• 프로미스 기반 동작
• then/catch/fianlly 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스 사용 가능

const fetch = require('node-fetch'); // 1️⃣ node 환경에서 fetch 사용을 위한 모듈
const co = require('co'); // 2️⃣ co: 제너레이터 기반 비동기 실행기

co(function* fetchTodo() { // 3️⃣ co()가 제너레이터 함수를 실행
  const url = '<https://jsonplaceholder.typicode.com/todos/1>';

  const response = yield fetch(url); // 4️⃣ fetch() → Promise 반환 → co가 resolve될 때까지 기다림
  const todo = yield response.json(); // 5️⃣ response.json() → Promise 반환 → co가 resolve될 때까지 기다림
  console.log(todo); // 6️⃣ 최종 데이터 출력
});

이거는 위에서 봤던 제너레이터 함수 없이 async 함수로 구현

1. async 함수

1. await 키워드는 반드시 async 함수 내부에서 사용해야 한다.
2. async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.
3. async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다.

async function foo() {
  return 1;
}
// 아래 두 코드는 같다
foo().then(console.log); // 1
Promise.resolve(1).then(console.log); // 1

→ async 키워드는 항상 Promise 객체를 반환하는 함수를 만든다

즉, 함수 안에서 return 1;처럼 평범하게 반환해도, 실제 반환값은 Promise.resolve(1) 이 된다

1. async 함수 선언문

async function foo(n) { return n; }
foo(1).then(v => console.log(v)); // 1

• 일반 함수 선언(function foo) 앞에 async 키워드를 붙인 형태.
• 호출 시 Promise로 감싸진 값을 반환 → .then()으로 결과 처리 가능.

2. async 함수 표현식

const bar = async function (n) { return n; };
bar(2).then(v => console.log(v)); // 2

• 이름 없는 함수에 async를 붙여 변수에 할당.
• 첫 번째 예시와 동작은 같고, 익명 함수 형태로 사용할 수 있음.

3. async 화살표 함수

const baz = async n => n;
baz(3).then(v => console.log(v)); // 3

• 화살표 함수 버전.
• 한 줄일 경우 {}와 return을 생략 가능.
• async + 화살표 함수 조합은 짧은 비동기 콜백 작성에 자주 사용됨.
• 예: arr.map(async item => await fetch(item))

4. async 메서드 (객체 리터럴 안)

const obj = {
  async foo(n) { return n; }
};
obj.foo(4).then(v => console.log(v)); // 4

• 객체 메서드에 async를 붙인 형태.
• 객체의 프로퍼티 foo가 비동기 함수가 되어 Promise 반환.

5. async 클래스 메서드

class MyClass {
  async bar(n) { return n; }
}
const myClass = new MyClass();
myClass.bar(5).then(v => console.log(v)); // 5

• 클래스 내부 메서드에 async를 붙이면, 그 메서드도 Promise를 반환.
• 주로 비동기 초기화, 서버 요청, DB 호출 등에서 자주 사용됨.

모두 Promise 를 반환한다는 점은 동일, 차이는 선언 위치와 문법 형태에만 있다.

즉, async를 어디에 붙이든 그 함수는 ‘항상 비동기 함수’로 동작

 

2. await 키워드

await 등장 이유

Promise는 비동기이기 때문에 .then()을 써야 결과를 얻을 수 있다.

foo().then(v => console.log(v));

이걸 매번 .then()으로 쓰면 가독성이 나빠지므로, await이 등장

• await 키워드는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과 반환한다.
• await 키워드는 반드시 프로미스 앞에서 사용해야 한다.

 

왜 await은 async 함수 안에서만 쓸 수 있나?

• await은 비동기 함수의 흐름을 일시 중단 시키는 기능이기 때문

만약 일반 함수에서 await을 사용을 허용하면 동기 코드 흐름이 깨져버리기 때문에 자바스크립트는 문법적으로 막아둠

// ❌ SyntaxError
function foo() {
  const data = await fetch(...); // 일반 함수에선 불가능
}

const getGithubUserName = async id => {
    const res = await fetch(`https://api.github.com/users/${id}`); // (1)
    const { name } = await res.json();  // (2)
    console.log(name); // Ungmo Lee
};

getGitUserName('ungmo2');

• await 키워드는 프로미스가 settled 상태가 될 때까지 대기한다고 했다.
• (1)의 fetch 함수가 수행한 HTTP 요청에 대한 서버의 응답이 도착해서 fetch 함수가 반환한 프로미스가 settled 상태가 될때까지 (1)은 대기
• 프로미스가 settled 상태가 되면 프로미스가 resolve한 처리 결과가 res 변수에 할당

await 키워드는 다음 실행을 일시 중지 시켰다가 프로미스가 settled 상태가 되면 다시 재개

 

⚠️ 프로미스가 settled 상태가 되었다?

settled :
이제 더 이상 상태가 바뀌지 않는 시점

 

Promise의 상태 3가지

상태 설명 다음 단계

pending	대기 중 — 아직 결과(성공/실패)가 정해지지 않음	→ fulfilled 또는 rejected 로 이동
fulfilled	비동기 작업 성공(resolve 호출됨)	settled 상태
rejected	비동기 작업 실패(reject 호출됨)	settled 상태

Promise가 fulfilled(성공) 또는 rejected(실패) 중 어느 한쪽으로 결정되면 그 시점부터는 settled(확정됨) 상태가 됨

 

 

 

앞선 비동기 처리의 결과를 가지고 다음 비동기 처리를 수행하는 함수의 예시

async function bar(n) {
    const a = await new Promise(resolve => setTimeout(() => resolve(n), 3000));
    // 두 번째 비동기 처리를 수행하려면 첫 번째 비동기 처리 결과가 필요하다.
    const b = await new Promise(resolve => setTimeout(() => resolve(a + 1), 2000));
    // 세 번째 비동기 처리를 수행하려면 두 번째 비동기 처리 결과가 필요하다.
    const c = await new Promise(resolve => setTimeout(() => resolve(b + 1), 1000));
    
    console.log([a,b,c]); // [ 1, 2, 3 ]
}

bar(1); // 약 6초 소요된다.

 

3. 에러 처리

비동기 처리를 위한 콜백 패턴의 단점은 에러 처리가 곤란

에러는 호출자 방향으로 전파

→ 콜 스택의 아래 방향으로 전파

async function a() {
  b();
}
function b() {
  throw new Error('에러!');
}
a();

 

a() → b() → Error 발생

b를 호출한 쪽인 a 쪽으로 에러가 전파되어 결국 전역에서 Uncaught Error 가 잡힘

그런데 setTimeout은 비동기

try {
  setTimeout(() => { throw new Error('Error!'); }, 1000);
} catch (e) {
  console.error('캐치한 에러', e);
}

 

겉보기엔 try...catch가 있으니 에러가 잡힐 것 같지만,

실제로는 catch로 안 들어옵니다.

→ 콜 스택이 분리되기 때문

• try...catch는 현재 실행 중인 스택 안에서만 유효합니다.
• setTimeout의 콜백은 현재 스택이 끝난 후,
• 나중에 “이벤트 루프”를 통해 새로 실행되는 함수

1. try 블록 실행 시작
2. setTimeout 등록 (콜백은 아직 실행 안 됨)
3. try 블록 종료 → catch 블록도 사라짐
4. 1초 후 setTimeout 콜백이 실행됨 (새로운 스택)
5. 콜백 내부에서 Error 발생 → 이미 try...catch 범위 밖임

Uncaught Error: Error!

 

 

비동기 함수의 콜백 함수를 호출한 것은 비동기 함수가 아니기 때문에 try...catch 문을 사용해 에러를 캐치할 수 없다.

• setTimeout 자체는 비동기 함수이지만,
• 콜백을 실행시키는 주체는 자바스크립트 엔진의 이벤트 루프이기 때문

즉, 콜백이 실행될 때는 try 블록의 문맥이 이미 사라진 상태라 그 안에서 발생한 에러는 더 이상 catch로 전파되지 못함

 

비동기콜백 내부의 에러를 잡고 싶다면 콜백 내부에서 직접 try…catch

setTimeout(() => {
  try {
    throw new Error('Error!');
  } catch (e) {
    console.error('에러 잡음:', e);
  }
}, 1000);