Iterator & for-of | Symbol | [Symbol.iterator()]

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

1. Iterator & for-of

# 이터레이터와 for-of

 

기존의 문법에서는 배열과 같은 자료구조를 순환할 때 iterator을 사용하였다.

자바스크립트에서는 for, for each, for -in 를 사용했지만, forEach는 브레이크로 루프를 중단할 수 없었고, for -in은 객체의 속성들을 순회할 때 사용하였다.

ES6에서는 다양한 순환 기능을 제공하도록 새로운 종류의 루프 문법을 추가하였는데, 이것이 바로 iterator 과 for -of이다.

 

<script>
    const myArray = [10,20,30];
    
    for(let value of myArray){
    console.log(value);
    }
</script>

다음과 같이 이터레이터를 정의하고 for-of키워드를 사용하여 루프가 가능하다.

 

 

# iterable

for-of 구문은 앞서 보았던 배열 뿐만 아니라 이터러블 객체라면 모두 사용이 가능하다. 이터러블 이란 순회 가능한 이라는 뜻이다.(의미 그대로)

이터레이터는 결국 이터러블 객체를 말하는 것이다.이터러블 객체는 순회를 위해 Symbol.iterator 속성을 가진다.

 

이 속성을 알아보기 전에 simbol에 대해 알아보도록 하자

 

 

2. symbol

객체의 어떠한 것과도 다른 유니크한 속성을 만들기 위한 타입

<script>
  let name = Symbol("kim");
  console.log(typeof name);
</script>

심볼은 위와 같이 생성하며,  단항연산자 typeof의 결과로 기본형인 "Symbol"을 반환한다.

 

typeof가 반환하는 타입

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

object와 function을 제외하면 모두 자바스크립트의 기본형이다.기본형에는 null도 있지만, typeof null은 object로 출력된다.

 

<script>
const myObject = {
	symbol1: [Symbol("My Symbol")],
    symbol2: [Symbol("My Symbol")],
    };
console.log(myObject.symbol1 == myObject.symbol2);
</script>

 

결과는 false이다.

 

Symbol의 가장 큰 특징은 고유한 것이다. myObject 객체는 symbol1,2 프로퍼티를 가지고 각각 value내부에 "My Symbol"이라는 같은 description을 갖고 있지만, Symbol은 고유하기 때문에 결과는 false를 출력하게 된다.

 

 

👉🏻 Symbol 자세히 알아보기 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Symbol - JavaScript | MDN

 

아래 코드를 살펴보자

<script>
const myObject = {};

myObject.a = "apple";
myObject["b"] = "book";

let c = Symbol("c");
myObject[c] = "cat"
myObject[Symbol("d")] = "dog";

for(let key in Object){
	console.log("key in : " + key);
}
console.log("Object.keys(myObject): " + Object.keys(myObject));
</script>

객체에 프로퍼티를 삽입할 때 3번,4번(script제외하고) 라인과 같은 방법을 사용하지만 7번,8번 라인의 심볼은 더블 쿼테이션으로 감싸지 않는다.

자바 스크립트의 객체 루프인 for-in이나 Object.keys메소드는 심볼 키를 건너뛰기 때문에 출력되지 않는다.

 

코드 아래의 새로운 api를 추가해보자

<script>
const myObject = {};

myObject.a = "apple";
myObject["b"] = "book";

let c = Symbol("c");
myObject[c] = "cat"
myObject[Symbol("d")] = "dog";

for(let key in Object){
	console.log("key in : " + key);
}
console.log("Object.keys(myObject): " + Object.keys(myObject));
console.log("myObject[c] : " + myObject[c]);
console.log(Object.getOwnPropertySymbols(myObject));
</script>

 

결과는 다음과 같다.

 

새로운 api "Object.getOwnpropertySymbols()" 메서드를 사용하면 객체 안에 존재하는 심볼 키 목록을 조회할 수 있다.

 

이렇게 심볼 객체를 정의해서 사용할 수도 있지만, 자체적인 표준으로 정의되어 있는 심볼이 몇 개 있는데 그 중 하나가 Symbol.iterator이다.

 

👉🏻 각 속성 살펴보기 

pks2974.medium.com/javascript와-심볼-symbol-bbdf3251aa28

Javascript와 심볼 Symbol

이 심볼을 속성으로 가지고 있다면 이 객체는 이터러블 하다 라고 정의된 것이다. 결국 이 객체는 for-of 구문에 사용할 수 있는 것이다.

 

 

3. simbol.iterator()

 

# for-of의 내부동작

이터레이터 객체는 앞서 살펴본 Symbol.iterator 메소드를 제공한다.

for-of 루프는 바로 이 symbol.iterator 메서드 호출로 시작이 되고, 그 반환 값으로 이터레이터 객체가 리턴된다.

 

# iterator

- next()메서드와 value, done을 속성으로 가진다.

- next 메서드를 내부적으로 반복하면서 컬렉션의 객체들을 순회한다는 것이다.

 

<script>
const set = new Set([10,20]);

const myIter = set.entries();
console.log(myIter.next());
console.log(myIter.next());
console.log(myIter.next());
</script>

 

위 코드를 실행시키면 결과는 아래와 같이 출력된다.

 

//set에 대한 설명은 다음 강좌에서 다루겠다.

 

myIter라는 이터레이터가 준비되어있다. 이터레이터가 가진 next메소드 호출의 반환값으로 value와 done속성을 가진 객체가 리턴된 것을 확인할 수 있다.

 

Value는 현재 이터레이터가 가리키는 곳의 값이고, done은 이터레이터가 끝까지 도달했는지 여부를 true, false로 알려주는 것이다.

결과의 맨 마지막과 같이 끝까지 가게되면 value는 undefined, done은 true가 출력된다.

 

# 정리하기

- for-of 구문이 작동하는 방식은 다른 언어들의 for-of 구문들 처럼 내부적으로 어떤 메소들을 반복적으로 호출하는 방식으로 동작한다.

- ES6에서 새로 추가된 for-of 구문은 모든 iterable 객체를 대상으로 사용할 수 있다.