이터러블 객체
- ES6에서 도입되기 시작함
Symbol.iterator
를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 의미함
- 배열, 문자열, Map, Set 등은 이터러블 객체임
- 이터러블은 for..of문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있음
일반 객체
- 일반 객체도 객체 리터럴 내부에서 스프레드 문법을 사용할 수 있음
let user = {
name : "Hodu",
age : 8
}
console.log({...user})
- 일반 객체도 이터러블 프로토콜을 준수하도록 구현하면 이터러블 객체가 됨
이터레이터
- 이터러블의
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];
arrLike.length;
for(let i = 0; i < arrLike.length; i++) {
console.log(arrLike[i])
}
for(const i of arrLike) {
console.log(i)
}
일반 객체의 경우
let user = {
name : "Hodu",
age : 8
}
user[0];
user[name];
user.name;
user["name"];
user.length;
for(let i = 0; i < user.length; i++) {
console.log(i)
}
Array.from()
Array.from()
메서드는 유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환함
const arrLike = {
"0" : 1,
"1" : 2,
"2" : 3,
length : 3
};
const arr = Array.from(arrLike);
console.log(arr);
2022-04-21 최종 수정