for...of 루프
for...of와 for...in 루프는 JavaScript의 배열 요소와 객체 속성을 반복(iteration)하기 위한 편리한 방법을 제공합니다. 두 루프 모두 반복하는 데 사용되지만, 다른 상황에서 사용됩니다.
for...of 루프
for...of 루프는 배열, 문자열, Set 및 Map과 같은 이터러블 객체를 반복(iterate)하는 데 사용됩니다. 컬렉션 요소를 쉽게 순회할 수 있습니다.
문법:
for (let variable of iterable) {
// 각 요소에 대해 실행할 코드
}
예제:
JavaScript
let array = [1, 2, 3, 4, 5];
for (let value of array) {
console.log(value);
}
// 출력: 1 2 3 4 5
배열에 대한 적용
for...of 루프는 배열의 요소를 반복하는 데 유용합니다. 각 요소의 값을 쉽게 접근할 수 있습니다:
JavaScript
let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
console.log(fruit);
}
// 출력: apple banana cherry
문자열에 대한 적용
for...of 루프는 문자열의 문자를 반복하는 데에도 사용할 수 있습니다:
JavaScript
let str = 'Hello';
for (let char of str) {
console.log(char);
}
// 출력: H e l l o
9.2 for...in 루프
for...in 루프는 객체의 열거 가능한 속성을 반복하는 데 사용됩니다. 각 속성의 키에 대해 반복합니다.
문법:
for (let key in object) {
// 각 요소에 대해 실행할 코드
}
예제:
JavaScript
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
console.log(key + ': ' + obj[key]);
}
// 출력: a: 1 b: 2 c: 3
객체에 대한 적용
for...in 루프는 객체의 속성을 반복하는 데 유용합니다. 각 속성의 키와 값에 쉽게 접근할 수 있습니다:
JavaScript
let user = {
name: 'John',
age: 30,
isAdmin: true
};
for (let key in user) {
console.log(key + ': ' + user[key]);
}
// 출력: name: John age: 30 isAdmin: true
배열에 대한 적용
for...in 루프는 배열의 인덱스를 반복하는 데 사용할 수 있지만, 권장되지 않습니다. 프로토타입의 속성을 포함한 모든 열거 가능한 속성을 반복하기 때문입니다:
JavaScript
let array = ['apple', 'banana', 'cherry'];
for (let index in array) {
console.log(index + ': ' + array[index]);
}
// 출력: 0: apple 1: banana 2: cherry
9.3 for...of와 for...in 루프 비교
for...of와 for...in 루프 비교:
| 설명 | for...of | for...in |
|---|---|---|
| 적용 | 이터러블 객체 (배열, 문자열, Set, Map) | 객체 |
| 특징 | 값에 대해 반복 | 키에 대해 반복 |
| 배열과의 사용 | for (let value of array) { ... } |
for (let index in array) { ... } |
| 객체와의 사용 | for (let value of Object.values(obj)) { ... } |
for (let key in obj) { ... } |
GO TO FULL VERSION