[JS] 반복문의 비교, for...of와 for...in

반복문의 비교, for...of와 for...in

자바스크립트에서 for...of와 for...in은 반복문의 한 형태로, 각각 다른 목적과 사용 방법을 가지고 있습니다. 이 두 구문의 차이점과 사용 예를 살펴보겠습니다.

1. for...of 문

for...of 문은 컬렉션의 요소들을 반복하여 처리할 때 사용합니다. 이 구문은 배열, 맵, 세트, 문자열 등 이터러블(iterable) 객체에 사용됩니다. for...of는 컬렉션의 값(value)에 직접 접근할 수 있어서 간편하게 데이터를 처리할 수 있습니다.

예제 코드:

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

2. for...in 문

for...in 문은 객체의 속성(properties)을 반복하여 처리할 때 사용됩니다. 이 구문은 객체의 모든 열거 가능한 속성에 대해 반복하며, 주로 객체 속성의 키(key)에 접근할 때 사용합니다.

예제 코드:

let car = {make: "Toyota", model: "Camry", year: 2021};
for (let key in car) {
  console.log(key + ": " + car[key]);
}
// 출력:
// make: Toyota
// model: Camry
// year: 2021

주요 차이점

• 적용 대상: for...of는 배열과 같은 이터러블 객체에 사용하고, for...in은 객체의 속성을 순회합니다.
• 반복 대상: for...of는 값에 접근하고, for...in은 키에 접근합니다.
• 사용 목적: for...of는 컬렉션 내의 데이터를 처리할 때 유용하며, for...in은 객체의 속성을 검사하거나 처리할 때 사용됩니다.

이제 실습 문제를 통해 이해를 더욱 깊게 해 보겠습니다.

실습 문제

1. 다음 배열에 대해 for...of를 사용하여 각 요소를 출력하세요.

let numbers = [10, 20, 30, 40, 50];

 

2. 다음 객체에 대해 for...in를 사용하여 속성 이름과 값을 출력하세요.

let student = { name: "John Doe", age: 20, major: "Computer Science" };

 

위 문제들을 풀어보시면 for...of와 for...in의 차이를 좀 더 명확히 이해할 수 있을 것입니다.