모든 객체가 이터러블인 것은 아닙니다. 객체 자체가 Symbol.iterator를 구현하지 않아서 for...of 같은 반복문에서 사용할 수 없는 경우에는, 위의 3가지 경우을 이용, 반복하여 내부의 요소에 접근 할 수가 있습니다.
const obj = { a: 1, b: 2 };
// for...of 사용 불가 (오류 발생)
for (let value of obj) {
console.log(value);
}
// TypeError: obj is not iterable
이터러블 내장객체와 달리, 일반 객체를 반복하려면 Object.keys()나 Object.values(), 또는 Object.entries() 같은 메서드를 사용해야 합니다. 이 메서드들은 객체의 속성을 배열로 반환하며, 배열은 이터러블이기 때문에 이를 순회할 수 있습니다.
const obj = { a: 1, b: 2 };
const entries = Object.entries(obj);
for (let [key, value] of entries) {
console.log(key, value); // 'a' 1, 'b' 2
}
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
const obj1 = Object.keys(object1);
for (let val of obj1) {
console.log(val)
}
// a
// b
// c
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
const obj1 = Object.values(object1);
for (let val of obj1) {
console.log(val)
}
// somestring
// 42
// false
JavaScript의 다양한 내장 객체들은 이터러블 프로토콜을 따르며, for...of 루프를 사용할 수 있습니다.
이터러블을 지원하는 주요 객체는 다음과 같습니다:
getBoundingClientRect() (1) | 2024.10.27 |
---|---|
window.addEventListener() 화살표 함수 와 일반 함수 참조 차이 (0) | 2024.10.11 |
iterable (이터러블), iterator (1) | 2024.09.30 |
객체 리터럴 2가지 표현 방식의 차이점 (8) | 2024.09.30 |
dat.gui, lil-gui 차이점 (1) (1) | 2024.09.23 |