ES6의 심볼, 이터레이터와 제네레이터

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• <심볼>
  1. Symbol
  2. 심볼의 생성
  2-1) 대표적인 상용심볼
  
• <이터레이터와 제너레이터>
  1. 이터레이터(Iteratoe)
  1-1) 이터레이션 프로토콜
  2. 제너레이터(generator)

 

<심볼>

1. Symbol

• ES6에서 새로 선보인 원시 타입이다.  

typeof Symbol(); // 'symbol'

• 객체에 Unique한 속성을 만들어 다른 라이브러리와의 충돌을 막기 위해 Symbol이 필요하다.
• 원래 객체의 속성 이름은 문자열로 표현했다. 그러나 새로 추가한 라이브러리가 Array 같이 범용적으로 쓰이는 타입을 확장했다고 했을 때,

1. 내가 확장한 것과 같은 이름으로 확장했다면? 심볼은 Unique하기 때문에, description이 같아도 충돌하지 않는다.
2. 내가 Array의 속성의 갯수를 세고 있는 코드가 있었다면? 심볼은 객체의 속성을 순회하는 for in, Object.keys(obj), Object.getOwnPropertyNames(obj)에 걸리지 않는다.

 

 

2. 심볼의 생성

심볼은 다음과 같은 3가지 방법으로 생성할 수 있다.

• Symbol('some') : 고유한 심볼을 리턴한다.
• Symbol.for('some') : 심볼 레지스트리에서 lookup하여 description이 같으면 매번 같은 심볼을 리턴한다.
• 상용 심볼 : Symbol.iterator와 같이 표준에 정의된 심볼을 사용한다. 상용 심볼은 특별한 용도를 위해서 미리 만들어 놓은 것이다.

 

2-1) 대표적인 상용 심볼

• Symbol.iterator : 이터러블한 객체를 정의하기 위한 심볼
• Symbol.hasInstance : instanceof를 확장하기 위한 심볼
• Symbol.match : str.match(obj) 메소드는 obj를 정규표현식으로 변환해서 문자열 검색을 수행하는데, 이 기능을 확장하기 위한 심볼

※상용 심볼은 Symbol.match 대신 @@match로 표기할 수도 있다.

 

<이터레이터와 제너레이터>

1. 이터레이터(Iterator) 

• 반복을 위해 설계된, 특별한 인터페이스를 가진 객체이다.
• 이터레이터 객체는 next()를 가지고, 연산의 결과로 객체를 반환한다. { value: value, done: boolean } 
• 이터레이터로 '지금 어디 있는가' 파악이 가능하다.
• 배열의 요소를 나열할 목적이라면 for루프나 for of루프를 사용한다.

const it = book.values();
let current = it.next();
while(!current.done){
    console.log(current.value)
    current = it.next();
}

• 이터레이터는 모두 독립적이기 때문에 새 이터레이터를 만들 때마다 처음에서 시작한다.
• 각각 다른 요소를 가리키는 이터레이터 여러 개를 동시에 사용가능하다.

const it1 = book values();
const it2 = book values();

 

1-1) 이터레이터 프로토콜 : 모든 객체를 iterable 객체(순회 가능한 객체)로 바꿈

[Symbol.iterator](){
    return this.객체.values();
}

 

 

2. 제너레이터(generator)

• 이터레이터를 이용해 자신의 실행을 제어하는 함수
• 제너레이터가 도입한 두 가지 개념

1. 함수의 실행을 개별적 단계로 나눔으로써 함수의 실행을 제어한다.
2. 실행 중인 함수와 통신한다

• 제너레이터 (vs 함수)

1. 언제든 호출자에게 제어권 넘길 수 있음.(yield로 제너레이터와 호출자 사이에서 양방향 통신 가능)
2. 호출한 즉시 실행되지 않지만, 대신 이터레이터 반환, 이터레이터의 next메소드를 호출하면 실행됨.

• 제너레이터를 만들 때는 function*(화살표 표기법 사용할 수 없음.)
• 제너레이터에선 return외에 yield 키워드 사용 가능 

function* rainbow(){
    yield 'red';    # 호출자 it이 next호출해야 이 행이 실행되고
    yield 'orange';   # 다음 next호출 때에 이 행이 실행됨.
}

const it = rainbow();
it.next(); // {value : 'red', done : false}
it.next(); // {value : 'orange', done : false}
it.next(); // {value : undefined, done : true}