2023-03-10

이터러블과 제너레이터

많이 들어봤던 이터러블과 제너레이터에 대해 자세히 알아보자!

Symbol

ES6에서 도입된 변경 불가능한 원시값으로 중복되지 않는 유일한 특성을 갖고 있다.

description(string) 인자를 선택적으로 전달할 수 있으며 값에는 영향을 미치지 않는다.

Symbol()로 호출로 생성된 심볼값은 전역 심볼 레지스트리에 등록되어 관리되지 않는다.

const mySymbol = Symbol('hello')
const mySymbol2 = Symbol('hello')
console.log(mySymbol) // Symbol(hello)
console.log(mySymbol.description) // hello
console.log(mySymbol1 === mySymbol2) // false
console.log(mySymbol.description === mySymbol2.description) // true(hello === hello)

Symbol 빌트인 함수 호출로 생성하며 고유하고 변경할 수 없으므로 new 연산자로 생성할 수 없다.

const mySymbol = new Symbol('hello') // Symbol is not constructor

for, keyfor

for 메서드는 인수로 전달된 문자열을 키로 전역 심볼 레지스트리에 존재하는지 검색해 반환한다.

검색시 값이 존재하지 않는다면 해당 문자열을 키로한 심볼값을 생성해 레지스트리에 저장하고 반환한다.

const mySymbol = Symbol.for('hello')
const isMySymbol = Symbol.for('hello')
console.log(mySymbol === isMySymbol) // true

keyfor 메서드는 인수로 심볼을 전달해 전역 심볼 레지스트리에 저장된 심볼값의 키를 추출할 수 있다.

const mySymbol = Symbol.for('hey')
console.log(Symbol.keyFor(mySymbol)) // hey

심볼로 표준 빌트인 객체 확장

자바스크립트에서 표준 빌트인 객체를 확장하는 것은 이름이 중복될 수 있기 때문에 권장하지 않는다.

만약 심볼값을 통해 빌트인 객체를 확장한다면 중복될 경우가 없기에 안전하게 확장할 수 있다.

Well-Known-Symbol

자바스크립트에서 기본 제공하는 빌트인 심벌 값을 말하며 엔진 내부 알고리즘에 사용된다.

예를 들어 Array, String와 같이 for..of문으로 순회 가능한 빌트인은 Symbol.iterator를 키로 갖는 메서드를 가지며, 호출시 이터레이터를 반환하도록 규정되어 있다.

만약 이터러블이 아닌 일반 객체를 이터러블처럼 동작하게 하려면 Symbol.iterator를 키로 갖는 메서드를 추가하고 이터레이터를 반환하도록 구현하면 그 객체는 이터러블이 된다.

const obj = {
  [Symbol.iterator]() {
    let cur = 0
    const max = 5

    return {
      next() {
        return { value: cur++, done: cur > max } // 리절트 객체
      },
    }
  },
}

for (const i of obj) {
  console.log(i) // 0,1,2,3,4
}

이터러블

JS 객체들의 순회 가능한 동작을 정의하는 규악을 의미한다.

예를 들어 Array, Map은 이터러블로 for..of문으로 순회가 가능하지만,

일반 객체는 이터러블이 아니기에 순회가 불가하다.

이처럼 순회 가능한 객체는 스프레드 문법, 디스트럭처링 할당의 대상으로 사용할 수 있다.

이터러블 프로토콜

Well-Known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나,

prototype 체인의 객체 중 하나가 Symbol.iterator 키 속성을 가져야 한다는 규악을 의미한다.

Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.

이터레이터 프로토콜

이터레이터는 next 메서드를 소유하며 이를 호출하면 이터러블을 순회하며 value, done 프로퍼티를 갖는

result 객체를 반환한다.

제너레이터

코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.

제너레이터 함수가 호출되면 제어권이 넘어가지만, 호출자에게 제어권을 다시 양도(yield) 할 수 있다.

즉, 호출자가 함수 실행을 일시 중지하거나 재개할 수 있는 권한이 있는 것이다.

제너레이터 함수는 실행 값을 반환하는 것이 아닌 제너레이터 객체를 반환한다.

제너레이터 객체

제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 이터레이터다.

Symbol.iterator 를 키로 사용한 메서드를 상속 받으면서 value, done와 result객체를 반환하는

next 메서드를 소유하는 이터레이터다.

일시 중지와 재개

yield는 제너레이터 함수의 실행을 일시 중지하거나, 뒤에 오는 표현식 평가 결과를 호출자에게 반환한다.

이때 다시 next 메서드를 호출하면 중지된 코드부터 실행을 재개하고 다음 yield까지 실행되고 일시 중지 된다.

next 메서드는 value(값), done(함수 끝 여부) 프로퍼티를 갖는 result 객체를 반환한다.

function* genFunc() {
  yield 1
  yield 2
  yield 3
}
const myGenFunc = genFunc()
console.log(myGenFunc.next()) // {value: 1, done: false};
console.log(myGenFunc.next()) // {value: 2, done: false};
console.log(myGenFunc.next()) // {value: 3, done: true};

참조

모던 자바스크립트 Deep Dive - 위키북스