[함수형프로그래밍과 ES6+] 2. for of, iterable, iterator

ES6의 순회

for of

ES5의 순회보다 선언적으로 바뀌었다.

const arr = [1, 2, 3];

//es5 - Array객체의 length 프로퍼티를 활용한다.
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

//es6
for (const el of arr) {
  console.log(el);
}

es5에서는 때문에 Set, Map 객체의 순회가 이뤄지지 않았다. 하지만 es6에서는 for of 문을 통해서 순회를 할 수 있다.

why?

[Symbol.iterator]!

for of는 어떻게 동작하는가

객체에 [Symbol.iterator]프로퍼티에 iterator 메서드가 있다면 for of가 동작하게 된다.

반례로 Array객체의 [Symbol.iterator]에 null을 할당하면 for of는 동작하지 않는다.

iterable / iterator 프로토콜이란?

JS의 Set, Map, Array는 iterable / iterator 프로토콜을 따른다.

• iterable / iterator 프로토콜: iterable이 동작하도록 정한 규약

• iterable: iterator를 리턴하는 [Symbol.iterator]메서드를 가진 값.
  ex) Array객체는 iterable이다.

• iterator: { value, done }객체를 리턴하는 next메서드를 가진 값.

for of의 내부 작동 방식

const arr = [1, 2, 3];
const iterator = arr.[Symbol.iterator]();
// iterator.next()가 리턴한 객체를 done프로퍼티가 true가 될 때까지 순차적으로 value프로퍼티 값을 반환한다.

map.keys(), map.values(), map.entries()...

이 메서드들은 iterator를 반환한다. 그런데 [Symbol.iterator]를 갖고 있어 for of문 등 iterable 프로토콜 코드에서 사용할 수 있다. ([Symbol.iterator]가 자기 자신을 참조하기 때문)

well-formed iterator

• iterator가 [Symbol.iterator]값으로 자기자신을 반환하도록하면 well-formed iterator라 한다.
• iterator도 for of문등으로 순회가 가능해진다는 것
  - next()를 몇 번 호출한 후, for of문등에 전달하면 next()를 진행한 이후의 value를 리턴한다.

사용자 정의 이터러블 / 이터레이터 프로토콜 정의

// 이런 형태를 띄우고 있다.
cosnt iterable = {
  [Symbol.iterator]() {
    return {
        next() {
          return { value, done }
        },
      	[Symbol.iterator]() {
          return this;
        }
     }
  }
}