[함수형 자바스크립트] Symbol, Iterator, Generator

자바스크립트에서 함수형 프로그래밍(FP)을 하기 위한 기본 개념인 Symbol, Iterator, Generator에 대해 간단히 알아보도록 하겠습니다.

Javascript Functional programming

 

Symbol()

• Symbol() 함수로부터 반환되는 모든 심볼 값은 고유합니다. 따라서 어떠한 객체의 키가 될 수 있습니다.
• Array, Map, Set 을 생성하면 고유한 Symbol.iterator 을 가지고 있게 됩니다.
• 일반 객체({}, object)는 Symbol.iterator를 가지고 있지 않기 때문에 iterable하지 않은 값입니다.
• Symbol.iterator를 통해 값을 하나씩 실행할 수 있게 됩니다.

 

Iterator, Iterable

• 아래와 같이 Iterator를 만들게 되면 next() 메소드를 통해 value, done값을 가진 객체를 꺼낼 수 있습니다. done이 true가 되면 iterator에 있는 값을 모두 꺼냈다는 것입니다.

 

• Spread operator도 iterator를 따르고 있습니다.
  • 배열, 객체 등을 복사하거나 Rest parameter 형태로 사용할 수 있습니다.
  • 배열, 객체를 그냥 복사할 경우에는 주소값을 참조하는 부분이 같기 때문에 복사되고 값이 원치 않게 변경될 수 있습니다.
  • 심볼 값은 고유하기 때문에 Spread operator로 쓰여지면서 고유한 심볼 값을 가진 객체, 배열로 복사가 가능합니다.

 

Generator

• Iterator를 반환하며, Iterable을 생성하는 함수입니다.
• Generator를 통해 Iterator를 만들 수 있고 함수 안에서 값을 순회할 수 있게 합니다.

인자로 초기값을 받아 무한대로 값을 크게 만드는 infinity 함수를 generator로 만들었습니다.

*와 yield 키워드를 통해 이터레이터가 반환되었습니다.

while (true) 조건을 넣었기 때문에 generator 함수가 아니었다면 프로그램이 죽었을 것입니다.

function* infinity(i = 0) {
  while (true) yield i++;
}

// output

const i = infinity(4)

i.next() // {value: 4, done: false}
i.next() // {value: 5, done: false}
i.next() // {value: 6, done: false}
i.next() // {value: 7, done: false}
i.next() // {value: 8, done: false}

정리

Symbol, Iterator, Generator 원리를 이용해 함수형 프로그래밍을 진행할 수 있게 됩니다.

다음 포스팅에서는 Lazy Evaluation(지연 평가)와 go, pipe, curry 등 대표적인 fp 함수들을 다뤄보겠습니다.

References

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol
• https://inf.run/iMzf
• https://paperblock.tistory.com/62
• https://milooy.wordpress.com/2018/12/15/lodash-fp로-함수형-프로그래밍-하기/
• https://github.com/lodash/lodash/blob/npm/curry.js