[JS/함수형] Iterable Custom/전개연산자

이번에는 , 직접 Iterable이 어떻게 정의되어 지는지, 사용자 정의 Iterable을 만들어 볼거다.

10~0까지 반복을 하는 간단한 Iterable을 만들어 볼겁니다.

* 잠깐, Iterable /Iterator ?

• Iterable : Iterator를 리턴하면서, [Symobol.iterator]()를 가진 값
• Iterator : {value,done} 객체를 리턴하는 next 메소드를 가진 값

See the Pen JS Custom Iterator_practice1 by Doge (@DogeIsFree) on CodePen.

하지만, 이 Iterable은 완벽하지 못하다. 반복의 횟수를 통제할 수 없고, iterator를 1번,2번 ~~N번 진행하고, 그 다음부터 진행을 하고 싶은데, 그렇게 구현할 수 없기 때문이다.  위의 코드를 자세히 보면, iter를 한번 진행한 상태인데, 10부터 다시 진행이 되는걸 볼 수 있다 위와같이, 개발자가 진행상황에 맞게, 반복을 하기 위해서는 Well-formed-Iterable이어야 한다.

 

Well-formed-Iterator/Well-formed-Iterable

 

Iterator이면서, iterable인걸 Well-formed Iterator이라고 한다. 다른 말로 풀어쓰자면, Iterator가 자기자신을 Iterator로 가지면, Well-formed-iterator이다. 그리고, 대부분 Library의 Iterable은 Well-formed-Iterable 입니다. 다음 글에서 다룰, Genrator을 통해서, 생성하는 Iterator들도, Well-formed-Iterator이구요!

 

See the Pen JS_Well_formed_iterator by Doge (@DogeIsFree) on CodePen.

전개연산자(Spread Operator)

 

Spread Operator 또한, Iterator여야 사용가능한 문법이다. 가독성과 직관성이 좋은 문법이고, 자주 쓰인다!(특히 리액트에서 자주본거 같다) . 주로 배열의 요소나 객체를 나열할때, 사용한다!

그리고, 원본배열과 다른 공간 (값에의한 참조)이므로, 원본배열을 보호할 수 있다는 장점이 있다 ! 

배열과 같은 Iterable을 이용해서, ...rest와 같이, 나머지를 받는 연산을 하는 방법으로 이용할 수 도 있다. 

 

See the Pen JS Spread_Operator by Doge (@DogeIsFree) on CodePen.

 

 

Ref

• 위 내용은 유인동님의 인프런 강의 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.

https://www.inflearn.com/course/functional-es6/dashboard

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