▶ JavaScript Tutorial

JavaScript Loop For In

JavaScript Loop For In: 객체 속성 순회의 이해와 활용

JavaScript에서 for...in 반복문은 객체의 **속성(property) 또는 키(key)**를 순회하는 데 사용됩니다. 이 반복문은 객체의 모든 열거 가능한(enumerable) 속성에 대해 반복하며, 배열이나 객체의 키를 처리하는 데 유용합니다. 이 가이드는 JavaScript의 for...in 문을 사용하여 객체의 속성을 순회하는 방법과 그 활용 예시를 다룹니다.

1. `for...in` 반복문의 기본 구조

for...in 문은 객체의 속성을 반복할 때 사용됩니다. 객체 내의 모든 열거 가능한 속성에 대해 반복이 이루어지며, 배열에서도 사용 가능하지만 주로 객체에서 자주 사용됩니다.

1.1. 기본 구문

for (변수 in 객체) {
    // 각 속성에 대해 실행할 코드
}

변수: 객체의 각 속성 이름(키)을 할당받습니다.
객체: 순회할 객체입니다.

2. 객체에서 `for...in` 사용

2.1. 객체의 속성 순회

for...in 문을 사용하면 객체의 모든 열거 가능한 속성을 순회할 수 있습니다.

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

for (let key in person) {
    console.log(key);          // 출력: name, age, city
    console.log(person[key]);  // 출력: Alice, 30, Seoul
}

key: 객체의 속성 이름을 나타냅니다.
person[key]: 객체의 각 속성값을 참조합니다.

2.2. 속성 값 출력

객체의 속성 이름과 속성 값을 함께 출력하는 예시입니다.

const car = {
    brand: "Tesla",
    model: "Model S",
    year: 2022
};

for (let key in car) {
    console.log(`${key}: ${car[key]}`);
}
// 출력:
// brand: Tesla
// model: Model S
// year: 2022

3. 배열에서 `for...in` 사용

for...in 문은 배열에서도 사용될 수 있지만, 배열의 인덱스를 순회하므로 일반적으로 객체에서 사용하는 것이 더 적합합니다. 배열의 값을 순회하려면 **for...of**가 더 나은 선택일 수 있습니다.

3.1. 배열의 인덱스 순회

배열에서 for...in을 사용하면 배열의 인덱스를 순회합니다.

const colors = ["red", "green", "blue"];

for (let index in colors) {
    console.log(index);       // 출력: 0, 1, 2 (인덱스)
    console.log(colors[index]); // 출력: red, green, blue (배열의 값)
}

3.2. `for...of`와 비교

배열에서 값을 순회하려면 **for...of**를 사용하는 것이 더 직관적입니다.

for (let color of colors) {
    console.log(color);  // 출력: red, green, blue
}

4. 열거 가능 여부 (`enumerable`)

for...in 문은 열거 가능한(enumerable) 속성만 순회합니다. 객체의 속성이 열거 가능한지 여부는 해당 속성의 enumerable 플래그에 따라 결정됩니다.

4.1. `enumerable` 속성 예시

객체의 속성을 열거할 수 있는지 확인할 수 있습니다.

const obj = { a: 1 };
Object.defineProperty(obj, 'b', {
    value: 2,
    enumerable: false  // 속성 'b'는 열거 불가능
});

for (let key in obj) {
    console.log(key);  // 출력: a (b는 출력되지 않음)
}

5. 객체의 상속된 속성 처리

for...in은 객체의 상속된 프로토타입 속성도 순회할 수 있습니다. 그러나 일반적으로 상속된 속성은 무시하고 객체 자체의 속성만 처리하고자 할 때가 많습니다. 이 경우 hasOwnProperty() 메서드를 사용하여 객체 자체의 속성인지 확인할 수 있습니다.

5.1. `hasOwnProperty()`와 함께 사용

const parent = { inheritedProp: "inherited" };
const child = Object.create(parent);
child.ownProp = "own";

for (let key in child) {
    if (child.hasOwnProperty(key)) {
        console.log(key);  // 출력: own (상속된 속성은 무시)
    }
}

6. 예시

6.1. 학생 성적 출력

학생들의 성적을 저장한 객체를 for...in을 사용해 출력하는 예시입니다.

const grades = {
    Alice: 90,
    Bob: 85,
    Charlie: 88
};

for (let student in grades) {
    console.log(`${student}: ${grades[student]}`);
}
// 출력:
// Alice: 90
// Bob: 85
// Charlie: 88

6.2. 객체에 속성이 있는지 확인

for...in 문과 hasOwnProperty()를 함께 사용하여 객체에 특정 속성이 있는지 확인할 수 있습니다.

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

function checkProperty(obj, prop) {
    if (obj.hasOwnProperty(prop)) {
        console.log(`${prop} 속성이 존재합니다.`);
    } else {
        console.log(`${prop} 속성이 존재하지 않습니다.`);
    }
}

checkProperty(person, "name");  // 출력: name 속성이 존재합니다.
checkProperty(person, "city");  // 출력: city 속성이 존재하지 않습니다.

7. 주의사항

배열에서는 주의: 배열을 순회할 때 for...in을 사용하면 인덱스를 순회하기 때문에, 배열의 값을 순회하려면 **for...of*를 사용하는 것이 더 적합합니다.
상속된 속성: for...in은 상속된 속성도 순회하므로, hasOwnProperty() 메서드를 사용하여 객체 자체의 속성만 순회하는 것이 일반적입니다.
열거 가능 속성: for...in은 열거 가능한 속성만 순회합니다. 열거 가능 여부는 enumerable 플래그에 따라 결정됩니다.

요약

for...in: 객체의 열거 가능한 속성을 순회하는 데 사용됩니다.
객체 속성 순회: 객체의 키와 그에 대응하는 값을 순회하고 처리할 수 있습니다.
배열에서 사용 가능: 배열에서 인덱스를 순회할 수 있지만, 배열의 값을 순회하려면 **for...of*가 더 적합합니다.
상속된 속성 무시: 상속된 속성을 무시하고자 할 때는 **hasOwnProperty()*를 사용합니다.

for...in 문은 객체의 속성을 처리하는 데 매우 유용하며, JavaScript에서 객체 기반의 작업을 할 때 자주 사용됩니다. 하지만 배열에서는 for...of가 더 적합할 수 있으므로 상황에 맞는 반복문을 선택하는 것이 중요합니다.

코딩 스쿨 JavaScript