자바스크립트 반복문 for..in for..of 차이점

for...in과 for...of는 JavaScript에서 반복문을 사용할 때 자주 사용되는 두 가지 방법이지만, 그 동작 방식이 다릅니다. 각 반복문의 차이점을 자세히 알아보도록 하겠습니다.

1. for...in 반복문

• 용도: 객체의 속성(key)들을 순회할 때 사용됩니다.
• 반환 값: 객체의 key를 반환합니다.
• 주요 특징:
  • 객체의 열거 가능한 모든 속성(상속된 속성 포함)을 반복합니다.
  • 배열에도 사용할 수 있지만, 인덱스(문자열로 변환된 키)를 반환하므로 배열보다 객체 순회에 적합합니다.(배열은 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' (인덱스가 문자열로 출력됨)
}

2. for...of 반복문

• 용도: 이터러블 객체(Array, String, Map, Set 등)를 순회할 때 사용됩니다.
• 반환 값: 배열이나 이터러블의 값을 반환합니다.
• 주요 특징:
  • 배열의 요소, 문자열의 문자, Set의 값, Map의 [key, value] 쌍 등을 순회할 때 적합합니다.
  • 객체에는 사용할 수 없으며, 이터러블에만 사용 가능합니다.

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'
}

 

차이점 정리

• for...in: 객체의 키를 순회하며, 객체나 배열의 속성을 순회할 때 사용합니다.
• for...of: 이터러블의 값을 순회하며, 배열, 문자열 등의 이터러블에서 요소를 순회할 때 사용합니다.