JavaScript의 for...in 문: 객체 순회 가이드 - 좋은공간 좋은집

JavaScript에서 for...in 문은 객체의 속성(키)를 순회할 때 사용하는 반복문입니다. 배열이나 객체와 같은 데이터 구조의 각 속성이나 인덱스에 접근하는 데 매우 유용합니다. 이번 글에서는 JavaScript의 for...in 문 사용법과 다양한 예시를 통해 그 활용 방법을 설명하겠습니다.

JavaScript for...in 문이란?

for...in 문은 주로 객체의 속성을 순회하면서 각 속성의 키에 접근할 때 사용됩니다. 배열에서도 사용할 수 있지만, 배열을 순회하는 경우에는 for...of가 더 적합할 수 있습니다. for...in 문은 객체의 모든 열거 가능한 속성에 대해 반복 작업을 수행할 때 유용합니다.

for...in 문 기본 구조

for (변수 in 객체) {
    // 반복 실행할 코드
}

for...in 문은 객체의 열거 가능한 속성 키를 순차적으로 가져옵니다. 반복될 때마다 변수에 객체의 속성 이름이 할당되고, 그 속성에 접근할 수 있습니다.

for...in 문 예시

// 객체의 속성을 순회하는 예시
const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

for (let key in person) {
    console.log(key + ': ' + person[key]);
}

위 코드에서는 person 객체의 각 속성 이름(key)이 for...in 루프를 통해 순회됩니다. 출력 결과는 다음과 같습니다:

name: John
age: 30
city: New York

key에는 객체의 속성 이름(키)이 들어가며, 이를 통해 속성 값(person[key])에 접근할 수 있습니다.

for...in 문과 배열

for...in 문은 배열에도 사용할 수 있지만, 주로 배열의 인덱스를 순회합니다. 배열 요소 자체를 순회하려면 for...of가 더 적합하며, for...in은 배열의 속성까지 포함해 순회할 수 있기 때문에 예상치 못한 결과가 나올 수 있습니다.

for...in과 배열 예시

// 배열의 인덱스를 순회하는 for...in 예시
const fruits = ['사과', '바나나', '딸기'];

for (let index in fruits) {
    console.log(index + ': ' + fruits[index]);
}

위 코드는 배열의 인덱스를 순회하며 각 요소를 출력합니다. 출력 결과는 다음과 같습니다:

0: 사과
1: 바나나
2: 딸기

이처럼 배열을 순회할 때 for...in 문은 인덱스를 기반으로 작동합니다. 배열 요소 자체에 접근하려면 for...of가 더 적합합니다.

배열에서 for...in의 주의점

배열에서 for...in을 사용할 때는 배열의 속성까지 순회될 수 있다는 점에 주의해야 합니다. 아래 예시를 살펴보겠습니다.

// 배열의 커스텀 속성 추가 예시
const fruits = ['사과', '바나나', '딸기'];
fruits.extra = '오렌지';

for (let index in fruits) {
    console.log(index + ': ' + fruits[index]);
}

배열에 extra라는 커스텀 속성을 추가한 후, for...in 문을 사용하면 이 속성까지 순회됩니다. 출력 결과는 다음과 같습니다:

0: 사과
1: 바나나
2: 딸기
extra: 오렌지

배열에서는 이러한 커스텀 속성이 포함되어 순회되기 때문에, 배열 요소만을 순회하고 싶다면 for...of나 for 루프를 사용하는 것이 좋습니다.

for...in 문과 객체의 상속 속성

for...in 문은 객체의 열거 가능한 속성을 순회합니다. 이는 객체 자체의 속성뿐만 아니라, 객체가 상속받은 속성도 포함될 수 있습니다. 따라서 객체 자체의 속성만 순회하고 싶을 때는 hasOwnProperty() 메서드를 함께 사용하는 것이 좋습니다.

hasOwnProperty()와 함께 사용하기

// 객체의 자체 속성만 순회하는 예시
const person = {
    name: 'Alice',
    age: 25
};

// 객체에 상속된 속성 추가
Object.prototype.city = 'Seoul';

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key + ': ' + person[key]);
    }
}

위 코드에서 Object.prototype에 city 속성을 추가하면, for...in 문은 이 상속된 속성도 순회하게 됩니다. 이를 방지하기 위해 hasOwnProperty()를 사용하여 객체 자체의 속성만 출력합니다.

for...in vs for...of

for...in과 for...of는 둘 다 반복문이지만, 사용 용도가 다릅니다. for...in은 객체의 속성을 순회하는 데 적합하고, for...of는 배열이나 이터러블 객체의 값을 순회하는 데 적합합니다.

for...of 예시

// 배열의 값을 순회하는 for...of 예시
const fruits = ['사과', '바나나', '딸기'];

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

위 예시는 for...of 문을 사용해 배열 fruits의 각 값을 순회하며 출력합니다. 배열의 값 자체에 접근하기 때문에, for...of는 배열을 순회할 때 더 간결하고 안전하게 사용할 수 있습니다.

for...in의 활용 사례

for...in 문은 객체의 속성에 접근하고 그 속성을 처리하는 데 매우 유용합니다. 다음은 for...in의 몇 가지 실용적인 활용 사례입니다.

1. 객체 속성 복사

for...in을 사용해 객체의 모든 속성을 다른 객체에 복사할 수 있습니다.

// 객체 속성 복사 예시
const source = { a: 1, b: 2, c: 3 };
const target = {};

for (let key in source) {
    if (source.hasOwnProperty(key)) {
        target[key] = source[key];
    }
}

console.log(target);

위 예시에서는 source 객체의 모든 속성을 target 객체로 복사합니다. 이 과정에서 상속된 속성은 제외됩니다.

2. 객체 속성 값 계산

for...in을 사용하여 객체의 속성 값을 모두 더하는 계산을 할 수 있습니다.

// 객체 속성 값 합계 계산 예시
const scores = {
    math: 90,
    english: 85,
    science: 95
};

let total = 0;

for (let key in scores) {
    total += scores[key];
}

console.log('총점:', total);

위 코드는 scores 객체의 각 과목 점수를 모두 더해 총점을 계산합니다.

결론

JavaScript의 for...in 문은 객체의 속성을 순회하는 데 매우 유용한 반복문입니다. 객체의 키와 값을 순회할 수 있으며, hasOwnProperty()와 함께 사용해 객체 자체의 속성만 처리할 수도 있습니다. 배열을 순회할 때도 사용할 수 있지만, 속성까지 포함될 수 있으므로 주의가 필요합니다. 이번 글에서는 for...in 문을 사용하는 방법과 다양한 활용 사례를 살펴보았습니다. 객체를 처리할 때 효율적으로 활용해보세요!