JavaScript에서 yield 키워드란?
yield 키워드는 JavaScript에서 제너레이터(generator) 함수의 실행을 일시적으로 멈췄다가 다시 재개할 때 사용됩니다. yield 뒤에 오는 표현식의 값은 제너레이터를 호출한 쪽(호출자)으로 반환되며, 다음에 next() 메서드가 호출될 때까지 함수의 실행이 그 자리에서 대기합니다.
즉, yield는 함수 전체를 종료하는 return과 달리 실행 흐름을 잠깐 멈추고 나중에 이어서 진행할 수 있게 해주는 것이 핵심입니다.
yield의 기본 문법
yield의 기본 문법은 다음과 같습니다. 여기서 exp는 반환할 표현식이며, 대괄호로 묶인 부분은 생략 가능합니다. 선택적인 값 val은 제너레이터의 next() 메서드에 인수로 전달된 값을 받습니다.
[val] = yield [exp];
yield 사용 예제
다음은 제너레이터 함수 내부에서 yield를 사용하는 예제입니다. 함수 선언 시 일반 함수와 달리 function*처럼 별표(*)를 붙여야 한다는 점에 유의하세요.
function* displayRank() {
var selPlayers = [1, 2, 3, 4];
for (var a = 0; a < selPlayers.length; a++) {
yield selPlayers[a];
}
}제너레이터 함수를 정의한 후에는 아래와 같이 호출하여 사용합니다. 제너레이터 객체의 next() 메서드를 호출할 때마다 함수가 yield 지점까지 실행되고, 해당 yield의 값이 하나씩 반환됩니다.
아래 예제에서 displayRank()가 바로 제너레이터 함수입니다.
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에서 멈추고 값 1을 반환 - 두 번째
next(): 값 2를 반환 - 세 번째
next(): 값 3을 반환 - 네 번째
next(): 값 4를 반환 - 다섯 번째
next(): 더 이상 반환할 값이 없으므로 undefined를 반환하며, 이때 제너레이터는 완료(done) 상태가 됩니다.
참고로 실제 개발 환경에서는 alert() 대신 console.log(rank.next())를 사용하면 반환값이 { value: 1, done: false } 형태의 객체임을 확인할 수 있습니다. 이처럼 yield는 데이터를 순차적으로 생성해내는 반복 작업이나 비동기 흐름 제어에 매우 유용하게 활용됩니다.