[JavaScript] 함수형 프로그래밍 (2) - '순회'와 '이터러블'

2. '순회'와 '이터러블'

기존과 달라진 ES6에서의 리스트 순회 (for of 문)

• for i++
• for of

ES5, ES6의 리스트 순회 방법 차이

const list = [1,2,3];

for(let i=0; i<list.length; i++) {
  console.log(list[i]);
}
// 기존 ES5의 리스트 순회법 (Length,와 index에 의존!)

for(const a of list) {
  console.log(a);
}
// ES6의 리스트 순회법 list에서 a라는 객체를 빼올 수 있음!

const set = new Set([1,2,3]);
for(const a of set) {
  console.log(a);
}

const map = new Map([['a',1],['b',2],['c',3]]);
for(const a of map) {
  console.log(a);
}
// for of문은 이런식으로 set, map과 같은 객체 
// 역시도 쉽게 순회가 가능

• ES6에서는 ES5 문법과는 다른 방식으로 리스트를 순회!
  arr는 arr[0] 이런식으로 키로 접근해서 안에 있는 값을 조회할 수 있지만, set은 키로 접근이 불가능하다.

• 하지만, for of문으로써 조회가 가능한 이유는 기존 for i++ 방식처럼 값을 인덱스로써 접근하는게 아니라, symbol.iterator를 활용해 객체의 요소에 접근하기 때문이다.

Iterable / Iterator 프로토콜

• Iterable
  - 'Iterator'를 return하는 Symbol.iterator 메소드를 가진 값
  - 즉, Iterable은 symbol.iterator를 실행했을 때 Iterator를 return하는 값
  - arr는 arrSymbol.iterator를 실행했을 때, iterator를 return하기 때문에 Iterable이라고 할 수 있음`

• Iterator
  - {value, done} 객체를 return하는 next() 메소드를 가진 값
  - value와 done이라는 키에 해당하는 객체를 return하는 next()를 가진 값

• Iterable / Iterator Protocol
  - Iterable을 for...of, 전개 연산자 등과 함께 동작하도록한 규약
  

Arr, Set, Map의 Iterator

• arr, set, map은 JS 안에 내장된 객체로써 Iterable, Iterator 프로토콜을 따른다.

console.log(arr[Symbol.iterator]());
console.log(set[Symbol.iterator]());
console.log(map[Symbol.iterator]());

let iter1 = arr[Symbol.iterator]();
console.log(iter1.next());
// { value: 1, done: false }
// 이 때, done는 순회 완료 여부

/*
Object [Array Iterator] {}
=> { value: 1, done: false }

[Set Iterator] { 1, 2, 3 } 
=> { value: 1, done: false }, ...

[Map Entries] { [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] }
=> { value: [ 'a', 1 ], done: false }, ...
*/

• 이런식으로 내장 객체는 각각의 객체 타입에 따른 Iterator 객체를 가지고 있음
• 이 때, arr[Symbol.iterator] = null로 해버리면, Iterator로 순회 불가능

Map Iterator

• Map의 key, value, entry 각각의 값을 추출해내기 위해서는
  map.keys(),map.values(),map.entries() 이런식으로 접근해서 뽑아낼 수 있음

• 이 메소드로 접근해서 얻은 map Iterator은 또 다른 symbol iterator를 가지고 있음

console.log(map.keys()[Symbol.iterator]()); 
// [Map Iterator] { 'a', 'b', 'c' }

• 그렇기 때문에 for ... of로 순회 가능!