개발 공부/JavaScript 공부

[JavaScript] iterable, iterator

종범2 2020. 5. 27. 08:21

iterable 객체란

Iterable 객체란 Symbol.iterator라는 Symbol 타입의 값을 속성으로 가지고 그 속성의 값이 인자를 받지 않으며 iterator 객체를 반환하는 메소드인 객체를 의미한다. 배열은 대표적인 iterable 객체이다.

 

arr이라는 객체에 Symbol.iterator라는 속성의 값은 어떤 메소드인데, 그 메소드를 실행하면 다음과 같이 iterator를 반환한다.

 

Symbol.iterator의 의미를 모르겠다면 Symbol에 관해 설명한 이전 글을 참고하길 바란다.

https://jongbeom-dev.tistory.com/138

 

[JavaScript] Symbol

Symbol을 알아야 하는 이유? 처음에 Symbol을 공부할 때에는 그런가 보다 하고 넘어갔는데 결국에는 다시 돌아와 공부하게 되었다. 제너레이터를 공부하다 보니 이터레이터를 알아야 하고, 이터레��

jongbeom-dev.tistory.com

iterator 객체란

Iterator는 iterator protocol을 따르는 객체를 의미한다. iterator protocol을 따른다는 의미는 객체에 next 메소드가 존재하고, 그 메소드가 done과 value 속성을 가지는 객체를 반환한다는 의미이다. 여기서 done 속성은 순서상 값이 존재하지 않으면 true값을 가지고 값이 존재하면 false값을 가지며 value 속성은 순서상의 값을 의미한다. 순서상의 값은 어떻게 정의하는가에 따라 달라진다. 배열에서 가져온 이터레이터의 경우는 다음과 같다.

 

iterable 객체와 iterator 객체 직접 구현하기

우선 iterable 객체를 생성할 수 있도록 class를 정의한다. 이때 생성된 객체의 Symbol.iterator 속성이 iterator를 반환하는 메소드가 되도록 한다. 반환된 iterator는 iterator protocol을 따르도록 한다.

 

이 경우 fiveArr 변수가 가리키는 객체는 iterable 객체가 되고 fiveArrIt 변수가 가리키는 객체는 iterator 객체가 된다.

 

for...of 구문

iterator 객체에는 for...of 구문을 사용할 수 있다. 구문은 다음과 같이 사용한다.

 

for (variable of iterable){

  statement

}

 

variable에는 const, let, var로 정의한 어떤 변수든 가능하고 iterable에는 iterable 객체만 가능하다. statement에서 variable이 순서상의 값이 된다. 배열에 이어서 문자열도 iterable 객체인데 이번에는 문자열을 이용하여 예시를 작성해 보았다.

 

Symbol에 이어 iterable과 iterator에 관해서 설명하였다. 다음 글에서는 generator를 설명하겠다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

 

Iteration protocols

As a couple of additions to ECMAScript 2015, Iteration protocols aren't new built-ins or syntax, but protocols. These protocols can be implemented by any object by simply following some conventions.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

 

Iterators and generators

Iterators and Generators bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of for...of loops.

developer.mozilla.org

 

'개발 공부 > JavaScript 공부' 카테고리의 다른 글

[JavaScript] 함수형 프로그래밍(1)  (0) 2020.06.30
[JavaScript] generator  (0) 2020.05.27
[JavaScript] Symbol  (0) 2020.05.26
[JavaScript] prototype  (0) 2020.05.21
[JavaScript] this  (0) 2020.05.19