JavaScript - Yield 연산자

Yield 연산자 소개

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 자바스크립트의 yield 연산자에 대한 흥미로운 여정을 시작할 것입니다. yield는 코드의 마법의 일시정지 버튼처럼 생각하면 됩니다. 프로그램에게 "여기서 한숨을 쉬고, 나중에 그곳에서 다시 시작해라"고 말하는 것입니다. 흥미롭지 않나요? 시작해 보겠습니다!

Yield 연산자는 무엇인가요?

yield 연산자는 자바스크립트에서 생성자 함수 내에서 사용되는 특별한 키워드입니다. 지금 당신이 생각하고 있는 것을 알고 있습니다 - "생성자 함수? 무엇인지 모르겠어요!" 걱정하지 마세요, 우리는 거기로 갈 것입니다! 지금은 생성자 함수를 일시 정지하고 재개할 수 있는 특별한 종류의 함수로 생각하면 됩니다. yield 연산자가 이 일시 정지와 재개를 가능하게 합니다.

실제 세계의 비유

상상해 보세요, 매우 긴 책을 읽고 있는 중입니다. 잠시 쉬고 싶을 때 책갈피를 사용하여 위치를 저장할 것입니다. yield 연산자는 코드에서 그 책갈피와 같은 역할을 합니다. 함수가 일시 정지하고 나중에 다시 돌아올 수 있는 위치를 표시합니다.

Yield 연산자의 문법

yield 연산자의 기본 문법은 매우 간단합니다:

yield expression;

여기서 expression은 함수가 일시 정지할 때 "yield"하거나 반환하고 싶은 값입니다. 이 값은 선택 사항이며, 제공하지 않으면 undefined가 yield됩니다.

생성자 함수에서의 Yield 연산자

이제 이러한 신비한 생성자 함수에 대해 이야기해 보겠습니다. 생성자 함수는 function 키워드 뒤에 별표(*)를 사용하여 정의됩니다:

function* generatorFunction() {
yield 'Hello';
yield 'World';
}

생성자 함수를 호출할 때, 즉시 코드 내부를 실행하지 않습니다. 대신, 생성자 객체를 반환하여 함수의 실행을 제어할 수 있습니다.

예제: 값 반환

간단한 예제를 보겠습니다:

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

const generator = countToThree();
console.log(generator.next().value); // 출력: 1
console.log(generator.next().value); // 출력: 2
console.log(generator.next().value); // 출력: 3

이 예제에서, 우리는 생성자에 next()를 호출할 때마다 yield 문장을 만나면 일시 정지하고 반환된 값을 반환합니다. 이는 함수가 "다음 숫자를 줄게, 다음을 위해 다시 호출해라!"라고 말하는 것과 같습니다!

예제: Undefined 반환

yield 값이 지정되지 않으면, undefined를 반환합니다:

function* yieldUndefined() {
yield;
yield 'Hello';
yield;
}

const gen = yieldUndefined();
console.log(gen.next().value); // 출력: undefined
console.log(gen.next().value); // 출력: Hello
console.log(gen.next().value); // 출력: undefined

이는 생성자에 일시 정지점을 만들고 싶지만 반드시 값이 필요하지 않을 때 유용합니다.

예제: next() 메서드에 값 전달

여기서 더 흥미로운 점이 있습니다. next() 메서드에 값을 전달할 수 있으며, 이 값은 생성자 함수에 의해 수신됩니다:

function* conversation() {
const name = yield "What's your name?";
yield `Hello, ${name}!`;
const hobby = yield "What's your favorite hobby?";
yield `${hobby} sounds fun!`;
}

const talk = conversation();
console.log(talk.next().value);        // 출력: What's your name?
console.log(talk.next('Alice').value); // 출력: Hello, Alice!
console.log(talk.next().value);        // 출력: What's your favorite hobby?
console.log(talk.next('Coding').value); // 출력: Coding sounds fun!

이는 코드와 대화를 나누는 것처럼 보입니다. 생성자는 질문을 하고, 답변을 기다렸다가 다시 계속합니다. 정말 멋지죠?

실용적인 예제: 피보나치 수열 생성자

이제 모든 지식을 하나로 모아 실용적인 예제를 보겠습니다. 피보나치 수열을 생성하는 생성자 함수를 만들겠습니다:

function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}

이 생성자는 무한히 피보나치 수를 생성합니다. next()를 호출할 때마다 다음 수를 yield합니다. 여기서는 for 루프를 사용하여最初的 10개의 수를 얻습니다만, 원하는만큼 계속할 수 있습니다!

결론

yield 연산자는 자바스크립트에서 코드 흐름을 제어할 수 있는 강력한 도구입니다. 이를 통해 일시 정지하고 재개할 수 있는 함수를 만들 수 있어 시간에 걸쳐 값의 시퀀스를 더 쉽게 작업할 수 있습니다.

yield와 생성자를 효과적으로 사용하는 법을 배우는 데는 연습이 필요합니다. 바로 이해되지 않으면 실망하지 마세요 - 계속 실험하고 프로가 될 것입니다!

메서드 표

여기서 생성자와 함께 사용되는 주요 메서드 표를 제공합니다:

메서드	설명
next()	생성자의 다음 값을 반환합니다
return(value)	주어진 값을 반환하고 생성자를 종료합니다
throw(error)	생성자에 오류를 던집니다

미래의 자바스크립트 마법사 여러분, 행복하게 코딩하세요! 기억하세요, 모든 전문가는 초보자였습니다. 계속 연습하고, 호기심을 유지하면 언제든지 코딩의 위대함을 이룰 수 있습니다!

Credits: Image by storyset