yield란
yield는 마치 return 처럼 동작하며 정해진 구간을 순서대로 실행하며 반드시 'function*' 을 사용한 함수에서 사용합니다.
생성기
'function*' 로 만든 함수를 생성기(generator)라고 부릅니다.
주의할 점은 'function*'은 하나의 키워드이기때문에 화살표 함수[()=>{}]를 만들 수 없습니다.
function* generator() {
console.log('generator started...');
let value = 1;
while (value < 4) {
yield value++;
}
console.log('generator finished...');
}
// case 1
for (let value of generator()) {
console.log(value);
}
// === 실행 결과 ===
// generator started...
// 1
// 2
// 3
// generator finished...
// case 2
let iterator = generator();
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
반복기(iterator)와 반복기 제공자(iterable)
반복기의 특징은 next라는 이름의 메서드를 제공하며 next 메서드는 value와 done이라는 두 개의 속성을 가진 객체를 반환합니다.
value에는 값을, done는 완료여부를 false, true로 반환합니다.
앞선 예제에 case2와 다음 예제를 참고하시면 됩니다.
yield를 통하여 반복기 예시를 들었지만 반복기는 반드시 yield를 이용하지 않아도 됩니다.
// case3
function* a() {
yield 1;
yield 5;
}
let iterator = a();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
반복기 제공자는 이름 그대로 반복기를 제공하는 역할을 하는 'a()'입니다.
반복기 제공자를 호출하여 iterator 변수에 저장하고 next() 함수를 이용하여 value와 done을 반환합니다.
yield*
'yield*'을 이용하여 다른 생성기나 배열을 대상으로 동작할 수 있습니다.
즉, 'function*' 의 역할을 한다고 생각하시면 쉬울 것 같습니다.
function* gen12() {
yield 1;
yield 2;
}
export function* gen12345() {
yield* gen12();
yield* [3, 4];
yield 5;
}
for (let value of gen12345()) {
console.log(value);
}
// === 실행 결과 ===
// 1
// 2
// 3
// 4
// 5
Do it 타입스크립트 프로그래밍 / 이지스퍼블리싱 참고하였습니다.
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript] reduce() 함수 (0) | 2021.07.11 |
---|---|
[JavaScript] setInterval, clearInterval 사용법 (0) | 2021.07.02 |
모달창에서 execCommand('copy') 실행 안 될 때 (0) | 2020.12.10 |
모달창에서 execCommand('copy') 실행 안 될 때 (0) | 2020.12.10 |
JavaScript - map() 함수의 사용 (0) | 2020.12.07 |