본문 바로가기

Javascript

for...of, 전개 연산자, 구조 분해, 나머지 연산자 - JS ES6+ 함수형 프로그래밍 - 10

시리즈는 인프런 강의 함수형 프로그래밍과 JavaScript ES6+ ( 지식 공유자 : 유인동 ) 강의를 수강하면서 내용을 방식대로 포스팅하는 글입니다.

 

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의

ES6+와 함수형 프로그래밍을 배울 수 있는 강의입니다. 이 강좌에서는 ES6+의 이터러블/이터레이터/제너레이터 프로토콜을 상세히 다루고 응용합니다. 이터러블을 기반으로한 함수형 프로그래밍,

www.inflearn.com

 

제너레이터는 이터러블 / 이터레이터 프로토콜을 따르고 있기 때문에, for...of 같은 이터러블 / 이터레이터 프로토콜을 따르는 문법 또는 많은 라이브러리들 과 함께 사용될수 있다.

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

function* limit(limit: number, iter) {
  for (const idx of iter) {
    yield idx;
    if (idx === limit) return;
  }
}

function* odds(limitNum: number) {
  for (const idx of limit(limitNum, infinity(1))) {
    if (idx % 2) yield idx;
  }
}

console.log(...odds(10)); // 1 3 5 7 9
console.log([...odds(10), ...odds(20)]); // [1, 3, 5, 7, 9, 1, 3, 5, 7 ,9 ,11, 13, 15, 17, 19]

const [head, ...tail] = odds(5);
console.log(head); // 1
console.log(tail); // [3, 5]

console.log(...odds(10)); // 1 3 5 7 9
console.log([...odds(10), ...odds(20)]); // [1, 3, 5, 7, 9, 1, 3, 5, 7 ,9 ,11, 13, 15, 17, 19]

const [head, ...tail] = odds(5);
console.log(head); // 1
console.log(tail); // [3, 5]

const [a, b, ...rest] = odds(10);
console.log(a); // 1
console.log(b); // 3
console.log(rest); // [5, 7, 9]

JS 에서는 이렇게 이터러블 / 이터레이터 프로토콜을 가지고 활용할수 있는 문법들과 기능들이 굉장히 많고, 잘 동작하고 있다.

많은 라이브러리들이나 많은 함수들도 이런 이터러블 프로토콜을 따르도록 구성이 되어있다면,

이렇게 제너레이터나 이터레이터 등을 활용을 잘할때 좀더 조합성이 높은 프로그래밍을 할수 있다.