이터러블 객체

• ES6에서 도입되기 시작함
• Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 의미함
• 배열, 문자열, Map, Set 등은 이터러블 객체임
• 이터러블은 for..of문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있음

일반 객체

• 일반 객체도 객체 리터럴 내부에서 스프레드 문법을 사용할 수 있음

let user = {
    name : "Hodu",
    age : 8
}

console.log({...user}) // {name: 'Hodu', age: 8}

• 일반 객체도 이터러블 프로토콜을 준수하도록 구현하면 이터러블 객체가 됨

이터레이터

• 이터러블의 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환함
• 이터러블의 Symbol.iterator메서드가 반환한 이터레이터는 next()메서드를 가짐
• next()메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 함
• next()메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환함
• 이터레이터 리절트 객체는 value와 done의 프로퍼티를 가짐
• value프로퍼티는 현재 순회 중인 이터러블의 값을 나타냄
• done 프로퍼티는 이터러블의 순회 완료 여부를 나타냄

요약

• Symbol.iterator메서드를 호출하면 next()메서드를 가진 이터레이터를 반환
• next()메서드는 이터러블의 각 요소를 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환
• 이터레이터 리절트 객체는 현재 순회 중인 이터러블의 값을 나타내는 value와 이터러블의 순회 완료 여부를 나타내는 done 프로퍼티를 가짐

빌트인 이터러블

• 빌트인 이터러블은 이터레이션 프로토콜을 준수한 객체임
• Array, String, Map, Set, TypedArray, auguments, Dom컬렉션

for...of문

• for...of문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당함
• for...of문은 이터레이터의 next()메서드를 호출하여 이터러블을 순회하며 next()메서드가 반환한 이터레이터 리절트 객체의 value프로퍼티 값을 변수에 할당함
• 이터레이터 리절트 객체의 done프로퍼티의 값이 false이면 순회를 계속하고, true이면 이터러블의 순회를 중지함

이터러블과 유사 배열 객체

유사 배열 객체

• 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체
• length 프로퍼티를 가지므로 for문으로 순회할 수 있음
• 인텍스를 나타내는 숫자 형식의 문자열을 키로 가지므로 인덱스로 프로퍼티 값에 접근할 수 있음
• 이터러블이 아닌 일반 객체이므로 Symbol.iterator메서드가 없음
• for...of문으로 순회할 수 없음
• 모든 유사 배열 객체가 이터러블인 것은 아님
• 단, arguments, NodeList, HTMLCollection은 유사배열 객체이면서 이터러블임

유사 배열 객체

// 유사 배열 객체 예시

let arrLike = {
    "0" : 1,
    "1" : 2,
    "2" : 3,
    length : 3
};

arrLike[1]; // 2
arrLike.length; // 3

// 유사 배열 객체는 for문으로 순회할 수 있다.

for(let i = 0; i < arrLike.length; i++) {
    console.log(arrLike[i])
}

// 1
// 2
// 3

// 유사 배열 객체는 이터러블이 아니므로 for..of문으로 순회할 수 없다.

for(const i of arrLike) {
    console.log(i)
}

// Uncaught TypeError: arrLike is not iterable

일반 객체의 경우

let user = {
    name : "Hodu",
    age : 8
}

user[0]; // undefined
user[name]; // undefined
user.name; // 'Hodu'
user["name"]; // 'Hodu' 대괄호 접근법
user.length; // undefined
for(let i = 0; i < user.length; i++) {
    console.log(i)
} // undefined

Array.from()

• Array.from() 메서드는 유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환함

const arrLike = {
    "0" : 1,
    "1" : 2,
    "2" : 3,
    length : 3
};

const arr = Array.from(arrLike);

// 유사 배열 객체가 객체로 변환됨
console.log(arr); // [1, 2, 3]