함수형 자바스크립트 - ES6와 이터러블

개요

함수형 프로그래밍에 관심이 많았을 뿐더러, 평소에도 ES6에서 추가된 여러가지 메서드를 자주 사용한다. 이제는 너무나도 당연하게 map, for of, forEach 등을 사용하는데 이론을 바탕으로 제대로 알고 쓰고 싶어서 강의를 보고있다. 그중에서도 이터러블/이터레이터에 대한 이해가 중요하다 느꼈기 때문에 간추려서 정리해 보았다.

함수형 자바스크립트 - ES6와 이터러블

ES6 자바크스립트에서는 새로 추가된 for of 문을 통해 Array, Set, Map을 순회할 수 있다.

 

Array는 별다른 점이 없다. key로 접근(array[key])해서 내부에 있는 값을 조회 할 수 있다. 그러나 Set은 Key로 접근해도 내부에 있는 값을 조회 할 수 없고, Map도 마찬가지라 키를 통해 값에 접근할 수 없다. 즉, Set과 Map은 일반적인 배열처럼 동작하지 않는다.

 

또, for of문은 ES5까지 배열을 순회하던 for(const i = 0; i < arr.length; i++) { arr[i] } 방식으로 동작하지 않는다는 뜻이다.

Symbol.iterator

Symbol.iterator라는 심볼이 있다. 심볼은 ES6에서 추가된 것으로 객체의 키로 사용할 수 있다.

실제로 console.log(arr[Symbol.iterator])를 보면 Symbol.iterator 키에 함수가 담겨 있는 것을 확인할 수 있다. Symbol.iterator에 null을 할당하면 for of 순회가 이루어지지 않는다.

 

즉, for of로 순회할 수 있는 이터러블 객체라는 것은 key로 Symbol.iterator가진 객체라는 의미다. 대략적으로 이터러블, 이터레이터를 정리하면 다음과 같다.

• 이터러블: 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값
• 이터레이터: {value, done}객체를 리턴하는 next()를 가진 값
• 이터러블/이터레이터 프로토콜: 이터러블을 for of, 전개 연산자 등과 함께 동작하도록 한 규약

Symbol.iterator의 동작

• Array는 Symbol.iterator를 가지고 있고, Symbol.iterator()메서드는 이터레이터를 반환환다.
  • 이터레이터는 next()메서드를 가졌고, next()를 실행하면 { value:1, done:false }처럼 value, done을 가진 객체를 반환한다.
• for문이 동작할 때 value에 값이 있으면 값을 반환하고, value에 값이 없을 때 next()를 호출하면 done:true를 확인하고 for문에서 빠져나오게 된다.
• map.values()등을 통해 값을 반환 받으면 요청한 값이 담긴 배열을 반환 받는데, 이 배열은 이터러블이다. Symbol.iterator을 가지고 있다.
• 이터러블, 이터레이터가 자기 자신을 반환하는 Symbol.iterator메서드를 가지고 있을 때 웰폼드 이터러블, 웰폼드 이터레이터라고 한다. 이터레이터도 이터러블이 되어야 한다.

ES6와 이터러블

오픈소스 또는 브라우저 환경도 이터러블/이터레이터 프로토콜을 따르기 시작했다. 예를 들어 document.querySelectAll()등 메서드로 반환된 값을 for of를 통해 순회할 수 있다.

이는 배열이기 때문에 순회 가능한 것이 아니라, Symbol.iterator가 구현되어 있기 때문이다. 또 전개연산자도 이터러블을 전개하는 것인 만큼 ES6와 이터러블은 깊은 연관을 맺고 있다.