[Javascript] Iterable (이터러블)

📍 Intro

Iterate 는 '반복하다' 는 사전적 의미를 가지고 있는 용어로, 프로그래밍에서는 주로 '반복 가능한 객체' 를 의미한다. 자바스크립트에만 존재하는 개념은 아니지만, 자바스크립트의 이터러블 개념을 학습하면 다른 프로그래밍 용어에도 쉽게 적용할 수 있다. 

 

✨  ES6 에 추가된 Iterable

ECMAScript 는 자바스크립트를 표준화하고 토대를 구성하기 위해 만들어진 표준화된 스크립트 프로그래밍 언어이며, ES6은 6번째 ECMAScript 버전을 의미한다. ES6 은 2015년에 제정되었는데, 이전까지 문제가 되었던 많은 부분들이 해결되고 기능이 대거 추가되어 자바스크립트의 가독성과 유지보수성을 향상했다.

 

ES6에는 기존에 없었던 Scope, parameter handling, 구조분해 할당 등 JS 개발자들이 흔히 사용하는 여러 개념들이 도입되었다. 이 때 함께 도입된 것이 바로 Iterable 과 Iterator 를 괄목하는 Iteration Protocol 이다. 

 

❗ES6 이전에는 iteration protocol 없이도 배열, 문자열 등을 for, while 문과 같은 반복문으로 순회할 수 있었다. ES6에 들어서며 이러한 반복형 객체들의 프로토콜이 통일되고, 여러 메서드의 공통 대상이 될 수 있도록 한 것이다. 

 

✨  Iteration Protocol 

Iteration protocol 안에는 Iterable protocol 과 Iterator protocol 이 존재한다. 

 

Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속하여 호출함으로써 iterator를 반환하는 규약이 💡Iterable protocol이다. 이 때, iterable protocol 을 준수한 객체는 iterable 이라고 한다. (for.. of, spread, rest 문법 대상이 됨) Iterable 의 Symbol.iterator 메서드를 호출하면 iterator 를 반환하는데,  이 iterator 는 💡Iterator protocol 를 준수한다 (next method, value property, done property 소유). Iterator 는 iterable 의 요소를 탐색하기 위한 포인터 역할을 한다. 

 

말이 어렵고 중복되는 내용이 많아 보일 것이다. 내용을 차례로 살펴보며 어떻게 다른 것인지 살펴보자. 

 

❗ 하지만 그 전에 우선 Symbol.iterator 에 대한 이해가 필요하다. 자바스크립트에는 빌트인 Symbol 함수가 있다. 이 Symbol 함수 안에는 빌트인 심벌들이 프로퍼티로 할당되어 있으며, 이들을 Well-known Symbol 이라고 부른다. 이 중 하나인 Symbol.iterator 역시 빌트인 심벌이다.

 

Iterable protocol을 따르는 객체 (Iterable) 는 다음과 같은 특징을 갖는다. 

1. Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 구현한다

2. Symbol.iterator 를 프로토타입 체인을 통해 상속받는다 

 

그리고 Iterator protocol 을 따르는 객체 (iterator) 는 다음과 같은 특징을 갖는다. 

3. next 메서드 소유

4. next 메서드의 결과 객체에 done, value 프로퍼티를 소유

 

다음 예시가 위의 내용을 명쾌하게 정리한다. 

 

const test = {
    [Symbol.iterator]() {
        let cur = 1;
        const max = 5;
        return {
            next() {
                return {value: cur++, done: cur > max + 1}
            }
        }
    }
}

 

위의 test 객체는 Symbol.iterator 를 프로퍼티 키로 사용하여, 메서드를 구현하고 있기 때문에 (1번 특징) iterable protocol 을 준수한다. 따라서 test 객체는 곧 iterable 이다. 

 

또한, test 안에 구현된 Symbol.iterator 메서드를 실행하면 iterator 가 반환이 되는데, 이 iterator 는 next 메서드를 가지며 (3번 특징), next() 의 실행 결과에 value 와 done 프로퍼티를 갖는다 (4번 특징). 

 

for (let num of test){
    console.log(num) // 1 2 3 4 5
}

let it = test[Symbol.iterator]();
it.next() // {value: 1, done: false}
it.next() // {value: 2, done: false}
it.next() // {value: 3, done: false}
it.next() // {value: 4, done: false}
it.next() // {value: 5, done: true}

 

위의 예시에 나온 next 메서드는 iterable 의 각 요소를 순회하기 위한 포인터 역할을 한다. 그리고 순회의 결과로 나오는 객체를 iterator result object 라고 칭한다. 

 

💡 정리하자면, iterator 를 반환하는 메서드를 갖는 객체를 iterable 이라고 하며, 이러한 iterable 은 iteration protocol 을 준수한다. 

 

 

우리가 흔히 아는 Array, String, Map, Set 등의 객체들은 모두 빌트인 (내장된) iterable 이며, 위의 예시처럼 새롭게 만든 객체들도 모두 iterable 이다. 어떠한 객체가 iterable 인지 여부를 확인하고자 한다면 다음과 같은 방법을 사용하면 된다. (다음 예시에서는 Array.prototype 의 Symbol.iterator 메서드를 상속받은 배열을 사용한다) 

 

// 방법 1 : 객체 내부에 Symbol.iterator 를 키로 갖는 메서드 있는지 확인 

const iter = [];
iter[Symbol.iterator] // ƒ values() { [native code] }

// 방법 2 : 객체의 key 값 직접 확인
Symbol.iterator in []; // true

 

 

✨  Iterable 특징

잠깐 언급했지만 iterable 의 가장 큰 특징은 for..of 문으로 조회, spread 문법, 배열 destructuring 문법의 대상이 된다는 점이다. 

 

1. for...of 문 조회

 

const arr = [ 1, 2, 3 ];

for (let a of arr) {
    console.log(a)
};

// 1
// 2
// 3

 

for ...of 문은 iterable 을 조회하는 것이며, for ...in 문은 객체를 조회하는 형식이다. for .. of 문은 iterator 의 next 문을 호출하며, 그 결과인 iterator result object 의 value 를 for ...of 문의 변수에 할당한다. (위의 경우에는 a) iterator result object 의 done 값이 true 가 나오는 순간, 순회를 중단한다. 

 

❗유사 배열 객체는 iterator 가 아니기 때문에 for...of 조회가 불가능하다. 하지만 예외가 존재하는데, arguments, NodeList , HTMLCollection 은 유사 배열 객체이면서도 iterable 이다. 

 

2. spread 문법

 

console.log(...arr) // 1, 2, 3

 

❗ 문자열은 iterable 이기 때문에 배열 destructuring 이 가능하지만, 객체는 아니기 때문에 불가능하다. 

 

let ha = 'haha';
const [b,rest] = ha;
console.log(b) // 'h'

let ha2 = {a:1, b:2};
const [a, b] = ha2; // TypeError

 

3. 배열 destructuring 문법 

 

const [a, ...rest] = arr;
console.log(a) // 1
console.log(rest) // [2, 3]

 

❗ 헷갈리면 안되는 것은, iterable 이 아닌 객체({})라도 객체 리터럴 내에서의 spread 나 destructuring 은 가능하다.

 

 

✨  Iteration Protocol  의 필요성

Iteration Protocol 이 규정되고 여러 자료구조가 iterator 의 형식을 취하면서, 다양한 데이터 공급자 (자료구조) 가 하나의 순회 방식을 갖도록 규정되었다. 이는 데이터 취득과 사용의 효율성을 굉장히 높여주는 방식이다. 

 

📍실제 사용례

- set 등의 자료구조에 적용하기 매우 간편함 (for.. in 불가능) 

- 결과값에 한계를 두지 않고 객체를 사용하고자 하는 경우

- 지연 평가 (lazy evaluation) 이 필요한 경우 : 데이터가 필요한 시점 이전까지는 미리 데이터를 생성하지 않다가 필요한 시점이 되면 데이터를 생성하는 기법 

 

 

✨ 참고자료

• 모던 자바스크립트 Deep Dive (위키북스)