JavaScript에서의 `for...in` 반복문 이해하기

JavaScript에서의 for...in 반복문 이해하기

소개

for...in 반복문은 객체의 프로퍼티를 열거할 때 사용하는 JavaScript 반복문입니다. 객체의 프로퍼티 키를 순회하면서 키에 대응하는 값에 접근할 수 있습니다. 이 반복문은 배열과 객체의 프로퍼티를 반복적으로 처리하는 데 유용합니다.

for...in의 구조

for...in 반복문은 다음과 같은 구조를 가집니다:

for (변수 in 객체) {
    // 각 프로퍼티에 대해 반복될 코드
}

• 변수: 반복문이 순회할 때마다 객체의 각 프로퍼티 키를 순서대로 담습니다.
• 객체: 순회할 대상 객체를 지정합니다.

for...in의 예시

다음 예시는 for...in을 사용하여 객체의 프로퍼티를 순회하는 방법을 보여줍니다:

let person = {
    name: 'Alice',
    age: 30,
    job: 'Developer'
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}
// name: Alice
// age: 30
// job: Developer

배열에서의 for...in

for...in 반복문은 배열을 순회할 때도 사용할 수 있지만, 배열에서는 일반적으로 for나 for...of를 사용하는 것이 좋습니다. for...in은 인덱스를 기준으로 배열 요소를 순회하지만, 배열에 추가된 비정상적인 프로퍼티까지 순회할 수 있어 예상치 못한 결과를 낳을 수 있습니다.

let arr = [1, 2, 3];
arr.extra = 'extra';

for (let index in arr) {
    console.log(index); // 0, 1, 2, extra
}

위 코드에서 배열 arr에 추가된 extra 프로퍼티까지 순회하는 것을 볼 수 있습니다. 따라서 배열을 순회할 때는 for...in보다 for...of나 전통적인 for 반복문을 사용하는 것이 안전합니다.

for...in 사용 시 주의사항

• 상속된 프로퍼티 순회: for...in은 객체의 프로토타입 체인에 있는 상속된 프로퍼티도 순회합니다. 특정 객체 자체의 프로퍼티만 확인하려면 hasOwnProperty를 사용하세요.

  let person = { name: 'Alice' };
  Object.prototype.age = 30;
  
  for (let key in person) {
      if (person.hasOwnProperty(key)) {
          console.log(key); // name
      }
  }

• 순서 보장되지 않음: 객체의 프로퍼티 순서가 보장되지 않으므로, 특정 순서대로 프로퍼티를 순회할 필요가 있다면 다른 방법을 사용해야 합니다.

결론

for...in 반복문은 객체의 프로퍼티를 순회하는 데 유용하지만, 배열을 순회할 때는 예상치 못한 결과를 낳을 수 있습니다. 이 반복문을 사용할 때는 프로퍼티의 순서와 상속된 프로퍼티에 유의해야 합니다.