JavaScript의 `for...in` 문과 `for...of` 문 이해하기

JavaScript의 for...in 문과 for...of 문 이해하기

소개

JavaScript에서 for...in과 for...of는 데이터 목록을 순회하기 위해 사용하는 두 가지 반복문입니다. 각 반복문이 언제 사용되는지 알아봅시다.

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

위 예시에서는 person이라는 객체 안에 있는 키-값 쌍을 하나씩 확인할 수 있습니다. key에는 각각 'name', 'age', 'job'이 저장되고, 해당 키의 값은 person[key]로 가져올 수 있죠.

언제 사용하나요?

• 객체 안에 어떤 키가 있고 그 키에 어떤 값이 있는지 확인하고 싶을 때
• 객체의 프로퍼티를 다루는 모든 경우

for...of 문

for...of 문은 배열이나 문자열 같은 이터러블, 즉 반복 가능한 데이터 목록을 순회할 때 사용합니다. 각 요소의 값을 하나씩 처리해야 할 때 사용합니다.

사용 예시:

let fruits = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
    console.log(fruit);
}
// 출력 결과:
// apple
// banana
// orange

위 예시에서는 fruits라는 배열에 있는 각 과일의 이름을 순서대로 출력할 수 있습니다. fruit에는 'apple', 'banana', 'orange'가 순서대로 저장됩니다.

언제 사용하나요?

• 배열이나 문자열처럼 여러 요소가 연속적으로 모인 자료를 순회할 때
• 각 요소의 값을 바로 사용하고 싶을 때

for...in과 for...of의 차이점

• for...in 문: 객체의 키를 반복하며, 각 키에 대응하는 값을 가져오는 데 사용합니다.
• for...of 문: 배열이나 문자열의 각 요소 값을 순서대로 처리하는 데 사용합니다.

결론

for...in과 for...of는 데이터 구조에 따라 적절히 사용해야 합니다. 객체의 프로퍼티를 다루려면 for...in을, 배열이나 문자열의 요소를 처리하려면 for...of를 사용하는 것이 가장 효율적입니다.