JS | for...in 과 for...of

자바스크립트에서 for-in과 for-of는 반복문을 사용할 때 쓰이는 두 가지 방식이다

둘다 배열이나 객체를 순회하지만, 순회 대상이나 동작 방식에 차이가 있다

 

for-in 반복문

객체의 열거 가능한 속성(property) 또는 배열의 인덱스를 반복

 

특징

• 객체의 속성 이름(key)을 반복
• 배열에서는 배열의 인덱스를 반복. 즉, 배열의 요소가 아니라 그 인덱스를 반환 함
• 상속된 열거 가능한 속성도 포함될 수 있음

// 객체에서 사용
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
    console.log(key); // a, b, c (객체의 속성 이름)
}

// 배열에서 사용
const arr = [10, 20, 30];
for (let index in arr) {
    console.log(index); // 0, 1, 2 (배열의 인덱스)
    console.log(arr[index]); // 10, 20, 30 (해당 인덱스의 값)
}

 

주의 사항

• for-in은 객체의 속성을 순회하는데 적합하며 배열에서는 보통 for-of를 사용하는 것이 더 적절함
• for-in은 배열에 사용하면 배열의 요소가 아닌 인덱스를 반환하므로, 배열의 값을 직접 다루려면 추가적으로 인덱스를 사용해야 함
• 배열을 순회할 때, for-in은 배열의 프로토타입에 추가된 속성도 순회할 수 있기 때문에, 의도치 않은 결과를 낳을 수 있음

 

---

for-of 반복문

반복 가능한 객체,

즉 배열, 문자열, Set, Map 등에서 요소를 직접 반복함

 

특징

• 배열이나 문자열, Set, Map 등 반복 가능한 객체의 값을 반복함
• 인덱스가 아닌 배열의 요소 그 자체를 반환
• 객체에서는 사용할 수 없음(객체는 iterable이 아니므로)

// 배열에서 사용
const arr = [10, 20, 30];
for (let value of arr) {
    console.log(value); // 10, 20, 30 (배열의 요소)
}

// 문자열에서 사용
const str = "hello";
for (let char of str) {
    console.log(char); // h, e, l, l, o (문자열의 각 문자)
}

// Set에서 사용
const mySet = new Set([1, 2, 3]);
for (let value of mySet) {
    console.log(value); // 1, 2, 3
}

 

주의 사항

• 객체는 for-of로 순회할 수 없음 (객체는 iterable이 아니기 때문)
• 객체의 속성을 순회하려면 for-in을 사용해야 함

 

---

비교 요약

특징	for-in	for-of
반복 대상	객체의 속성(key), 배열의 인덱스	배열, 문자열, Set, Map등 의 값 (iterable)
반환 값	객체의 속성 이름, 배열의 인덱스	배열, 문자열 등의 실제 값
객체 순회 가능	가능	불가능 (iterable이 아님)
배열 사용 시	인덱스를 반환	값을 반환
적용 대상	객체나 배열의 속성	배열이나 iterable한 객체의 값

• 객체의 속성 순회는 for-in을 사용하는 것이 적절
• 배열이나 반복 가능한 객체의 요소를 순회할 때는 for-of를 사용하는 것이 더 간단하고 직관적