Symbol.iterator 의 의미
이전 내용 참조
이전 내용에서 javascript의 for of는 과거의 방식과는 다른 방식으로 사용되고 있다는 것까지 알게되었다.
그렇다면 이 Symbol.iterator 다른 예시와 구조를 보면서 만든 사람들의 사고를 떠올려보자
먼저 내부 구조를 살펴보자
아까전에 array에 Symbol.iterator가 있는 것을 알게 되었다.
그럼 그 Symbol.iterator의 내부구조를 console.log로 확인해보자
1 2 3 4 5 6
| let list=[1,2,3,4] const a=list[Symbol.iterator] console.log(a) // 결과값 ƒ values() { [native code] } ```` 배열의 Symbol.iterator를 가져오면 그값은 함수가 되는 것을 알게 되었다 그렇다면 함수를 실행해보자
|
const a=listSymbol.iterator
// 결과값 Array Iterator {}
list의 Symbol.iterator라는 것을 실행시키니 Array lterator가 등장한다. 그리고 그 안에는
1 2 3 4 5 6 7
| Array Iterator {} [[Prototype]]: Array Iterator next: ƒ next() Symbol(Symbol.toStringTag): "Array Iterator" [[Prototype]]: Object Symbol(Symbol.iterator): ƒ [Symbol.iterator]() [[Prototype]]: Object
|
next라는 함수와 prototype값이 존재한다.
## next라는 함수
next와 순회는 매우 적절한 매치가 아닐까 한다.그렇다면 다시한번더 next를 실행해보자
1 2 3
| let list=[1,2,3,4] const a=list[Symbol.iterator]().next() {value: 1, done: false}
|
value 값은 매우 익숙한 값이 나왔다. 이방식이 현재의 ES6 순회의 근간이자 하나의 추상화 방식이다라는 것을 알게되었다.
그렇다면 done은 무엇일까
1 2 3 4 5 6 7 8 9 10 11 12 13
| let list=[1,2,3,4] let a=list[Symbol.iterator]() undefined a.next() {value: 1, done: false} a.next() {value: 2, done: false} a.next() {value: 3, done: false} a.next() {value: 4, done: false} a.next() {value: undefined, done: true}
|
next를 계속 실행하면 계속 value는 순회하고 그 값이 없으면 done은 ture가 되는 방식이라는 것을 알수 있다.
## 또다른 예시
1 2 3 4 5 6 7
| const set=new Set([1,2,3]) for(const a of set) console.log(a) //값이 나타난다는 것은 Set 인스턴스에도 Symbol.iterator가 존재한다는 뜻이다
const map=new Map([['a',1],['b',2],'c',2]) for(const a of set) console.log(a) //값이 나타난다는 것은 Map 인스턴스에도 Symbol.iterator가 존재한다는 뜻이다
|
매우 직관적이고 현재의 javascript의 비밀을 알게 된 것 같아서 매우 즐겁다.
이번주는 이 방식을 통해서 좀 더 많은 사용예시를 써볼까한다.