[JavaScript] 자바스크립트에서 iterator 정의하여 사용하기
2022. 8. 9. 06:04ㆍProgram/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
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트에서 배열과 객체에 독자적인 메소드 추가하기 (0) | 2022.08.09 |
---|---|
[JavaScript] 자바스크립트에서 유일한 데이터 사용하기(심볼) (0) | 2022.08.09 |
[JavaScript] 자바스크립트에서 반복 처리를 위한 반복자 사용하기 (0) | 2022.08.09 |
[JavaScript] 모듈형 자바스크립트 HTML에서 읽어오기 (0) | 2022.08.08 |
[JavaScript] 자바스크립트에서 모듈 가져오기 (import) (0) | 2022.08.08 |