JavaScript yield란 무엇인가?

Introduction to the JavaScript yield keyword(yield 키워드 소개)

yield 키워드를 사용하면 생성기 함수(function*)를 일시 중지하고 다시 시작할 수 있습니다.

다음은 yield 키워드의 구문을 보여줍니다.

[variable_name] = yield [expression];

이 구문에서:

• 표현식은 반복 프로토콜을 통해 생성기 함수에서 반환할 값을 지정합니다. 표현식을 생략하면 yield는 undefined를 반환합니다.
• variable_name은 iterator 객체의 next() 메서드에 전달된 선택적 값을 저장합니다.

 

JavaScript yield examples(예제)

yield 키워드를 사용하는 몇 가지 예를 들어보겠습니다.

 

1. Returning a value(값 반환)

다음 간단한 예제는 yield 키워드를 사용하여 생성기 함수에서 값을 반환하는 방법을 보여줍니다.

function* foo() { 
    yield 1;
    yield 2;
    yield 3;
}

let f = foo();

console.log(f.next());

Output:

{ value: 1, done: false }

보시다시피 yield 뒤에 오는 값은 next()가 호출될 때 반환 객체의 value 속성에 추가됩니다.

yield 1;

 

2. Returning undefined(정의되지않는 반환)

이 예에서는 yield 키워드를 사용하여 undefined를 반환하는 방법을 보여줍니다.

function* bar() {
    yield;
}

let b = bar();
console.log(b.next());

Output:

{ value: undefined, done: false }

 

3. Passing a value to the next() method(next() 전달값)

다음 예제에서 yield 키워드는 next() 메서드에 전달된 인수로 평가되는 표현식입니다.

function* generate() {
    let result = yield;
    console.log(`result is ${result}`);
}

let g = generate();
console.log(g.next()); 

console.log(g.next(1000));

첫 번째 호출 g.next()는 다음 객체를 반환합니다.

{ value: undefined, done: false }

두 번째 호출 g.next()는 다음 작업을 수행합니다.

• 수율을 1000으로 평가합니다.
• 1000인 yield 값을 결과에 할당합니다.
• 메시지를 출력하고 객체를 반환

Output:

result is 1000
{ value: undefined, done: true }

 

4. Using yield in an array(배열에서 yield 사용하기)

다음 예제에서는 yield 키워드를 배열의 요소로 사용합니다.

function* baz() {
    let arr = [yield, yield];
    console.log(arr);
}

var z = baz();

console.log(z.next());  
console.log(z.next(1)); 
console.log(z.next(2));

첫 번째 호출 z.next()는 arr 배열의 첫 번째 요소를 1로 설정하고 다음 객체를 반환합니다.

{ value: undefined, done: false }

두 번째 호출 z.next()는 arr 배열의 두 번째 값을 2로 설정하고 다음 객체를 반환합니다.

{ value: undefined, done: false }

세 번째 호출 z.next()는 arr 배열의 내용을 표시하고 다음 객체를 반환합니다.

[ 1, 2 ]
{ value: undefined, done: true }

 

5. Using yield to return an array(배열 반환)

다음 생성기 함수는 yield 키워드를 사용하여 배열을 반환합니다.

function* yieldArray() {
    yield 1;
    yield [ 20, 30, 40 ];
}

let y = yieldArray();

console.log(y.next()); 
console.log(y.next()); 
console.log(y.next());

첫 번째 호출 y.next()는 다음 객체를 반환합니다.

{ value: 1, done: false }

두 번째 호출 y.next()는 다음 객체를 반환합니다.

{ value: [ 20, 30, 40 ], done: false }

이 경우 yield는 배열 [ 20, 30, 40 ]을 반환 객체의 value 속성 값으로 설정합니다.

세 번째 호출 y.next()는 다음 객체를 반환합니다.

{ value: undefined, done: true }

 

6. Using the yield to return individual elements of an array(배열의 개별 요소 반환)

다음 생성기 함수를 참조하십시오.

function* yieldArrayElements() {
    yield 1;
    yield* [ 20, 30, 40 ];
}

let a = yieldArrayElements();

console.log(a.next()); // { value: 1, done: false }
console.log(a.next()); // { value: 20, done: false }
console.log(a.next()); // { value: 30, done: false }
console.log(a.next()); // { value: 40, done: false }

이 예에서 yield*는 새로운 구문입니다. yield* 표현식은 다른 반복 가능한 객체 또는 생성기에 위임하는 데 사용됩니다.

결과적으로 다음 식은 배열 [20, 30, 40]의 개별 요소를 반환합니다.

yield* [20, 30, 40];

이 자습서에서는 JavaScript yield 키워드와 함수 생성기에서 사용하는 방법에 대해 배웠습니다.

 

 

 

 

 

References: https://www.javascripttutorial.net/es6/javascript-yield/