[JS] : Iterator ( for ... of )

 

Iterator ?

JS에서 반복자(Iterator)는 시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 하나의 "객체" 라고 한다.

내가 iterator를 마주치게 된 것은

map 객체가 가진 key를 확인하고자 keys 메서드를 사용했을 때 였다.

set 객체가 가진 value를 확인할 때도 마찬가지였다.

그래서 오늘은 iterator에 대해 알아본다기 보다는

이 iterator 라는 객체를 for ... of 문을 통해서 반복문을 돌려볼 예정이다.

 

Iterator 를 확인한 부분

map 부분.

// map

// map 객체 생성
const myMap = new Map();

// 데이터 저장
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

// myMap의 key값들 확인
console.log(myMap.keys());
// 출력 값 : 
[Map Iterator] { 'one', 'two', 'three' }

 

set 부분.

// set 객체 생성
const mySet = new Set();

// 데이터 저장
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

// set이 가진 value 확인
console.log(mySet.values());

// 출력 값 : 
[Set Iterator] { 'value1', 'value2', 'value3' }

바로 위의 두 군데에서 Iterator 의 존재에 대해서 처음 알게 되었다.

 

for ... of 문 ?

반복가능한 객체 [Array, Map, Set, 등등 ... ] 에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 루프를 생성한다고 한다.

 

for ... of 문 형태

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

for 괄호 안에 const 로 명칭을 하나 선언해주고, of 뒤에 반복문을 돌릴 객체가 오면서 그 안의 요소들이 하나하나 선언한 값에 들어가 console.log 로 출력되는 것을 확인할 수 있다.

 

내 Map 객체에 적용시켜 보기

위의 형태를 예시삼아서 내가 만든 Map 객체에도 적용시켜 보았다.

map 객체가 가진 key

console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }

for (const key of myMap.keys()) {
    console.log(key);
}

// 출력 값 :
one
two
three

 

map 객체가 가진 value

console.log(myMap.values()); // [Map Iterator] { 1, 2, 3 }

for (const value of myMap.values()) {
    console.log(value);
}

// 출력 값 :
1
2
3

 

map 객체가 가진 key-value pair

console.log(myMap.entries()); // [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }

for (const entry of myMap.entries()) {
    console.log(entry);
}

// 출력 값 :
[ 'one', 1 ]
[ 'two', 2 ]
[ 'three', 3 ]

 

내 Set 객체에도 적용시켜 보기

이번엔 내가 만든 Set 객체에도 적용시켜 보았다.

set은 value 값만 저장을 하기 때문에 value만 반복문을 돌려보았다.

console.log(mySet.values()); // [Set Iterator] { 'value1', 'value2', 'value3' }

for (const value of mySet.values()) {
    console.log(value);
}

// 출력 값 :
value1
value2
value3

 

알게 된 점

const 로 선언한 변수 이름에는 아무이름이나 들어와도 상관없다. 다만 코드의 가독성을 위해 연계되는 단어를 넣어주는 것이 좋은것 같다.

for 문, while 문, forEach, map 뿐만아니라 새로운 반복문인 for ... of 를 알게되어서 좋았다.

그리고 Iterator 라는것이 또 하나의 객체라는 사실을 알게되어서 재미가 더 붙었다.

iterator의 뜻은 "반복자"라는 뜻이다.

이름그대로 반복성을 띄는 객체이기 때문에 오늘의 for ... of 문이 적용된것이 아닌가 싶다.

 

#for_of #반복문 #iterator #set #map