JavaScript의 yield 키워드란? 제너레이터 함수 완벽 가이드

JavaScript의 yield 키워드란?

JavaScript에서 yield 키워드는 제너레이터(generator) 함수의 실행을 일시 중지하거나 다시 재개하는 데 사용되는 특수한 키워드입니다. yield 표현식의 값은 제너레이터 함수를 호출한 쪽(caller)에 반환됩니다.

일반적인 함수와 달리, 제너레이터 함수는 yield를 만날 때마다 실행을 멈추고 값을 반환합니다. 이후 next() 메서드가 호출되면 중단되었던 지점부터 실행을 이어갑니다.

yield 사용 예제

function* displayRank() {
  var selPlayers = [1, 2, 3, 4];
  for (var a = 0; a < selPlayers.length; a++) {
    yield selPlayers[a];
  }
}

위 코드에서 function* 문법으로 선언된 displayRank()가 바로 제너레이터 함수입니다. 배열의 각 요소를 순회하면서 yield를 통해 값을 하나씩 반환합니다.

제너레이터 함수 호출 방법

제너레이터 함수를 정의한 후에는 아래와 같이 사용할 수 있습니다.

var rank = displayRank();

// value: 1
alert(rank.next());

// value: 2
alert(rank.next());

// value: 3
alert(rank.next());

// value: 4
alert(rank.next());

// value: undefined
alert(rank.next());

next() 메서드의 동작 원리

next() 메서드를 호출할 때마다 제너레이터 함수는 다음 yield 표현식까지 실행한 뒤 {value, done} 형태의 객체를 반환합니다.

• value: yield로 반환된 값
• done: 제너레이터의 실행이 종료되었는지 여부(true/false)

모든 값을 소진한 후 next()를 추가로 호출하면 value는 undefined가 되고 done은 true가 됩니다.

마무리 정리

yield 키워드를 활용하면 대량의 데이터를 한 번에 모두 처리하지 않고 필요한 시점에 하나씩 생성할 수 있어 메모리 효율성을 크게 높일 수 있습니다. 특히 비동기 작업 처리나 무한 시퀀스 생성 등 다양한 상황에서 유용하게 활용됩니다.