[ JavaScript ] 이터레이터 & for-of

기존의 다른 언어에서는 배열과 같은 자료구조 순환시 iterator 를 사용했었다.

 

 

자바스크립트에서는 흔히 for-in 을 사용했는데,

 

이는 객체의 속성만을 순환할 때 사용했었다.

 

 

 

ES6 에서는 다양한 순환을 제공하기 위해 새로운 종류의 루프 문법을 추가했다.

 

 

 

이것이 바로 iterator 와 for-of 키워드 이다.

 

 

 

1. iterator & for-of

 

 

const list = [1,2,3];

for(let data of list){
	console.log(data);
}

 

 

 

 

for of 구문을 앞서 보았던 배열 뿐 아니라 이터러블 객체라면 모두 사용 가능하다.

 

 

 

 

2. iterable

 

 

앞서 언급했던 이터러블 이란 무엇일까?

 

 

순회 가능한 이라는 뜻으로, 이터레이터 는 이터러블 객체를 의미한다.

 

 

 

이터러블 객체는 순회를 위해 Symbol.iterator 속성을 가지고 있다.

 

 

 

 

3. Symbol

 

 

 

Symbol 은 객체의 유니크한 속성을 만들기 위해 사용되는 타입이다.

 

 

 

let color = Symbol('red');
console.log(typeof color);

 

 

심볼은 위와 같은 코드로 생성한다.

 

 

 

 

 

 

typeof 의 결과로 symbol 이 출력되는 것을 확인할 수 있다.

 

 

 

typeof 가 반환하는 타입은 아래와 같다.

 

 

• Undefined
• Boolean
• Number
• String
• Object
• Function
• Symbol

 

 

Obejct 와 Function 을 제외하면 모두 자바스크립트의 기본형이다.

 

 

참고로 기본형에는 null 도 존재하지만,

 

typeof null 은 object 로 출력된다.

 

 

 

심볼이 같는 의의이자 가장 큰 특징은 고유하다 라는 것이다.

 

 

 

const color = {
	color1:[Symbol('red')],
    color2:[Symbol('red')]
};

console.log(color.color1 == color.color2);

 

 

 

 

심볼은 고유하기 때문에 'red' 라는 같은 값을 가지고 있지만,

 

false 를 출력하는 것이다.

 

 

 

유의해야할 점은,

 

자바스크립트의 객체 루프인 for-in 이나 Object.keys 는 심볼을 건너 뛴다.

 

 

만약 출력하려고 한다면, 결과값을 볼 수 없을 것이다.

 

 

 

 

새로운 api 인 Object.getOwnPropertySymbols() 를 이용하면 객체 안에 존재하는

심볼키 목록을 볼 수 있다.

 

 

 

 

심볼 객체를 우리가 정의해서 사용할 수도 있지만,

 

자체적으로 있는 심볼이 있는데, 그 중 하나가 Symbol.iterator 이다.

 

 

만약 이 Symbol.iterator 속성을 가지고 있는 객체가 있다면,

 

그 객체는 iterable한 객체라고 할 수 있다.

 

 

iterable한 객체는 for-of 구문에 사용할 수 있다.

 

 

 

 

3. for-of 내부 동작

 

 

이터레이터 객체는 Symbol.iterator 메소드를 제공한다.

 

 

for-of 루프는 이 symbol.iterator 메소드를 호출하는 것부터 시작하고,

 

 

이 반환값으로 이터레이터 객체가 리턴된다.

 

 

 

이터레이터 객체는 next() 메소드와  value,done 을 속성으로 가지고 있다.

 

 

 

next() 메소드를 내부적으로 반복하면서, 객체들을 순회하는 것이다.

 

 

 

 

const num = new