31. iterable 객체
2026년 4월 14일
자바스크립트의 **이터러블(Iterable)**은 단순한 배열을 넘어, **"순회 가능한 모든 것"**을 정의하는 아주 강력한 규격입니다. 배열, 문자열뿐만 아니라 우리가 직접 만든 객체도 이 규격만 맞추면 for..of의 주인공이 될 수 있죠.
프론트엔드 개발에서 복잡한 데이터 스트림이나 커스텀 컬렉션을 다룰 때 필수적인 이 개념을 노션 스타일로 정리해 드립니다.
🔄 1. 이터러블(Iterable)과 이터레이터(Iterator)
이터러블은 객체를 **"반복 가능한 상태"**로 만드는 약속입니다. 이 약속을 지키기 위해선 두 가지 단계가 필요합니다.
Symbol.iterator(약속): 객체 내부에 이 심볼을 키로 가진 메서드가 있어야 합니다. 이 메서드는 **'이터레이터'**를 반환합니다.next()메서드 (실행): 이터레이터는 반드시next()메서드를 가져야 합니다. 이 메서드는{ value, done }형태의 객체를 반환하며 반복을 이어갑니다.
🎭 2. 이터러블 vs 유사 배열 (Array-like)
비슷해 보이지만 명확히 구분해야 하는 개념입니다.
- 이터러블(Iterable):
Symbol.iterator가 구현되어for..of를 쓸 수 있는 객체. - 유사 배열(Array-like): 숫자 인덱스와
length프로퍼티가 있어 배열처럼 보이는 객체.
[Image comparing JavaScript iterables vs array-like objects using a Venn diagram]
💡 참고: 문자열은 이터러블이면서 동시에 유사 배열인 대표적인 예입니다. 반면, 우리가 만든
range객체는 이터러블이지만 인덱스와length가 없으므로 유사 배열은 아닙니다.
🌁 3. Array.from: 가로지르는 다리
이터러블이나 유사 배열은 배열이 아니기 때문에 push, pop, filter 같은 강력한 배열 메서드를 쓸 수 없습니다. 이때 **Array.from**이 구원투수로 등판합니다.
- 진짜 배열로 변환:
Array.from(obj)를 거치면 모든 배열 메서드를 사용할 수 있는 '진짜 배열'이 됩니다. - 매핑 기능: 두 번째 인자로 함수를 넘기면 변환과 동시에 값을 가공(mapping)할 수 있습니다.
Array.from(range, num => num * num)
🎙️ 기술 면접 대비 (Interview Questions)
Q1. for..in과 for..of의 결정적인 차이는 무엇인가요? (중급)
답변: **
for..in은 객체의 모든 열거 가능한 '키(key)'**를 순회하며, 배열에서는 인덱스를 반환합니다. 반면 **for..of는 '이터러블' 객체의 '값(value)'**을 순회합니다. 배열이나 문자열처럼 순서가 중요한 데이터는 이터러블 규격을 따르는for..of를 사용하는 것이 훨씬 안전하고 효율적입니다.
Q2. 일반 객체를 이터러블로 만들기 위해 필요한 '이터레이터 프로토콜'을 설명해 주세요. (심화)
답변: 객체에
Symbol.iterator메서드를 구현해야 합니다. 이 메서드는next()메서드를 가진 객체(이터레이터)를 반환해야 하며,next()는 호출될 때마다 반복의 상태를 나타내는done(불린값)과 현재 값인value를 포함한 객체를 반환해야 합니다.done: true가 반환될 때까지 반복이 계속됩니다.
요약
for..of을 사용할 수 있는 객체를 이터러블이라고 부릅니다.
- 이터러블엔 메서드
Symbol.iterator가 반드시 구현되어 있어야 합니다.obj[Symbol.iterator]의 결과는 이터레이터라고 부릅니다. 이터레이터는 이어지는 반복 과정을 처리합니다.- 이터레이터엔 객체
{done: Boolean, value: any}을 반환하는 메서드next()가 반드시 구현되어 있어야 합니다. 여기서done:true은 반복이 끝났음을 의미하고 그렇지 않은 경우엔value가 다음 값이 됩니다.
- 메서드
Symbol.iterator는for..of에 의해 자동으로 호출되는데, 개발자가 명시적으로 호출하는 것도 가능합니다. - 문자열이나 배열 같은 내장 이터러블에도
Symbol.iterator가 구현되어 있습니다. - 문자열 이터레이터는 서로게이트 쌍을 지원합니다.
인덱스와 length 프로퍼티가 있는 객체는 유사 배열이라 불립니다. 유사 배열 객체엔 다양한 프로퍼티와 메서드가 있을 수 있는데 배열 내장 메서드는 없습니다.
명세서를 보면 대부분의 메서드는 ‘진짜’ 배열이 아닌 이터러블이나 유사 배열을 대상으로 동작한다고 쓰여 있는걸 볼 수 있습니다. 이 방법이 더 추상적이기 때문입니다.
Array.from(obj[, mapFn, thisArg])을 사용하면 이터러블이나 유사 배열인 obj를 진짜 Array로 만들 수 있습니다. 이렇게 하면 obj에도 배열 메서드를 사용할 수 있죠. 선택 인수 mapFn와 thisArg는 각 요소에 함수를 적용할 수 있게 해줍니다.