[Javascript] 제너레이터 함수 (Generator Function)

---

Generator 함수와 일반 함수

일반 함수를 정의하고 return 값을 지정해줬을 때 아래와 같이 보통 하나의 return 값을 지정해주게 된다.

---

 

function sayHi(){
    return 'hi'
}

const result = sayHi()
console.log(result);
// hi를 출력 

---

 

 만약 여기서 return 값을 두개를 주었을 때는 어떻게 될까? hi 와 hello 두개의 값을 리턴해주면 좋겠지만 결과는 hi 만 출력된다.

function sayHi(){
    return 'hi'
    return 'hello'
}

const result = sayHi()
console.log(result);
// hi를 출력

---

 

 이와 달리 generator 함수를 이용했을 때는 Object [Generator] {}를 반환하게 되는데, 이는 interator 객체로서 여러 값을 반환할 수 있다.

---

function* sayHiGenerator(){
    return 'hi'
}

const resultGenrator = sayHiGenerator()
console.log(resultGenrator);
// Object [Generator] {} 를 출력  

---

 

 여기에서 여러 값을 반환하기 위해서는 yield라는 특별한 키워드가 필요하다. yield는 간단하게 생각해서 제너레이터 함수의 반환 값의 시작점이자 중지점이다. 쉽게 말해서 yield를 통해 제너레이터 함수의 코드를 멈추고 다음 번의 .next()가 호출될 때 까지 기다리는 것이다. 

 

 앞서 언급한 .next()는 순차적으로 반환 값을 출력하기 위해서 사용해준다. 리턴 값에 도달했을 때 실행이 완료된 것이기 때문에 그때 부터는 done이 true값으로 나타나게 된다. 그리고 그 이후의 출력 값에서도 더 이상의 반환 값이 없기 때문에 value값은 undefined로 나타나게 되는 것이다.

---

 

function* sayHiGenerator(){
        yield 'hello'
    return 'hi'
}

const resultGenerator = sayHiGenerator()
console.log(resultGenerator.next()); 
// 출력 값 : { value: 'hello', done: false }
console.log(resultGenerator.next());
// 출력 값 : { value: 'hi', done: true }
console.log(resultGenerator.next());
// 출력 값 : { value: undefined, done: true }  

---

 

 그렇다면 여기서 여러 반환 값을 동시에 출력해주려면 어떻게 하면 될까? 아래와 같이 for of를 이용하여 구현할 수 있다.

function* sayHiGenerator(){
        yield 'hello'
        yield 'generator'
    yield 'function'
    return 'hi'
}

const resultGeneratorForOf = sayHiGenerator()
for (const iterator of resultGeneratorForOf){
    console.log(iterator)
}

/** 출력 값 : 
hello
generator
function
**/