[JavaScript] JavaScript 반복자에 대한 필수 가이드

The Essential Guide to JavaScript Iterators

(JavaScript 반복자에 대한 필수 가이드)

 

반복문 문제점

데이터 배열이 있는 경우에는 일반적으로 for문을 사용/반복하여 요소 위로 이동합니다.예를 들어 다음과 같습니다.

let ranks = ['A', 'B', 'C'];

for (let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]);
}

for 루프는 변수 i를 사용하여 순위 배열의 인덱스를 추적합니다. I의 값은 I의 값이 순위 배열의 요소 수보다 적다면 루프가 실행될 때마다 증가합니다.

이 코드는 간단합니다. 그러나 다른 루프 내부의 루프를 중첩하면 복잡성이 커집니다. 또한 루프 내부의 여러 변수를 추적하는 것이 오류가 발생하기 쉽습니다.

ES6은 표준 루프의 복잡성을 제거하고 루프 인덱스를 추적하여 발생하는 오류를 피하기 위해 요구되는 새로운 루프 구성을 도입했습니다.

순위 배열의 요소를 반복하려면 다음에 for...of 을 사용합니다.

for(let rank of ranks) {
    console.log(rank);
}

for...of 는 코드의 진정한 의도를 보여주기 때문에 For Loop보다 훨씬 우아합니다. 각 요소가 순서대로 액세스하기 위해 배열을 반복합니다.

이 외에도, for ... of loop은 배열뿐만 아니라 반복 가능한 객체에 루프를 만들 수 있습니다.

반복 가능한 객체를 이해하려면 먼저 반복 프로토콜을 이해해야합니다.

 

Iteration protocols

반복 프로토콜과 반복자(iterator) 프로토콜의 두 가지 반복(iterable) 프로토콜이 있습니다.

 

Iterator protocol

객체는 두 가지 질문에 답하는 인터페이스 (또는 API)를 구현할 때 반복자입니다.

• 남은 요소가 있습니까?
• 있다면 요소는 무엇입니까?

 

기술적으로 말하면, 객체는 두 가지 속성을 가진 객체를 반환하는 next() 메소드가있을 때 반복자로 자격이 있습니다.

• 완료 : 반복 할 수있는 요소가 더 있는지 여부를 나타내는 부울 값.
• 가치 : 현재 요소.

next()을 호출 할 때마다 컬렉션의 다음 값을 반환합니다.

{ value: 'next value', done: false }

마지막 값이 반환 된 후 next() 메소드를 호출하면 next()는 결과 객체를 다음과 같이 반환합니다.

{done: true: value: undefined}

완료 된 속성의 값은 반품 할 값이 더 이상 없으며 속성의 값이 정의되지 않은 것으로 설정되어 있음을 나타냅니다.

 

Iterable protocol

객체는 인수를 취하지 않고 반복자 프로토콜을 준수하는 객체를 반환하는 [symplic.iterator]라는 메소드가 포함되어있을 때 반복 할 수 있습니다.

[Symbol.iterator]는 ES6의 내장 된 잘 알려진 기호 중 하나입니다.

 

Iterators

ES6은 컬렉션 유형 배열, 세트 및 맵에 대한 내장 반복기를 제공하므로 이러한 객체의 반복기를 만들 필요가 없습니다.
사용자 정의 유형이 있고 반복적 인 루프 구조를 사용할 수 있도록 반복 할 수있게하려면 반복 프로토콜을 구현해야합니다.
다음 코드는 후속 숫자 사이의 간격으로 (시작, 끝) 범위의 숫자 목록을 반환하는 시퀀스 객체를 만듭니다.

class Sequence {
    constructor( start = 0, end = Infinity, interval = 1 ) {
        this.start = start;
        this.end = end;
        this.interval = interval;
    }
    [Symbol.iterator]() {
        let counter = 0;
        let nextIndex = this.start;
        return  {
            next: () => {
                if ( nextIndex <= this.end ) {
                    let result = { value: nextIndex,  done: false }
                    nextIndex += this.interval;
                    counter++;
                    return result;
                }
                return { value: counter, done: true };
            }
        }
    }
};

다음 코드는 Loop의 for ...의 시퀀스 반복기를 사용합니다.

let evenNumbers = new Sequence(2, 10, 2);

for (const num of evenNumbers) {
    console.log(num);
}

Output:

2
4
6
8
10

다음 스크립트에 표시된대로 [symbol.erator] () 메소드에 명시 적으로 액세스 할 수 있습니다.

let evenNumbers = new Sequence(2, 10, 2);
let iterator = evenNumbers[Symbol.iterator]();

let result = iterator.next();

while( !result.done ) {
    console.log(result.value);
    result = iterator.next();
}

 

 

Cleaning up

다음 () 메소드 외에도 [symbol.iterator] ()는 선택적으로 return ()라는 메소드를 반환 할 수 있습니다.
반복이 조기 중지되면 Return () 메소드가 자동으로 호출됩니다. 자원을 정리하기 위해 코드를 배치 할 수있는 곳입니다.
다음 예제는 시퀀스 객체에 대한 return () 메소드를 구현합니다.

class Sequence {
    constructor( start = 0, end = Infinity, interval = 1 ) {
        this.start = start;
        this.end = end;
        this.interval = interval;
    }
    [Symbol.iterator]() {
        let counter = 0;
        let nextIndex = this.start;
        return  {
            next: () => {
                if ( nextIndex <= this.end ) {
                    let result = { value: nextIndex,  done: false }
                    nextIndex += this.interval;
                    counter++;
                    return result;
                }
                return { value: counter, done: true };
            },
            return: () => {
                console.log('cleaning up...');
                return { value: undefined, done: true };
            }
        }
    }
}

다음 스 니펫은 시퀀스 객체를 사용하여 1에서 10까지의 홀수 시퀀스를 생성합니다. 그러나 반복을 조기 중지합니다. 결과적으로 return () 메소드가 자동으로 호출됩니다.

let oddNumbers = new Sequence(1, 10, 2);

for (const num of oddNumbers) {
    if( num > 7 ) {
        break;
    }
    console.log(num);
}

Output:

1
3
5
7
cleaning up...

이 튜토리얼에서는 JavaScript Iterator와 반복 프로토콜을 사용하여 맞춤형 반복 로직을 구현하는 방법에 대해 배웠습니다.

 

 

 

 

 

 

 

 

Referencec: https://www.javascripttutorial.net/es6/javascript-iterator/