JavaScript의 for...in과 for...of 반복문 비교하기

JavaScript에는 배열이나 객체를 순회할 때 사용되는 다양한 반복문이 있습니다. 이 중 for...in과 for...of는 각각의 고유한 사용 사례와 특징을 가지고 있습니다. 이번 글에서는 이 두 반복문이 어떻게 다른지, 그리고 언제 사용해야 하는지를 예제와 함께 알아보겠습니다.

---

for...in 반복문

for...in 반복문은 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 사용됩니다. 즉, 객체의 키(key)들을 순회합니다.

문법:

for (key in object) {
  // 실행할 코드
}

특징:

1. 객체의 속성 이름을 순회합니다.
2. 배열에도 사용할 수 있지만, 배열의 인덱스를 순회합니다.
3. 프로토타입 체인에 있는 속성도 포함될 수 있습니다.

예제:

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

출력:

name: Alice
age: 25
city: Seoul

배열에서 사용 예제:

const numbers = [10, 20, 30];

for (const index in numbers) {
  console.log(`Index: ${index}, Value: ${numbers[index]}`);
}

출력:

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30

---

for...of 반복문

for...of 반복문은 이터러블 객체(iterable objects)를 순회할 때 사용됩니다. 배열, 문자열, Map, Set 등 이터러블 프로토콜을 따르는 객체를 순회할 수 있습니다.

문법:

for (value of iterable) {
  // 실행할 코드
}

특징:

1. 배열, 문자열, Map, Set 등 이터러블 객체의 **값(value)**을 순회합니다.
2. 객체(object)에는 사용할 수 없습니다.

예제:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}

출력:

apple
banana
cherry

문자열에서 사용 예제:

const greeting = "Hello";

for (const char of greeting) {
  console.log(char);
}

출력:

H
e
l
l
o

---

for...in과 for...of 비교

특징for...infor...of

순회 대상	객체의 열거 가능한 속성 (key)	이터러블 객체의 값 (value)
배열 사용 시	인덱스를 순회	요소 값을 순회
객체 사용 시	가능	불가능
프로토타입 속성 포함	포함될 수 있음	포함되지 않음

비교 예제:

const arr = ["a", "b", "c"];

console.log("Using for...in:");
for (const index in arr) {
  console.log(index); // 인덱스를 출력
}

console.log("\nUsing for...of:");
for (const value of arr) {
  console.log(value); // 값을 출력
}

출력:

Using for...in:
0
1
2

Using for...of:
a
b
c

---

언제 사용해야 할까?

• ``: 객체의 속성 이름(키)을 순회해야 할 때 적합합니다. 하지만 프로토타입 체인의 속성도 포함될 수 있으므로 주의가 필요합니다.
• ``: 배열이나 이터러블 객체의 요소 값을 순회해야 할 때 적합합니다. 이터러블 프로토콜을 따르는 객체라면 편리하게 사용할 수 있습니다.

---

이처럼 for...in과 for...of는 각각의 장점과 사용 사례가 뚜렷합니다. 상황에 맞는 반복문을 선택하여 코드의 가독성과 효율성을 높여보세요!