javascript Symbol.iterator 2

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의 비밀을 알게 된 것 같아서 매우 즐겁다. 이번주는 이 방식을 통해서 좀 더 많은 사용예시를 써볼까한다.