[Javascript] List/Set/ Map 순회하기

기본적으로 리스트를 순회하는 방법은 이렇다.

const list = [1, 2, 3];
for (var i = 0 ; i < list.length ; i++){
	console.log(list[i]);
}

index를 쓰지 않고 of를 사용할 수도 있다.

const list = [1,2,3]
for(const item of list){
	console.log(item);
}

for (const a of arr) console.log(a); // inline으로 쓸 수도 있다.

 

[대괄호]로 선언해서 배열을 만들 수도 있지만, Set이나 Map으로 순회가능한 객체를 만들수도 있다.

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

이 경우 for이나 forEach를 사용한 순회는 되지만(Map, Set의 foreach사용은 ES6부터 가능하다.)

set[0], map[0]처럼 index로 접근되지는 않는다.

내부적으로 배열과 다르게, 심볼을 사용하여 구현되어 있기 때문이다.

 

set[Symbol.iterator] 또는 map[Symbol.iterator]를 찍어보면 함수를 반환한다.

set[Symbol.iterator]
>> ƒ values() { [native code] }

map[Symbol.iterator]
>> ƒ entries() { [native code] }

그 증거로 선언 후 set[Symbol.iterator] = null; 을 대입해주면

set is no iterable 에러가 뜨고 순회가 되지 않는 걸 볼수있다. (map도 마찬가지)

 

이 함수의 동작원리는 찍어보는게 제일 이해하기 쉬웠다.

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const values = map.values();
>> undefined
values
>> MapIterator {1, 2, 3,}
const values2 = values[Symbol.iterator]();
>> undefined
values2.next(); // 이제 next()로 접근이 가능하다.
>> {value: 1, done: false}
values3.next()
>> {value: 2, done: false}
values3.next()
>> {value: 3, done: false}
values3.next()
>> {value: undefined, done: true}
values3.next()
>> {value: undefined, done: true}

이렇게 끝날때까지 순서대로 {value: 값, done: false}를 찍다가, 순회가 끝나면 {value: undefined, done: true}를 반환한다.

 

여기서 value는 iterable이다. 내부에 iterable을 생성해주는 제너레이터가 있기 때문이다.

또한 values2를 iterator라고 한다. iterator는 값과 순회완료 여부 객체를 리턴하는 next()메서드를 가지고 있다.

이런 객체들은 for of나 다른 전개 연산자들을 사용할 수 있다.

 

전개연산자 ...도 사용가능하다.

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

console.log([...list]) 
>> 1 2 3
console.log([...a, 4,5]) 
>> 1 2 3 4 5
console.log(...map, ...set, 4, 5)
>> (2) ["a", 1] (2) ["b", 2] (2) ["c", 3] 1 2 3 4 5
console.log(...set, ...map.keys())
>> 1 2 3 "a" "b" "c"
console.log(...set, ...map.values())
>> 1 2 3 1 2 3
console.log(...set, ...map.entries())
>> 1 2 3 (2) ["a", 1] (2) ["b", 2] (2) ["c", 3]

다양하게 활용할 수 있다.

 

...를 사용할 수 있는 재미있는 방법이 또 있는데, 아래와 같이 사용도 가능하다.

const [a, ...b] = [1,2,3,4,5]
a
>> 1
b
>> (4) [2, 3, 4, 5]