이터러블 프로토콜에 대해 설명해주세요.
분야: 프론트엔드
이터러블 프로토콜은 자바스크립트에서 데이터를 순차적으로 순회하여 탐색할 수 있도록 정해놓은 프로토콜입니다. 이터러블 프로토콜이 존재하는 이유는, 다양한 자료구조를 같은 방식으로 순회할 수 있게 하여 일관된 반복 처리 방법을 제공하기 위함입니다.
예를 들어 배열, String, Set, Map 등은 서로 다른 구조를 가지고 있지만, 이터러블 프로토콜을 따르고 있기 때문에 for...of 문이나 스프레드 연산자 같은 문법으로 동일하게 순회할 수 있습니다. 이런 통일성 덕분에 개발자는 자료구조마다 다른 순회 방식을 고민하지 않아도 됩니다.
이터러블로 간주되기 위해서는 해당 객체에 Symbol.iterator라는 키를 가진 메서드가 정의되어 있어야 하며, 이 메서드는 이터레이터 객체를 반환해야 합니다. 이때 반환된 이터레이터 객체는 next()라는 메서드를 가지고 있으며, 이 메서드를 호출하면 { value, done } 형태의 결과를 반환해야 합니다. 이 과정을 통해 내부 데이터를 순서대로 꺼내는 것이 가능합니다.
정리하면, 이터러블 프로토콜의 핵심 목적은 “순회할 수 있는 객체”의 공통된 인터페이스를 정의하여, 일관된 방식으로 데이터를 탐색할 수 있게 하는 것입니다.
직접 이터러블 객체를 구현해보실 수 있을까요? 🤔
네, 가능합니다. 객체에 Symbol.iterator 메서드를 직접 구현하면 커스텀 이터러블을 만들 수 있습니다.
const customIterable = {
data: [1, 2, 3],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
return index < this.data.length
? { value: this.data[index++], done: false }
: { done: true };
}
};
}
};
for (const item of customIterable) {
console.log(item); // 1, 2, 3 차례로 출력
}
이터러블과 이터레이터의 차이에 대해 설명해주세요. 🧐
스스로 고민해보고 답변하는 연습을 해보세요! 🙂