For...in 과 For...of 의 차이

❓ 왜 쓰냐

For in 구문과 For of 문이 배열에서 써야되는지 객체에서 써야되는지 언제 써야 되는지 너무 헷갈림..

그래서.

1. 각각의 개념에 대해

2. 두 구문의 차이에 대해 알아보려고 한다.

📄 내용

For... in에 대해

객체의 모든 프로퍼티를 순회하며 열거할때 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 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.

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.

📓 참고