이터러블이란 이터레이션 프로토콜에 속하는 이터러블 프로토콜을 준수한 객체를 의미한다.
조금 더 확실하게 표현을 하자면, 이터러블이란 순회가 가능한 객체를 뜻하며, 배열이 이터러블 객체의 예시다.
이터레이션 프로토콜은 ES6에 도입되어 순회 가능한 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.
ES6부터 순회 가능한 자료구조를 이터러블로 통일하여 다음은 우리가 자주 사용하는 문법은 다음과 같다.
- for…of
- 스프레드 문법
- 배열 디스트럭처링
만약 이터러블 요소를 없애면 어떻게 될까?
let numbers = [1, 2, 3];
for (const number of numbers) {
console.log(number);
}
// 1
// 2
// 3
numbers[Symbol.iterator] = null;
for (const number of numbers) {
console.log(number);
}
// Uncaught TypeError: numbers is not iterable다음과 같이 해당 배열은 순회할 수 없게 된다.
이터레이터란 {value: 값, done: true/false} 형태의 이터레이터 객체를 리턴하는 next() 메서드를 가진 객체를 의미한다.
다시말해, next 메서드를 통해 순환할 수 있는 객체를 의미한다.
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
iterator.next(); // {value:1,done: false}
iterator.next(); // {value:2, done: false},
iterator.next(); // {value:3, done: false}
iterator.next(); // {value: undefined, done: true}유사배열이란 인덱스와 length 프로퍼티가 있어 배열처럼 보이는 객체를 의미한다.
말 그대로 유사배열일뿐 배열은 아니기에 Symbol.iterator가 없으므로 유사배열은 순회가 불가능하다.
let arrayLike = {
// 유사 배열
0: "south",
1: "korea",
length: 2,
};
for (let item of arrayLike) {
}
// Uncaught TypeError: arrayLike is not iterable만약 유사 배열을 이터러블로 만들고 싶다면 Array.from 메서드를 통해 배열을 만들 수 있다.
let arrayLike = {
// 유사배열
0: "south",
1: "korea",
length: 2,
};
let arr = Array.from(arrayLike);
for (let item of arr) {
console.log(item);
}
// south
// korea우리가 사용하는 Array, String, Map, Set, TypedArray, arguments, DOM 컬렉션은 모두 빌트인 이터러블인 Symbol.iterator 제공하기에 순회가 가능하다.
그렇기에 이터러블을 활용해본 적이 없다는 이야기는 나는 자료구조를 사용하지 않는다는 의미와 같은 말이다.