Generator & yield | yield* | return

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

1. Generator & yieId

# Generator

funtion* 키워드로 정의하는 제너레이터 함수는 Generator 객체를 반환한다.

Generator 객체는 iterable한 Iterator객체이다.(순회 가능한)

 

함수의 끝 부분까지 모두 수행된 이후, generator함수에서 return을 사용, 에러 발생 

위 세가지의 경우 종료된다.

 

이 객체는 일시정지와 재시작 기능을 사용할 수 있다. 코드를 통해 살펴보자.

 

function* intro(name){
    yield name + " 님 안녕하세요";
    yield "APPle 지원에 오신 것을 환영합니다";
    yield "도움이 필요하다면 언제든 문의 주세요";
    yield "바이바이";
}

위와 같은 함수를 제너레이터 함수라고 부른다.

일반 함수와 제너레이터 함수가 다른점은 function뒤에 에스크리스트 즉 (" * ")별표 모양이 붙은 형태의 키워드로 시작된다는 것이다.

 

# yield 

제너레이터 함수에는 yield키워드가 존재한다.

yield구문의 문법은 return문과 비슷하지만, 제너레이터의 실행을 멈췄다가 다음에 다시 이어서 시작한다는 점에서 차이를 보인다.

 

이제 함수를 호출해보자.

function* intro(name){
    console.log("환영합니다.");
    yield name + " 님 안녕하세요";
    yield "APPle 지원에 오신 것을 환영합니다";
    yield "도움이 필요하다면 언제든 문의 주세요";
    yield "바이바이";
}
let iter = intro("haeun");
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

 

결과는 아래와 같다.

 

제너레이터 함수를 호출하면 멈춰진 제너레이터 객체를 리턴한다.

여기서 리턴된 제너레이터 객체는 이터레이터(반복자) 이며, 이것은 haeun을 가르킨다.

> offbyone.tistory.com/83  문법만 익히기엔 옆 사이트를 참고해도 좋을 것 같다.

 

이터레이터(반복자)는 next()메서드를 가지고 있다.

 

제너레이터 객체의 next()메서드를 호출할 때 마다 실행을 재개 해 yield구문까지 실행이 되고, 다시 스스로 실행을 멈춘다. 

 

다음에 next 메서드가 실행되면 두번째 yield구문을 실행하고 다시, 그 이후부터 실행을 재개 한다

 

제너레이터의 반복이 끝나는 시점은 3가지 경우가 있다.

 - 함수의 끝 부분까지 모두 실행된 경우 
 - 제너레이터 함수에서 return 사용 
 - 에러가 발생하는 경우

 

2. yieId *

# 코드 실습

function* mymy(){
    yield* [1,2,3,4,5,6,7];
    yield 8;
    yield 9;
}
let iterator = mymy();

for(const n of iterator){
    console.log(n);
}

 

결과는 아래와 같다.

 

yield value를 사용하면 한가지 값을 반환할 수 있고, 다음과 같이 yield에 별이 붙은 형태의 이터러블을 사용하면 해당되는 이터러블 값을 순차적으로 반환 할 수 있다.

 

 

# next(value)

다음 값을 얻는 역할의 메서드, 매개변수는 바로 이전의 yield[expression]의 반환 값으로 사용

function* foo(){
    console.log(yield);
    console.log(yield);
    console.log(yield);
}
let fo = foo();
fo.next();
fo.next(1);
fo.next(2);
fo.next(3);
fo.next(4);

 

결과는 다음과 같다.

next 메서드는 다음 값을 얻는 역할을 하며 이터레이터의 next메서드와 유사하지만, 옵션으로 argument를 받는 다는 점이 다르다.

일반적인 이터레이터의 next()와 다르게 제너레이터 객체의 next()는 인자를 받을 수도 있다.

 

제너레이터 함수가 값을 쓰고, 제너레이터 객체의 이터레이터 인터페이스로 값을 읽는 것 뿐만 아니라

제너레이터 객체에 값을 쓰고 제너레이터 함수가 값을 읽어 갈 수도 있다.

 

3. return

#return(value)

매개변수로 온 값을 value로 반환하고, Generator을 종료

function* test(){	
    yield 1;
    yield 2;
    yield 3;
}
let t = test();
console.log(t.next());
console.log(t.return("메롱메롱"));
console.log(t.next());

 

결과는 다음과 같다.

return 메서드는 매개변수로 온 값을 value로 반환하고 제너레이터를 종료시킨다.

결과를 보면 return메소드를 사용한 부분에 done: 프로퍼티의 값이 true로 찍혀있는 것을 볼 수 있다.

따라서 다음 next()를 호출하는 부분에서는 이미 종료된 제너레이터를 호출하는 것과 마찬가지의 결과 값을 반환한다.

 

# throw(exception)

인자로 받은 에러 발생시키고, generator를 종료시킨다.

 

function* generator(){
	try{
    	yield 'foo2';
    }
    catch(err){
    	console.log(err.message);
    }
}

let iterator = generator();

let foo2 = iterator.next();
console.log(foo2.value);

let nextThing = iterator.throw(new Error('bar'));

 

결과는 아래와 같다.

 

throw 메서드는 인자로 받은 에러를 발생시키고, 제너레이터를 종료시킨다.

제너레이터 함수내부의 catch 구문을 통해 처리할 수도 있다.