-
[Javascript] 이터레이터, 제너레이터프로그래밍 언어/JavaScript 2024. 1. 19. 18:32
이터레이션 프로토콜
일종의 약속인데 이 약속을 잘 지키는 데이터 컬렉션(객체, 배열 ...)은 for...of문으로 순회할 수 있고 spread문법을 적용할 수도 있다.
종류로 이터러블 프로토콜과 이터레이터 프로토콜이 있다.- 이터러블 프로토콜
이터러블 프로토콜을 준수한 객체를 이터러블이라고 한며 이러한 이터러블은 Symbol.iterator 메소드(이터레이터를 반환)를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. 이러한 이터러블은 for...of문과 spread 연산자의 대상으로 사용 가능하다.
- 배열은 Symbol.iterator 메소드를 소유하고 있고 일반 객체는 소유하고 있지 않다. 하지만 객체도 이터러블 프로토콜을 준수한다면 이터러블이 되며 이러한 방법으로 커스텀 이터러블이 있다.
- 이터레이터 프로토콜
next 메소드를 소유하며 메소드 호출 시 이터러블을 순회하며 value, done 프로퍼티를 갖는 객체를 반환하며 이 프로토콜을 준수한 객체가 이터레이터이다.
- 앞서 설명한 이터러블 프로토콜을 준수한 이터러블에서 Symbol.iterator 메소드를 호출하면 이터레이터를 반환하고 이 이터레이터는 next 메서드를 소유한다.
// 배열은 이터러블 프로토콜을 준수한 이터러블이다. const array = [1, 2, 3]; // Symbol.iterator 메소드는 이터레이터를 반환한다. const iterator = array[Symbol.iterator](); // 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다. console.log('next' in iterator); // true // 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. let iteratorResult = iterator.next(); console.log(iteratorResult); // {value: 1, done: false}
이터러블과 이터레이터는 다른 개념임
예시) 이터레이터는 이터러블한 배열에 의해서 생성될 수 있어며 배열의 Symbol.iterator 사용해서 반환되는 것이 이터레이터이기에 이터러블한 객체라고 바로 next() 메서드를 슬 수 있는 것이 아니다
이터레이터 리절트
이터레이터의 next 메서드가 반환하는 객체이며 제너레이터와 동일하게 value와 done 두개의 프로퍼티를 가진 객체이다.
제너레이터
일반 함수는 하나의 값 혹은 0개의 값을 반환한다 하지만 우리는 필요에 따라 여러개의 값을 하나씩 반환하고 싶을 때가 있고 이때 제너레이터가 사용된다.
제너레이터 함수)
제너레이터를 만들기위한 특별한 문법 구조 (function*)
function* generateSequence() { yield 1; yield 2; return 3; } let generator = generateSequence(); alert(generator); // [object Generator]
위와 같이 제너레이터 함수는 일반 함수와는 반환하는 값이 다르다.
어떻게 하면 원하는대로 하나씩 반환받을 수 있을까?
next()는 제너레이터의 주요 메서드로 호출 시 가장 가까운 yield를 만날때까지 실행이 지속되고 yeild를 만나면 실행이 멈추고 산출하고자 하는 값인 value가 반환된다.
function* generateSequence() { yield 1; yield 2; return 3; } let generator = generateSequence(); let one = generator.next(); alert(JSON.stringify(one)); // {value: 1, done: false} // next()는 항상 value, done을 가진 객체를 반환한다
return문까지도 지나게되면 함수가 종료되는데 이후에는 호출을 하더라도 아무 소용 없다.
이러한 next() 메서드를 가지고 있는 제너레이터는 이터러블이기에 for...or와 spread를 사용할 수 있다
레퍼런스
https://poiemaweb.com/es6-iteration-for-of
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
[Javascript] 메모리 힙 & 콜 스택 (0) 2024.01.19 [Javascript] prototype, class (0) 2024.01.18 [Javascript] 메모리 할당 (0) 2024.01.18 [Javascript] 즉시 실행 함수 IIFE (0) 2024.01.18 [Javascript] strict mode (0) 2024.01.18