공부/JavaScript
이터러블 규약/ 이터레이터 규약.
726582776982
2022. 6. 10. 10:15
전체 개요
Symbol.iterator를 프로퍼티 키로 사용하여 메서드를 직접 구현하거나, Method 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
이터러블 이란 ?
이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.
Symbol.iterator를 프로퍼티 키로 사용하여 메서드를 직접 구현하거나, Method 체인을 통해 상속받은 객체이다.
이터레이터 란?
이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next메소드를 갖는다.
왜 이터레이션 프로토콜이 필요한가?
다양한 데이터 공급자가 하나의 순회방식을 갖도록 규정하거나 데이터 소비자가 효율적으로 데이터 공급자를 사용할 수 있도록 데이터 소비자와 공급자간의 인터페이스 역할을 한다.
next메소드를 통해 value 프로퍼티와 done 프로퍼티로 이터러블 내를 순회하는 방법으로 사용되며
value는 값, done은 순회완료 여부를 나타냄으로써 다양한 배열구조, 디스트럭쳐 할당, 스프레드 ... 등 다양한 컬렉션을 순회하는 수단으로 규약된 방법이다.
기본예제1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** 이터러블 규약과 이터레이터 규약 1 **</title>
<script type="text/javascript">
// str 문자열에 내장된 Symbol.iterator (@@iterator로 표현하기도함) 메서드 호출하여
// iterator객체를 얻고, next() 메서드 호출로 값을 모두 열거해본다.
let str = 'Iterator';
let iterator = str[Symbol.iterator]();
// str 문자열에 내장된 Symbol.iterator (@@iterator로 표현하기도함) 메서드 호출로 iterator객체를 얻음
// => next() 메서드 호출로 값을 모두 열거 가능해짐
let result;
do {
result=iterator.next(); // next() 메서드 호출로 문자열을 순차적으로 열거
console.log(result.value, result.done); //열거한 값(value) 과 done 을 출력
} while(result.value); // value 속성이 존재하면 반복
</script>
</head>
<body>
<pre>
** 이터러블 규약 (Iterable Protocol)
=> for ~ of 구문 실행시 내부적으로
Symbol.iterator (@@iterator로 표현하기도함) 메서드가 구현되어 있어야 한다는 규약.
=> 이 규약을 따르는 객체를 이터러블객체 (Iterable Object) 라 함.
Array, String, Map, Set, function 의 매개변수 객체 (Object 제외)
=> 위의 내장객체 외에도 @@iterator 메서드를 구현해주면 이터러블객체 생성 가능.
** 이터레이터 규약 (Iterator Protocol)
=> 값이 열거될때 next() 메서드를 통해 하나씩 순차적으로 열거되어야 함.
=> 이때 열거되는 값의 형태는 객체이고, value 와 done 속성을 가짐
=> value : 실제 값이 할당됨
=> done : 열거의 끝을 알려줌 ( 끝->true / 아니면->false )
</pre>
</body>
</html>
|
cs |
기본 예제 2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** 이터러블 규약과 이터레이터 규약 2 **</title>
<script type="text/javascript">
// 이터레이터 규약을 만족하는 객체 만들기
let banana = {
i:1,
[Symbol.iterator]:function(){ // 이터레이터 규약을 따르기 위한 @@iterator 메서드 선언
return this; // banana[Symbol.iterator]() 호출시 아래와 동일하게 호출되도록 this 를 return
}, //Symbol
next:function(){ // next() 메서드 호출시 value 와 done 을 가지는 객체를 전달하도록 해줌
return (this.i < 4) ? {value:this.i++, done:false} : {value:undefined, done:true};
} //next
} //let
console.log(banana.next());
console.log(banana.next());
console.log(banana[Symbol.iterator]().next());
console.log(banana[Symbol.iterator]().next());
</script>
</head>
<body>
** 이터러블 규약과 이터레이터 규약 2 **<br>
=> 이터레이터 규약을 만족하는 객체 만들기
</body>
</html>
|
cs |