[Vanilla JS] 순회와 이터러블

1. 리스트 순회

ES5의 리스트 순회는 리스트의 길이와 index를 통해 리스트를 순회한다.

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

ES6의 리스트 순회는 훨씬 간결하고 직관적으로 가능해졌다.

const list = [1,2,3,4,5]
for(const a of list){
	console.log(a)
}

 

2. Array / Set / Map

array, set, map 전부 "for of"를 통해 순회가 가능하다. 단 내부적으로 차이가 있다. 어떤 차이가 있는지 구체적으로 알 필요는 없다. 단 이 세개가 전부 이터러블이라는 것은 알아야한다. 

 

이터러블이란 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값을 말한다.

여기서 이터레이터란 {value,done}라는 객체를 리턴하는 next()를 가진 값을 말한다. next()는 for of를 따라 이어지는 다음 값을 의미하면 done이 true라면 순회가 종료된다.

 

array, set, map은 내부적으로 서로 다른 로직을 가지고 있는 이터러블이지만, 이터레이터를 통해 for of가 동작하도록 한다. 이러한 규약을 "이터러블/이터레이터 프로토콜"이라고 한다.

 

 

3. 전개 연산자

전개 연산자(...) 또한 이터러블을 따른다. 따라서 이터러블이라면 전개 연산자를 사용하여 표현할 수 있다.