[JavaScript] Array, Set, Map을 통해 알아보는 이터러블/이터레이터

Array를 순회하는 방법엔 여러가지 방법이 있다.

 

고전적이라면

const arr = [1,2,3,4,5]

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

이렇게 순회를 할 것이고,

 

forEach, filter, reduce, map 등등 배열 순회 함수를 배우셨다면 단순 순회에는 아래와 같이

const arr = [1,2,3,4,5]

arr.forEach(v => {
    console.log(v);
})

forEach를 사용할 것이다.

 

또는, 이터러블, 이터레이터의 개념을 알거나, 뭔가 이렇게 쓰는 게 좋다고 들으셨다면

const arr = [1,2,3,4,5]

for(const a of arr) {
    console.log(a);
}

for of를 사용할 것이다.

 

이번 포스팅에서는 이터러블, 이터레이션에 대해 알아보려한다.

 

먼저 이터러블, 이터레이션에 대한 개념에 대해 알아보자

 

이터러블

이터레이션을 리턴하는 [Symbol.iterator]()를 가진 값

이터레이션

{ value, doen } 객체를 리턴하는 next() 를 가진 값

 

개념만 보면 어떤 것인지 확 와닿지 않는다. 예를 들어 살펴보자.

const arr = [1,2,3,4,5];
const iteration = arr[Symbol.iterator]();

for(const a of arr) {
    console.log(a);
}

Array는 이터러블이다. 그래서 arr[Symbol.iterator]() 로 정의할 수 있다.

console.log를 찍어보면

Array Iterator라고 친절하게 알려준다.

그럼 이터레이션임을 확인할 수 있으므로 next()값을 확인해보자

const arr = [1,2,3,4,5];
const iteration = arr[Symbol.iterator]();

iteration.next();
iteration.next();
iteration.next();
iteration.next();
iteration.next();
iteration.next();

위를 실행하면 어떻게 될까?

위 이터레이션 개념과 같이 value와 done을 가진 값들이 하나씩 출력된다. 5까지 밖에 없으므로 그 다음부턴 done이 true가 된다.

 

for of문은 해당 이터레이션들을 순회하기 위해 있는 순회문이다.

위와 같은 결과에서 for of문은 done이 true면 순회문을 탈출하는 조건을 가진 순회문인 걸 확인할 수 있다.

 

이걸 어디에 적용할 수 있을까?

 

Map, Set

배열이 아닌 map, set은 단순 for문이 적용되지 않는 걸 경험한 적 다들 있을것이다. 이유는 간단하다. 아래 코드에서 확인해보자.

const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);

console.log(set[1]);  // undefined
console.log(map[1]);  // undefined

console.log(set[Symbol.iterator]()); 
// SetIterator {1, 2, 3, 4, 5}
console.log(map[Symbol.iterator]());
// MapIterator {'a' => 1, 'b' => 2, 'c' => 3}

set, map은 단순 인덱스 순회로는 값을 순회할 수 없다.

이터레이션인 걸 확인했으니 next()를 사용해보자!

const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);

const setIter = set[Symbol.iterator]();
setIter.next();  // {value: 1, done: false}
setIter.next();  // {value: 2, done: false}

const mapIter = map[Symbol.iterator]();
mapIter.next(); // {value: Array(2), done: false}
mapIter.next(); // {value: Array(2), done: false}

이터레이션이므로 next함수를 통해 { value, done } 형태의 객체를 뽑아낼 수 있다. 즉 map과 set은

{ value, done } 형태의 객체를 순회하는 for of문을 사용해 순회해야한다.

 

map은 key, value 별로 따로 순회할 수 있는 방법도 존재한다.

const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);

for(const a of set) {
    console.log(a) // 1, 2, 3, 4, 5
}

for(const a of map) {
    console.log(a) // ['a', 1], ['b', 2], ['c', 3]
}

for(const a of map.keys()) { // 키만 순회
    console.log(a) // 'a', 'b', 'c'
}

for(const a of map.values()) { // 값만 순회
    console.log(a) // 1, 2, 3
}

for(const a of map.entries()) { // 둘 다 순회 =>
    console.log(a) // ['a', 1], ['b', 2], ['c', 3]
}