[JavaScript] 자바스크립트에서 iterator 정의하여 사용하기

2022. 8. 9. 06:04Program/JavaScript

268_자바스크립트에서 iterator 정의하여 사용하기

[적용]

  • 반복자를 정의하고 싶을 때

[문법]

구문 의미
function* 함수명() {} 제너레이터 정의 
yield 값 값을 반환 

[내용]

제너레이터를 사용해 반복자를 간단히 사용하는 방법이 있으며, 반복자를 정의할 수도 있다.

 

정의는 다음과 같이 function 선언에 *(에스터리스크,asterisk)를 추가한다.

JavaScript   

// 제너레이터 정의
function* myGenerator() {}

 

반복자는 '반복자.next()'를 사용해 값에 차례대로 접근할 수 있다.

제너레이터는 yield를 사용해 다음 가져올 값을 지정한다.

JavaScript   

// 제너레이터 정의
function* myGenerator() {
  yield '사자';
  yield '호랑이';
  yield '여우';
}

 

반복 가능한 객체로 생성되므로 next()나 done을 사용할 수 있다.

JavaScript   

function* myGenerator() {
  yield '사자';
  yield '호랑이';
  yield '여우';
}

const myIterable = myGenerator();

// next()로 값을 하나씩 가져옴
console.log(myIterable.next().value);  // 결과: '사자'
console.log(myIterable.next().value);  // 결과: '호랑이'
console.log(myIterable.next().value);  // 결과: '여우'
console.log(myIterable.next().done);  // 결과: true

 

for...of를 사용해서 각 값에 접근할 수 있다.

JavaScript  

function* myGenerator() {
  yield '사자';
  yield '호랑이';
  yield '여우';
}

const myIterable = myGenerator();

// for...of를 사용해 값에 접근
for (let value of myIterable) {
  console.log(value);  // 결과: '사자', '호랑이', '여우'가 순서대로 출력됨
}

 

yield는 해당 시점에서 함수의 실행을 멈추고 next()가 호출되면 다시 실행되는 특성이 있다.

다음의 제너레이터에서 생성된 반복자는 1초마다 next()를 실행하여 각각의 문자를 출력한다.

JavaScript  

function* myGenerator() {
  console.log('안녕하세요.');
  yield 1000;
  console.log('오늘은 날씨가 좋아요.');
  yield 2000;
  console.log('내일은 비가 올 것 같아요.');
  yield 3000;
}

const myIterable = myGenerator();

// 결과
// 1초후, '안녕하세요.' 출력 후 1000 출력
// 2초후, '오늘은 날씨가 좋아요.' 출력 후 2000 출력
// 3초후, '내일은 비가 올 것 같아요.' 출력 후 3000 출력
// 이후에는 undefined 출력
setInterval(() => {
  console.log(myIterable.next().value);
}, 1000);

 

제너레이터의 사용 예로 지정 범위의 정수를 하나씩 반환하는 샘플을 확인해 보자.

while() 내부의 yield가 실행될 때마다 함수가 정지되고 next()가 호출되면 재실행된다.

JavaScript  

// 제너레이터 정의
function* range(start, end) {
  let result = start;
  while (result <= end) {
    yield result;
    result++;
  }
}

// 사용 예
for (let value of range(2, 6)) {
  console.log(value);  // 결과: 2, 3, 4, 5, 6의 순서로 출력

 

 

 


 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김