iterable 객체란 for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체를 의미 배열(Array) 객체는 내장 iterable 객체이기 때문에 for ... of 문법을 이용하여 각 요소를 반복할 수 있다 또한 String 객체, Map 객체, Set 객체도 내장 iterable 객체이다
다음과 같은 조건을 만족하면 배열이 아닌 일반적인 객체도 iterable 객체가 될 수 있다 - 이름이 Symbol.iterator인 메소드를 정의해야 한다(혹은 상위 프로토타입 체인에서 상속받아야 한다) - 해당 메소드는 인자가 없으며, iterator 객체를 반환해야 한다
iterable 객체의 Symbol.iterator 메소드가 반환하는 객체는 다음과 같은 조건을 만족할 때 iterator 객체가 된다 1. next() 메소드를 정의해야 한다 (혹은 상위 프로토타입 체인에서 상속받아야 한다) 2. 해당 메소드는 인자가 없으며, done 프로퍼티와 value 프로퍼티를 가지는 객체를 반환해야 한다 3. done 프로퍼티 : 반복이 끝났다면 true, 아니라면 false (혹은 done 프로퍼티를 정의하지 않음)이다 4. value 프로퍼티 : 반복이 끝났다면 undefined (혹은 value 프로퍼티를 정의하지 않음), 아니라면 현재 위치의 요소 값이다
결국, 특정 iterable 객체에 대하여 반복을 수행한다는 것은 그 interable 객체의 Symbol.interator 메소드를 호출하여 iterator 객체를 얻고, 그 interator 객체의 next() 메소드를 호출하여 요소를 하나씩 꺼내는 것을 의미한다. 이러한 interable 객체를 이용하는 대표적인 JavaScript 문법이 바로 for ... of 문법이다
const arr = [2, 4, 6];
// (1)
for (const e of arr) alert(e);
// (2)
const iterator = arr[Symbol.iterator]();
while (true) {
const data = iterator.next();
if (data.done) break;
else alert(data.value);
}
위 코드는 for ... of 문법을 iterable 객체와 iterator 객체를 이용하여 구현해본 코드이다. 즉, (1)과 (2)는 사실상 거의 동일하다
Array-like 객체 (=유사 배열 객체)
유사 배열 객체란, 배열과 같이 생겼지만 엄밀히 말하면 배열은 아닌 객체를 의미
1. 숫자 값을 가지는 length 프로퍼티를 가지고 있어야 한다 2. 숫자 값 기반의 인덱싱이 가능해야 한다
length 프로퍼티를 가지고 숫자 값 기반의 인덱싱이 가능하면 마치 배열인 것처럼 사용할 수 있기 때문에 유사 배열 객체라고 하는 것이다. 그러나 엄밀히 말하면 Array 객체가 아니기 때문에, Array.map() 등의 Array 메소드를 사용할 수 없다는 특징이 있다
문자열(String 객체)이 대표적인 유사 배열 객체이다 또한, Document.querySeletorAll() 또는 Element.querySelectorAll() 메소드가 반환하는 NodeList 객체도 유사 배열 객체이다. 참고로 많은 경우에 내장 유사 배열 객체들은 iterable 객체이기도 하다. 하지만 유사 배열 객체라고 해서 iterable 객체라는 보장은 없고, iterable 객체라고 해서 유사 배열 객체라는 보장은 없다.
// 유사 배열 객체 (length 프로퍼티가 있고 숫자 값 기반의 인덱싱이 가능)
const arrLikeObject = {
0: 'IT',
1: 'Eldorado',
length: 2
};
// iterable 객체가 아니므로 에러 발생
for (const e of arrLikeObject) alert(e);
유사 배열 객체이지만 iterable 객체가 아니여서 for ... of 문법을 사용할 수 없음을 보여주는 예시 코드
댓글