[자바스크립트] 이터러블

이터러블

JS

이터러블은 이터러블 프로토콜을 준수한 객체를 이야기합니다. 이는 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현해서 만들거나 프로토타입 체인에 의해서 상속받은 객체를 이야기합니다. 이러러블 프로토콜을 먼저 알아보면서 차근차근 정리해보도록 하겠습니다.

이터레이션 프로토콜

ES6 이전에는 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체 등등)은 각자의 구조를 통해 for, for...in, forEach 등 다양한 방법으로 순회가 가능했습니다. ES6 에서는 이터레이션 프로토콜을 준수시켜 이터러블로 통일하고 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했습니다. 

 

이터레이션 프로토콜은 아래와 같이 2가지로 나뉘게 됩니다.

1. 이터러블 프로토콜

Symbol 에서 배운 Symbol.iterator 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다. 이러한 규약을 이터러블 프로토콜이라고 하고 이 프로토콜을 준수하면 이터러블이라고 부르게 됩니다. 

2. 이터레이터 프로토콜

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다. 이터레이터는 next 메서드를 통해 이터러블을 순회하고 value 와 done 프로퍼티를 가지는 이터레이터 리절트 객체를 반환합니다. 이러한 규약을 이터레이터 프로토콜이라고 하고 이 프로토콜을 준수한 객체를 이터레이터라고 부릅니다. 이터레이터는 이터러블의 요소를 탐색할 수 있는 포인터 역할을 해줍니다.

이터러블

이터러블은 이터러블 프로토콜을 준수한 객체를 이야기합니다. 이터러블은 Symbol.iterator 를 프로토타입 체인에서 상속 받거나 프로퍼티 키로 사용한 메서드를 직접 구현한 객체입니다.

 

배열의 경우 Array.prototype 의 Symbol.iterator 를 상속받기 때문에 이터러블입니다. 때문에 for...of 나 스프레드 문법, 배열 디스트럭처링의 할당 대상이 됩니다. (스프레드 문법이나 배열 디스트럭처링은 추후 게시글을 통해서 정리하도록 하겠습니다.)

 

const array = [1, 2, 3];

// 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in array); // true

// 이터러블인 배열은 for...of 문으로 순회 가능하다.
for (const item of array) {
  console.log(item);
}

// 이터러블인 배열은 스프레드 문법의 대상으로 사용할 수 있다.
console.log([...array]); // [1, 2, 3]

// 이터러블인 배열은 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
const [a, ...rest] = array;
console.log(a, rest); // 1, [2, 3]

이터레이터

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환합니다. 이터레이터는 next 라는 메서드를 가지는데, next 메서드는 이러러블을 순회하기 위한 포인터 역할을 합니다.

 

즉, next 를 호출하면 이터러블을 한 단계씩 순회하면서 이터레이터 리절트 객체를 반환하게 됩니다. 이터레이터 리절트 객체의 value 프로퍼티는 현재 순회 중인 이터러블의 값을 나타내고 done 프로퍼티는 순회 완료 여부를 true, false 로 가지고 있습니다.

 

// 배열은 이터러블 프로토콜을 준수한 이터러블이다.
const array = [1, 2, 3];

// Symbol.iterator 메서드는 이터레이터를 반환한다. 이터레이터는 next 메서드를 갖는다.
const iterator = array[Symbol.iterator]();

// next 메서드를 호출하면 이터러블을 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다.
// 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는 객체다.
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

 

이터러블과 유사 배열 객체

유사 배열 객체는 배열과 유사하게 인덱스처럼 프로퍼티 값에 접근이 가능하고 length 프로퍼티를 갖는 객체를 말합니다. length 를 가지고 있기 때문에 for 문 사용이 가능하고 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지고 있으므로 배열처럼 인덱스 프로퍼티 값에 접근이 가능합니다.

 

하지만 유사 배열 객체는 이터러블이 아닌 일반 객체입니다. 즉 Symbol.iterator 메서드가 없기 때문에 for...of 문으로 순회가 불가능합니다.

 

// 유사 배열 객체는 이터러블이 아니기 때문에 for...of 문으로 순회할 수 없다.
for (const item of arrayLike) {
  console.log(item); // 1 2 3
}
// -> TypeError: arrayLike is not iterable

이터레이션 프로토콜이 필요한 이유

ES6 이전의 순회 가능한 데이터 컬렉션들은 통일된 규약이 없어 나름의 구조를 통해 다양한 방법으로 순회가 가능했습니다. ES6 에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일 했습니다. 이를 통해 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상이 될 수 있도록 일원화 했습니다.

 

데이터를 공급하는 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정한다면 데이터를 소비하는 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 됩니다. 

 

이처럼 다양한 데이터 공급자가 하나의 순회 방식을 가지도록 규정해 데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 하는 인터페이스의 역할을 할 수 있습니다.

마무리

이터러블을 통해 데이터 순회 방식을 통일해 데이터 소비자의 효율적인 데이터 공급자 사용이 가능하도록 만들었습니다. 이는 이터레이션 프로토콜을 지키기 때문에 발생하는 장점입니다. 

 

보다 더 자세한 내용은 아래 링크에서 확인 가능하고, 저 또한 내용들을 공부하며 정리하기 위한 목적으로 글을 남기는 것을 알려드립니다. 읽어주셔서 감사합니다!

출처 : https://poiemaweb.com/es6-class