JavaScript의 for...of 문: 이터러블 순회 가이드 - 좋은공간 좋은집

JavaScript에서 for...of 문은 배열, 문자열, 맵(Map), 셋(Set) 등과 같은 이터러블(iterable) 객체의 요소를 순회할 때 사용하는 반복문입니다. for...of 문은 이터러블 객체의 값을 순차적으로 가져오므로, 배열이나 문자열 등을 다룰 때 매우 간편하고 유용하게 사용됩니다. 이번 글에서는 JavaScript의 for...of 문 사용법과 다양한 활용 예시를 통해 그 기능을 알아보겠습니다.

JavaScript for...of 문이란?

for...of 문은 배열, 문자열, 맵(Map), 셋(Set)과 같은 이터러블 객체의 값을 순차적으로 가져와 반복할 수 있는 구조입니다. for...in 문이 객체의 속성(키)을 순회하는 반면, for...of는 이터러블 객체의 값 자체를 순회합니다. 따라서, 배열 요소나 문자열의 각 문자를 쉽게 처리할 수 있습니다.

for...of 문 기본 구조

for (변수 of 이터러블) {
    // 반복 실행할 코드
}

루프가 시작되면 변수에 이터러블 객체의 각 값이 순차적으로 할당되며, 해당 값에 대해 코드를 실행할 수 있습니다.

for...of 문 예시

// 배열의 각 요소를 순회하는 예시
const fruits = ['사과', '바나나', '딸기'];

for (const fruit of fruits) {
    console.log(fruit);
}

위 코드에서는 배열 fruits의 각 요소가 for...of 문을 통해 순회되며 출력됩니다. fruit 변수는 매번 배열의 다음 값을 가리킵니다. 출력 결과는 다음과 같습니다:

사과
바나나
딸기

이처럼 for...of 문은 배열의 각 요소에 간편하게 접근할 수 있게 해줍니다.

for...of 문과 다양한 이터러블

for...of 문은 배열뿐만 아니라 다양한 이터러블 객체와 함께 사용할 수 있습니다. 이터러블 객체는 배열 외에도 문자열, 맵(Map), 셋(Set) 등이 포함됩니다. 각각의 예시를 살펴보겠습니다.

1. 문자열 순회

for...of 문은 문자열을 순회하며 각 문자를 처리할 수 있습니다.

// 문자열 순회 예시
const text = 'JavaScript';

for (const char of text) {
    console.log(char);
}

위 코드는 문자열 text의 각 문자를 순회하며 출력합니다. 출력 결과는 다음과 같습니다:

J
a
v
a
S
c
r
i
p
t

이처럼 문자열의 각 문자를 순차적으로 처리할 때 for...of 문이 유용하게 사용됩니다.

2. Map 객체 순회

Map 객체는 키-값 쌍을 저장하는 자료 구조로, for...of 문을 통해 각 키-값 쌍을 순회할 수 있습니다.

// Map 객체 순회 예시
const userRoles = new Map([
    ['admin', '관리자'],
    ['editor', '편집자'],
    ['subscriber', '구독자']
]);

for (const [role, description] of userRoles) {
    console.log(role + ': ' + description);
}

위 코드는 Map 객체 userRoles의 각 키와 값을 순회하며 출력합니다. [role, description]은 각 키-값 쌍을 구조 분해 할당을 통해 받습니다. 출력 결과는 다음과 같습니다:

admin: 관리자
editor: 편집자
subscriber: 구독자

Map 객체에서 for...of를 사용하면 각 키-값 쌍에 간편하게 접근할 수 있습니다.

3. Set 객체 순회

Set 객체는 중복되지 않는 값들의 집합으로, for...of 문을 사용해 각 요소를 순회할 수 있습니다.

// Set 객체 순회 예시
const uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]);

for (const number of uniqueNumbers) {
    console.log(number);
}

위 코드는 Set 객체 uniqueNumbers의 요소를 순회하며 출력합니다. Set은 중복된 값을 허용하지 않기 때문에 출력 결과는 다음과 같습니다:

1
2
3
4
5

중복 없이 유일한 값들을 다룰 때 for...of와 Set 객체를 함께 사용하면 편리합니다.

for...of 문과 for...in 문 비교

for...of와 for...in은 반복문이지만, 그 용도가 다릅니다.

• for...of: 이터러블 객체의 값을 순회합니다. 배열, 문자열, 맵(Map), 셋(Set) 등에서 값에 직접 접근할 때 유용합니다.
• for...in: 객체의 속성(키)을 순회합니다. 배열이나 객체의 속성 이름(키)을 순회하고자 할 때 적합합니다.

for...in 예시

// 객체의 키를 순회하는 for...in 예시
const person = {
    name: 'Alice',
    age: 30,
    city: 'New York'
};

for (const key in person) {
    console.log(key + ': ' + person[key]);
}

for...in은 객체의 키에 접근하여, 해당 키의 값에도 접근할 수 있습니다. 이와 달리 for...of는 배열이나 이터러블 객체의 값 자체를 순회하는 데 적합합니다.

for...of 문과 배열의 entries(), keys(), values()

for...of 문은 배열의 entries(), keys(), values() 메서드와 함께 사용할 수 있습니다. 이를 통해 배열의 인덱스와 값에 모두 접근할 수 있습니다.

1. entries() 메서드

entries() 메서드는 배열의 인덱스와 값을 동시에 반환하는 이터러블을 생성합니다.

// entries()를 사용한 예시
const fruits = ['사과', '바나나', '딸기'];

for (const [index, fruit] of fruits.entries()) {
    console.log(index + ': ' + fruit);
}

출력 결과는 다음과 같습니다:

0: 사과
1: 바나나
2: 딸기

entries()를 사용하면 배열의 각 요소와 해당 요소의 인덱스에 모두 접근할 수 있습니다.

2. keys() 메서드

keys() 메서드는 배열의 인덱스만 순회하는 이터러블을 생성합니다.

// keys()를 사용한 예시
for (const index of fruits.keys()) {
    console.log(index);
}

출력 결과는 배열의 인덱스만 출력됩니다:

0
1
2

3. values() 메서드

values() 메서드는 배열의 값만 순회하는 이터러블을 생성합니다.

// values()를 사용한 예시
for (const fruit of fruits.values()) {
    console.log(fruit);
}

출력 결과는 배열의 값만 출력됩니다:

사과
바나나
딸기

이처럼 for...of 문과 entries(), keys(), values() 메서드를 함께 사용하면 배열을 더 유연하게 순회할 수 있습니다.

결론

JavaScript의 for...of 문은 배열, 문자열, 맵(Map), 셋(Set)과 같은 이터러블 객체를 순회할 때 매우 유용한 반복문입니다. 이터러블 객체의 값을 직접 순회하며 간결하게 작성할 수 있고, entries()와 같은 메서드와 결합하면 인덱스와 값 모두에 접근할 수 있습니다. 이번 글에서는 for...of 문을 사용하는 방법과 다양한 활용 사례를 살펴보았습니다. 이터러블 객체를 다룰 때 for...of 문을 사용해 코드를 더욱 간결하게 만들어보세요!