[자바스크립트] for문에서 Of와 in의 차이

간단하게

 

열거 가능하 = in

Symbol.iterator속성이 있어서 반복 가능하냐 (배열, 문자열, map, set) - of

 

in과 of는 JavaScript의 두 가지 다른 반복문 구문입니다. 그들이 어떻게 다른지 설명하겠습니다.

for...in 구문은 객체의 모든 열거 가능한 속성에 대해 반복하며, 그 속성의 이름을 반환합니다.
javascript
Copy code
const obj = {a: 1, b: 2, c: 3};
for (const prop in obj) {
    console.log(prop);  // 'a', 'b', 'c' 출력
}
for...of 구문은 반복 가능한 객체 (예: 배열, 문자열, Map, Set 등)의 각 항목에 대해 반복하며, 그 항목의 값을 반환합니다. 객체에는 기본적으로 Symbol.iterator 속성이 없으므로, for...of로 직접 반복할 수 없습니다.
javascript
Copy code
const arr = ['a', 'b', 'c'];
for (const value of arr) {
    console.log(value);  // 'a', 'b', 'c' 출력
}
따라서 (const prop in elementStyle)은 elementStyle 객체의 모든 속성에 대해 반복하고, (const prop of elementStyle)은 elementStyle 객체가 반복 가능하다면 그 값에 대해 반복합니다. 그러나 일반적으로 JavaScript 객체는 for...of로 직접 반복할 수 없습니다. 객체의 속성 값에 대해 반복하려면 Object.values()나 Object.entries()와 같은 메소드를 사용해야 합니다.

예를 들어, 객체의 모든 속성 값에 대해 반복하려면 다음과 같이 작성할 수 있습니다:

javascript
Copy code
const obj = {a: 1, b: 2, c: 3};
for (const value of Object.values(obj)) {
    console.log(value);  // 1, 2, 3 출력
}