ITERATORS는 그렇게 무섭지 않습니다 ...

MDN 웹 문서에 따르면:

The for...of statement creates a loop iterating over iterable objects, , invoking a custom iteration hook with statements to be executed for the value of each distinct property of the object.

좋아... 흠... 그런데 Iterable 객체가 뭐죠?

우리는 코딩할 때 거의 매번 반복을 사용합니다... 다음과 같은 것들: map, filter, for, forEach, ecc...

그러나 for...of 문은 다음과 같은 이유로 특별합니다.

Iterators (...) bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of for...of loops.

따라서 for...of 루프가 배열을 반복하는 방법을 알고 있다고 생각할 수 있지만... 그건 사실이 아닙니다!.
반복하려면 반복자 객체가 "인터페이스"로 필요합니다.

for...of <------> 반복자 <------ 배열

이제 우리는 이것을 알았으니... 코딩하자:

const dogs = ["labrador","chow-chow","cavalier"];

for (let breed of dogs)
    {
        console.log(breed);
    }
//-> labrador, chow-chow, cavalier

그 뒤에... 다음과 같은 반복자 개체가 있습니다.

const dogs = ["labrador","chow-chow","cavalier"];

let iterator = dogs[Symbol.iterator]();

for (let breed of iterator )
    {
        console.log(breed);
    }

//-> labrador, chow-chow, cavalier (the same result)

무엇을 기다립니다?

네... 정말 이상해 보이지만 그렇게 나쁘지는 않습니다.
다시 인용하자면:

In order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a Symbol.iterator key. This function should return a new iterator for each call, however, this is not a requirement.

Symbol.iterator는 Iterable 객체가 It을 반복하는 데 필요한 속성입니다.

반복 가능한 객체는 다음과 같습니다.

끈
정렬
지도
세트
노드 목록
...

그리고 이 모든 것들은 배후에서 그 속성을 소유하고 있습니다.

Symbol.iterator

속성은 다음과 같이 작동하는 next() 메서드를 제공합니다.

const dogs = ["labrador","chow-chow","cavalier"];

let iterator = dogs[Symbol.iterator]();

console.log(iterator.next())

//-> {value: "labrador", done: false}

next() 메서드를 호출할 때마다 반복 가능한 객체를 반복합니다.

이제 두 개의 키가 있습니다.
값: "래브라도"
(반복 가능한 객체의 현재 값)
완료: 거짓
(내부에 값이 있을 때까지 false입니다!)

const dogs = ["labrador","chow-chow","cavalier"];

let iterator = dogs[Symbol.iterator]();

console.log(iterator.next())
//-> {value: "labrador", done: false}
console.log(iterator.next())
//-> {value: "chow-chow", done: false}
console.log(iterator.next())
//-> {value: "cavalier", done: false}
console.log(iterator.next())
//-> {value: undefined, done: true}

done:true는 반복 가능한 객체의 끝점입니다.

객체가 반복 가능해야 하는 JS의 다른 강력한 도구가 있습니다.

//TAKE A LOOK AT THE SPREAD OPERATOR...

const number = 31;

let count = [...dogs];

//-> TypeError: dogs is not iterable

const dogs = "labrador";

let doggy = [...dogs];

console.log(doggy)

//-> ["l", "a", "b", "r", "a", "d", "o", "r"]

이에 대해 항상 주의해야 하며, 이와 같은 도구에는 반복 가능한 객체만 사용해야 합니다!.



나는 약간의 향신료를 추가하는 작별 인사를하고 싶습니다.
Symbol.iterator는 속성입니다... 그래서... 원하는 경우 자신만의 반복 가능한 객체를 만들 수 있습니다!

더 많은 정보를 위해서:

The mighty MDN guide

그것으로 재미를!