[javascript] for문 순회중 in과 of의 차이

JavaScript에서 반복문을 사용할 때, for 루프 안에 in을 써야 할지 of를 써야 할지 헷갈린 적이 많다.
이 두 키워드는 언뜻 비슷해 보이지만, 사실 순회하는 대상 자체가 완전히 다르다.

1. for...in: 키(Key) 또는 속성(Property) 순회

• for...in은 객체의 열거 가능한(enumerable) 속성 이름들을 순회하는 데 사용된다.
• 즉, 이 루프가 반환하는 값은 키(key) 또는 인덱스(index) 이다.

특징

• 반복 대상: 객체의 키(Key) 또는 배열의 인덱스를 문자열 형태로 반환.
• 주요 사용처: 일반 객체(Object)의 속성들을 순회할 때 가장 적합.
• 주의: 배열에 사용하면 인덱스를 문자열로 반환하며, 배열 자체에 추가된 다른 속성들까지도 순회할 수 있으므로, 배열 순회에는 권장되지 않음.

예시

const myObject = { name: 'Alice', age: 25, job: 'Developer' };

// 객체를 순회할 때
for (const key in myObject) {
  // key: 'name', 'age', 'job' 
  console.log(`키: ${key}, 값: ${myObject[key]}`);
  // 출력: 키: name, 값: Alice
}

// 배열에 사용 (인덱스를 문자열로 가져옵니다)
const myArray = ['A', 'B', 'C'];
for (const index in myArray) {
  // index: '0', '1', '2' (문자열 인덱스)
  console.log(`인덱스: ${index}, 값: ${myArray[index]}`);
  // 출력: 인덱스: 0, 값: A
}

2. for...of: 값(Value) 순회

• for...of는 반복 가능한(iterable) 객체의 실제 요소 값들을 순회하는 데 사용된다.
  즉, 이 루프가 반환하는 값은 요소의 값(value) 그 자체이다.

특징

• 반복 대상: 반복 가능한 객체의 값(Value)을 직접 반환.
• 주요 사용처: 배열(Array), 문자열(String), Map, Set 등과 같은 반복 가능한 자료구조의 요소들을 순회할 때 가장 적합
• 주의: 일반 객체는 기본적으로 반복 가능하지 않으므로, for...of를 직접 사용할 수 없음

예시

// 배열을 순회할 때 (배열의 값 자체를 가져옴)
const myArray = ['apple', 'banana', 'cherry'];

for (const value of myArray) {
  // value: 'apple', 'banana', 'cherry' (값을 가져옴)
  console.log(value);
  // 출력: apple
}

// 문자열을 순회할 때
const myString = 'Hello';
for (const char of myString) {
  // char: 'H', 'e', 'l', 'l', 'o'
  console.log(char);
  // 출력: H
}

정리

• 객체(Object)의 속성 키를 알고 싶을 때는 -> for...in
• 배열(Array)이나 문자열 등의 요소 값을 알고 싶을 때는 -> for...of