For in 구문과 For of 문이 배열에서 써야되는지 객체에서 써야되는지 언제 써야 되는지 너무 헷갈림..
그래서.
각각의 개념에 대해
두 구문의 차이에 대해 알아보려고 한다.
객체의 모든 프로퍼티를 순회하며 열거할때 for...in 문을 사용한다.
for (변수선언문 in 객체) {...}
Example 1-1) For in의 예제
const person = {
name: 'Lee',
address: 'Seoul',
proto: { age: 20}
};
for (const key in person) {
console.log(key + ': ' + person[key]);
}
// name: Lee
// address: Seoul
// proto: [object Object]
Example 1-2) For in를 배열에 사용하면?
for (const item in [1, 2, 3]) {
console.log(item); // 인덱스가 나타남 0, 1, 2
}
for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.
for (변수언선문 of 이터러블) { ... }
Example 2-1) For of의 예제
for (const item of [1, 2, 3]) {
//item 변수에 순차적으로 1, 2, 3이 할당된다.
console.log(item); // 1, 2, 3
}
Example 2-2) For of를 객체에 사용하면?
const person = {
name: 'Lee',
address: 'Seoul',
proto: { age: 20}
};
for (const key of person) {
console.log(key + ': ' + person[key]);
}
// TypeError: person is not iterable
JavaScript 에서 iterable protocol 을 구현하지 않은 Object 는 iterable 이 아닙니다.
그러므로, 객체의 프로퍼티를 반복하기 위해 for…of 를 사용하면 안됩니다. by mdn.