JavaScript Loop For Of
JavaScript Loop For Of: 이터러블 객체 순회의 이해와 활용
JavaScript에서 for...of 반복문은 이터러블 객체(iterable object)를 순회할 때 사용하는
반복문입니다. 이터러블 객체는 배열, 문자열, Set, Map 등과 같이 반복 가능한 데이터 구조를 말합니다.
for...of는 배열이나 문자열과 같은 이터러블 객체의 값을 직접 순회할 수 있어, 기존의 for
또는 **for...in**보다 더 간결하고 직관적입니다.
이 가이드는 JavaScript의 for...of 반복문을 사용하여 이터러블 객체를 순회하는 방법과 그 활용 예시를 다룹니다.
1. for...of 반복문의 기본 구조
for...of 반복문은 이터러블 객체의 각 **값(value)**에 대해 반복을 수행합니다.
1.1. 기본 구문
for (변수 of 이터러블) {
// 각 값에 대해 실행할 코드
}
- 변수: 각 반복에서 이터러블 객체의 현재 값을 저장하는 변수입니다.
- 이터러블: 배열, 문자열,
Set,Map과 같은 이터러블 객체입니다.
2. 배열과 함께 사용하기
for...of는 배열의 요소를 순회할 때 매우 유용합니다. 각 요소에 접근하기 위해 인덱스를 사용할 필요 없이, 배열의 값 자체를 순회합니다.
2.1. 배열 순회 예시
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
console.log(fruit);
}
// 출력:
// apple
// banana
// cherry
2.2. 배열의 합 계산
배열의 모든 요소를 더하여 총합을 계산하는 예시입니다.
const numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (const number of numbers) {
sum += number;
}
console.log("총합:", sum); // 출력: 총합: 150
3. 문자열과 함께 사용하기
for...of는 문자열의 각 문자를 순회할 수 있습니다. 문자열도 이터러블 객체이기 때문에 각 문자에 순차적으로 접근할 수 있습니다.
3.1. 문자열 순회 예시
const greeting = "hello";
for (const char of greeting) {
console.log(char);
}
// 출력:
// h
// e
// l
// l
// o
4. Set과 Map과 함께 사용하기
Set과 Map은 ES6(ECMAScript 2015)에서 도입된 이터러블 객체로, for...of를 사용하여
각 요소나 키-값 쌍을 순회할 수 있습니다.
4.1. Set 순회
Set은 중복되지 않는 값을 저장하는 집합입니다. for...of를 사용하면 Set의 각 요소를 순회할 수 있습니다.
const uniqueNumbers = new Set([1, 2, 3, 4, 5]);
for (const num of uniqueNumbers) {
console.log(num);
}
// 출력:
// 1
// 2
// 3
// 4
// 5
4.2. Map 순회
Map은 키와 값으로 구성된 컬렉션입니다. for...of를 사용하면 Map의 각 [키, 값] 쌍을 순회할 수
있습니다.
const map = new Map([
["name", "Alice"],
["age", 30],
["city", "Seoul"]
]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 30
// city: Seoul
5. 객체와 함께 사용하기
일반적인 객체는 이터러블 객체가 아니기 때문에, **for...of**로 직접 순회할 수 없습니다. 하지만
Object.entries(), Object.keys(),
**Object.values()**와 같은 메서드를 사용하면 객체의 키, 값 또는 [키, 값] 쌍을 배열로 변환하여 for...of로 순회할 수 있습니다.
5.1. Object.entries()와 함께 사용
객체의 [키, 값] 쌍을 배열로 변환한 후 순회하는 예시입니다.
const person = { name: "Alice", age: 25, city: "Seoul" };
for (const [key, value] of Object.entries(person)) {
console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 25
// city: Seoul
5.2. Object.keys()와 Object.values() 사용
객체의 키 또는 값만 순회하려면 Object.keys() 또는 Object.values()를
사용합니다.
const person = { name: "Alice", age: 25, city: "Seoul" };
// 키 순회
for (const key of Object.keys(person)) {
console.log(key);
}
// 출력: name, age, city
// 값 순회
for (const value of Object.values(person)) {
console.log(value);
}
// 출력: Alice, 25, Seoul
6. for...in과 for...of의 차이점
for...in: 객체의 열거 가능한 속성(키)을 순회합니다. 주로 객체의 속성을 순회할 때 사용합니다.for...of: 이터러블 객체의 값을 순회합니다. 배열, 문자열,Set,Map과 같은 이터러블 객체에 사용합니다.
6.1. for...in과 for...of 비교
const arr = ["a", "b", "c"];
// for...in: 인덱스를 순회
for (const index in arr) {
console.log(index); // 출력: 0, 1, 2
}
// for...of: 값을 순회
for (const value of arr) {
console.log(value); // 출력: a, b, c
}
7. 제너레이터와 for...of
제너레이터 함수는 이터러블 객체를 생성합니다. for...of는 이러한 제너레이터에서 생성된 값을 순회할 수 있습니다.
7.1. 제너레이터 함수와 for...of 사용 예시
function* generator() {
yield 1;
yield 2;
yield 3;
}
for (const value of generator()) {
console.log(value);
}
// 출력:
// 1
// 2
// 3
8. for...of 사용 시 주의점
- 객체: 일반적인 객체는 이터러블 객체가 아니므로,
for...of로 직접 순회할 수 없습니다. 객체를 순회하려면Object.entries(),Object.keys(),Object.values()등을 사용해야 합니다. - 배열을 인덱스로 순회할 때는
for...of보다for...in사용 주의: 배열에서 인덱스를 순회하려면for...in을 사용할 수 있지만, 값을 순회하려면for...of가 더 적합합니다.
요약
for...of: 배열, 문자열,Set,Map과 같은 이터러블 객체의 값을 순회하는 데 사용됩니다.- *배열, 문자열,
Set,Map*에서 각 값을 순회할 수 있습니다. - 객체는 이터러블 객체가 아니므로, 객체의 키와 값을 순회하려면
Object.entries(),Object.keys(),Object.values()와 함께 사용합니다. - 제너레이터 함수도
for...of를 통해 값을 순차적으로 순회할 수 있습니다.
JavaScript의 for...of 반복문은 이터러블 객체를 다룰 때 매우 강력하고 간결한 방법을 제공합니다. 이를 적절히 활용하면 데이터를 보다 효율적으로 순회하고 처리할 수
있습니다.