[React] "배열은 이터러블(iterable)해야한다" - 이터러블 프로토콜

이터러블 하다는 것은 

 

"하나씩 차례대로 꺼낼 수 있다" 라는 뜻이다.

 

자바스크립트에서는  배열, 문자열, Map, Set 등 과 같은 것들이 이터러블하다.

즉 하나씩 순서대로 꺼내 볼 수 있다는 뜻이다.

 

특징1. 순서대로 꺼낼 수 있다.

배열처럼 하나씩 차례대로 꺼낼 수 있다는 것을 말한다.

특징2. 특별한 도구가 있다.

자바스크립트에서 이터러블한 애들은 Symbol.iterator라는 숨겨진 도구를 가지고 있어서 꺼낼 수 있다.

 

예시 (for...of)

const fruits = ['apple','banana','cherry'];

//for...of를 쓰면 이터러블한 것을 하나씩 꺼낼 수 있다.
for(const fruit of fruits){
	console.log(fruit); //apple, banana, cherry
}

 

마치 책장에서 책을 한 권씩 꺼내는 것과 같다.

 

예시(스프레드 연산자)

const arr = [1, 2, 3, 4];

// 배열은 이터러블이므로 스프레드 연산자 사용 가능
const copy =[...arr];
console.log(copy); // [1, 2, 3, 4]

 

또한 직접 Symbol.iterator를 호출하여 동작을 확인 할 수도 있다.

const arr = [1, 2, 3];

// 배열에서 이터레이터를 생성
const iterator = arr[Symbol.iterator]();

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 }

 

 

즉, 배열은 이터러블 프로토콜을 따르는 것이다.

 

---

이터러블 프로토콜
(iterable protocol)

 

: 자바스크립트에서 객체가 반복(iterable) 가능한지

즉, 하나씩 순회할 수 있는지를 정의하는 규칙을 말한다.

 

이 프로토콜을 따르는 객체를 이터러블(iterable)이라고 한다.

 

이를 통해 객체를 순회하는 작업이 매우 유연해진다.

 

이터러블 객체(iterable object)

- Symbol.iterator라는 특별한 메서드를 가지고 있는 객체를 말한다.

- 이 메서드는 호출되면 이터레이터(iterator)를 반환한다.

 

이터레이터 프로토콜(iterator protocol)

- 이터레이터는 반복 가능한 값을 순차적으로 제공한다.

- next() 메서드를 가지고 있는 객체이다.

- next()를 호출할 때마다 {value, done} 형태의 객체를 반환한다.

- value : 현재값 , done: 더 이상 순회할 값이 없으면 true, 그렇지 않으면 false

 

// 배열은 기본적으로 이터러블
console.log(typeof arr[Symbol.iterator]); // "function"

 

이터러블 프로토콜의 장점

1. for...of 루프와 호환 : 이터러블은 for...of 에서 사용할 수 있다.

2. 스프레드 연산자와 호환 : [...iterable] 처럼 사용 가능하다.

3. Array.from()와 호환 : 이터러블을 배열로 쉽게 변환할 수 있다.

4. 유연성 : 사용자 정의 객체도 이터러블로 만들 수 있다.