[JavaScript] 배열의 Iterator 객체 생성 (Array.entries()...)

What

Iterator란 반복자라고도 하며 배열과 비슷하지만 배열과 달리 next()라는 메서드를 가지고 있어야 하고, {value, done} 이라는 속성 값을 가지고 있는 객체이다. 본 글에서는 Iterator에 대한 기본 개념 및 자세한 설명보다는 entries()와 같은 메서드로 배열에서 생성된 Iterator 객체를 사용하는 방법에 대해서 간략히 다룰 예정이다.

 

How

Array.entries() : Iterator의 [index, value]를 반환

const arr = ['A', 'B', 'C'];
const iterator = arr.entries();
for (const x of iterator){
    console.log(x);
}

// Console
[0, 'A']
[1, 'B']
[2, 'C']

Array.entries()는 [index, value] 조합의 iterator 객체를 생성한다. 위 코드에서 for~of의 x가 [index, value]의 형태로 출력된 것을 볼 수 있다. iterator의 값을 출력하기 위해서는 위처럼 for~of와 같은 순회 함수를 사용하거나, iterator의 고유 메서드인 next()를 사용해야 한다.

 

const arr = ['A', 'B', 'C'];
const iterator = arr.entries();
console.log(iterator.next()); // {value: [0, 'A'], done: false}
console.log(iterator.next()); // {value: [1, 'B'], done: false}
console.log(iterator.next()); // {value: [2, 'C'], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

next()는 iterator의 다음 반복을 수행시키는 메서드라고 생각하면 된다. 위 코드를 보면 iterator.next()는 총 4번 수행되었고, 값은 각각 다르게 출력되었다. next()에는 value와 done 속성이 있는데 value는 말 그대로 iterator의 값을 뜻하고 done은 iterator 객체의 반복이 끝까지 돌았냐의 여부를 뜻한다. 즉, done의 값이 false이면 '아직 값이 남았다'는 뜻이고, true이면 '반복이 끝까지 돌았으므로 더 이상 반환할 iterator의 값이 없다'라는 의미인 것이다.

 

next()를 사용한 iterator 객체는 for~of와 같은 순회 함수를 돌리더라도 다시 처음 값부터 반환하지 않는다.

iterator 객체는 이전에 사용했던 next()를 기억하며, 자신이 몇 번째 반복인지를 기억하고 있다.

 

const arr = ['A', 'B', 'C'];
for (const [idx, val] of arr.entries()){
    console.log(idx, val);
}

// Console
0 'A'
1 'B'
2 'C'

또한, Array.entries()는 for~of문에서 배열의 인덱스를 필요로 할 때, 위처럼 사용할 수 있다.

 

Array.keys() : Iterator의 index를 반환

const arr = ['A', 'B', 'C'];
const iterator = arr.keys();
for (const x of iterator){
    console.log(x);
}

// Console
0
1
2

// iterator.next();
{value: 0, done: false};
{value: 1, done: false};
{value: 2, done: false};
{value: undefined, done: true};

entries()처럼 index와 value를 모두 반환하는 게 아닌, index만 필요로 하는 경우 간단히 Array.keys()를 통해 iterator 객체를 생성할 수 있다. keys()로 생성된 iterator는 value 값으로 index만 반환한다.

 

Array.values() : Iterator의 value를 반환

const arr = ['A', 'B', 'C'];
const iterator = arr.values();
for (const x of iterator){
    console.log(x);
}

// Console
'A'
'B'
'C'

// iterator.next();
{value: 'A', done: false};
{value: 'B', done: false};
{value: 'C', done: false};
{value: undefined, done: true};

Array.values()는 keys()와 반대로 index가 아닌 Array의 value 값만을 반환한다.

 

1. 배열에 entries(), keys(), values() 메서드를 사용해서 Iterator 객체를 생성할 수 있다.
2. entries()는 [index, value], keys()는 index, values()는 value를 반환한다.
3. next()는 Iterator 객체 뒤에서만 사용 가능하다.
4. Iterator는 {value, done}의 속성값을 가지고 있으며, done는 '반복이 끝이 났냐'의 여부를 Boolean으로 알려준다.