JavaScript for…of 루프 설명: 문법, 예제, 그리고 모범 사례

1 1. 소개
2 2. JavaScript의 for…of 문이란? 기본 사용법
3 3. 다른 반복문 구문과의 차이점 및 비교
- 3.1 3.1 for…of와 for…in의 차이점
  - 3.1.1 예시: for…in 사용
- 3.2 3.2 for…of와 forEach의 차이점
  - 3.2.1 예시: forEach 사용
4 4. 실용 예시와 고급 기법
5 5. 참고 사항 및 문제 해결
6 6. FAQ 섹션
7 7. 요약
- 7.1 7.1 for…of 문의 장점
8 8. 다음에 배울 내용
- 8.1 마무리 생각

1. 소개

JavaScript에서 데이터를 다룰 때 반복은 필수적입니다. 배열이나 문자열과 같은 데이터를 순서대로 처리하기 위해 JavaScript는 여러 반복문 구문을 제공합니다. 그 중 for…of 문은 간단하면서도 강력한 옵션으로 돋보입니다.

이 글에서는 JavaScript의 for…of 문을 기본부터 고급 사용 사례까지 자세히 설명합니다. 초보자에게 친숙한 예시로 시작해 중급 및 실무 개발에서 사용되는 실용적인 패턴까지 다룹니다. 이 글을 읽고 나면 루프를 작성할 때 막히지 않고 for…of 문을 자신 있게 사용할 수 있게 됩니다.

2. JavaScript의 for…of 문이란? 기본 사용법

2.1 for…of 문의 개요

JavaScript의 for…of 문은 반복 가능한 객체를 깔끔하고 간단하게 순회할 수 있게 해주는 구문입니다. 배열, 문자열, Map, Set과 같은 데이터 구조를 효율적으로 처리하도록 설계되었습니다.

2.2 for…of 문의 기본 구문

다음 구문을 사용하면 반복 가능한 객체의 각 요소를 순서대로 처리할 수 있습니다.

for (const element of arrayOrObject) {
  // 반복 처리
}

이 구문은 배열이나 문자열에서 각 요소를 쉽게 가져오고자 할 때 유용합니다.

2.3 실용적인 코드 예시

예시 1: 배열 요소를 순서대로 출력

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

출력:

Apple  
Banana  
Orange

예시 2: 문자열의 각 문자 출력

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

출력:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 지원되는 데이터 타입

for…of 문은 다음과 같은 반복 가능한 객체에서 사용할 수 있습니다:

배열 (Array)
문자열 (String)
Map 객체
Set 객체
arguments 객체 (함수 인자로 전달되는 객체)
NodeList 객체 (HTML 요소들의 컬렉션)

참고: 객체 리터럴에 직접 적용할 수 없습니다 (우회 방법은 나중에 설명합니다).

3. 다른 반복문 구문과의 차이점 및 비교

3.1 for…of와 for…in의 차이점

Syntax	Purpose	Target	Key Features
for…of	Iterate over values	Iterable objects such as arrays, strings, Map, Set, etc.	Processes each element value in a clean and simple way
for…in	Iterate over property keys	Enumerable properties of an object	Retrieves only key names; may include prototype properties

예시: for…in 사용

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

중요 참고:
for…in은 프로토타입 체인에 있는 속성까지 열거할 수 있기 때문에, 특히 객체를 순회할 때 주의가 필요합니다.

3.2 for…of와 forEach의 차이점

Syntax	Key Features	Control Flow
for…of	Simple and works for many iterable structures	Supports break and continue
forEach	Array-only and requires a callback function	Does not support break or continue

예시: forEach 사용

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

중요 참고:
forEach는 루프를 조기에 중단할 수 없으므로, 흐름 제어가 중요한 경우 for…of 문을 권장합니다.

4. 실용 예시와 고급 기법

4.1 배열 필터링

다음 예시는 짝수만 출력합니다.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

출력:

2  
4

4.2 Map에서 키와 값 가져오기

이 예시는 Map 객체를 사용해 키와 값을 가져오는 방법을 보여줍니다.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

출력:

name: Taro  
age: 25

4.3 비동기 처리와 결합

다음은 for…of 문을 사용해 비동기 작업을 처리하는 예시입니다.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

이 예시에서는 각 API 요청이 순차적으로 실행되므로, 실행 순서를 유지하면서 데이터를 가져올 수 있습니다.

5. 참고 사항 및 문제 해결

5.1 객체에서 오류가 발생했을 때

for…of 문은 객체 리터럴에서는 사용할 수 없습니다. 대신 Object.entries()를 사용하세요.

예시: Object.entries()를 이용한 처리

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

출력:

a 1  
b 2

이 방법을 사용하면 객체의 키와 값을 효율적으로 순회할 수 있습니다.

5.2 성능 고려 사항

for…of 문은 일반적인 사용 사례에 충분한 성능을 제공하지만, 대용량 데이터셋을 다룰 때는 주의가 필요합니다. 필요에 따라 인덱스 기반 for 루프나 while 루프 사용을 고려하세요.

예시: 인덱스 기반 for 루프

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 오류 처리 추가

비동기 처리를 for…of 문과 결합할 때는 적절한 오류 처리를 반드시 포함하세요.

예시: try…catch을 이용한 오류 처리

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. FAQ 섹션

Q1: for…of 문은 모든 브라우저에서 작동하나요?

A1:
for…of 문은 ES6 (ECMAScript 2015)에서 도입되었습니다. 최신 브라우저에서는 지원되지만 Internet Explorer에서는 작동하지 않습니다.

지원 브라우저:

Google Chrome 38 이상
Firefox 36 이상
Safari 7.1 이상
Edge 12 이상

구형 브라우저를 지원해야 한다면 Babel을 사용해 코드를 트랜스파일하거나 다른 반복문 구문을 선택하세요.

Q2: for…of 를 사용할 때 인덱스를 얻으려면 어떻게 해야 하나요?

A2:
for…of에서는 직접 인덱스에 접근할 수 없지만, entries() 메서드를 사용하면 인덱스와 값을 동시에 가져올 수 있습니다.

예시:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

출력:

0 Apple  
1 Banana  
2 Orange

Q3: 객체 리터럴에 for…of 를 사용할 수 있나요?

A3:
아니요. for…of 문은 반복 가능한 객체에만 사용할 수 있습니다. 객체 리터럴은 반복 가능하지 않으므로 Object.entries()를 이용해 키와 값을 순회해야 합니다.

예시:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

출력:

a 1  
b 2

Q4: 비동기 작업에 for…of 를 사용할 수 있나요?

A4:
네. async/await와 함께 사용할 수 있습니다.

예시:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5: for…of 와 forEach 의 차이점은 무엇인가요?

A5:
아래 표가 차이점을 요약합니다.

Feature	for…of statement	forEach method
Supported data	Iterable objects such as arrays, strings, Map, Set, etc.	Arrays only
Callback function	Not required	Required
break/continue	Supported	Not supported
Async processing	Can be used with async/await	Does not directly support async/await

7. 요약

이 글에서는 JavaScript의 for…of 문에 대해 다음과 같은 핵심 내용을 다루었습니다.

기본 문법 및 사용 예시를 이해하고 배열과 문자열을 순회하는 방법
for…in 및 forEach와 같은 다른 반복문과의 차이점 및 최적 사용 사례
Map 및 Set 객체를 포함한 고급 예시와 비동기 처리와의 결합
일반적인 질문을 해결하기 위한 실용적인 FAQ 섹션

7.1 for…of 문의 장점

간단하고 가독성이 높음
반복 가능한 객체를 유연하게 지원
break와 continue를 지원하여 루프 제어가 용이

8. 다음에 배울 내용

for…of 문을 마스터했다면, 다음 단계로 아래 기능들을 배우는 것이 좋습니다.

스프레드 구문 (…)

배열과 객체를 확장하고 병합할 때 유용한 기능입니다.

구조 분해 할당

배열과 객체에서 값을 쉽게 추출하는 기법입니다.

Promise와 async/await에 대한 심화

비동기 코드를 효율적으로 작성하는 방법을 배웁니다.

이 기능들을 조합하면 보다 고급 JavaScript 프로그램을 만들 수 있습니다.

마무리 생각

이 글에서는 JavaScript for…of 문에 대한 완전한 가이드를 제공했으며, 기본 개념부터 실제 개발에 적용할 수 있는 사례까지 모두 다루었습니다.

다음 단계에서 시도해 볼 예시 작업:

for…of 문을 직접 코드에 구현하고 실험해 보세요.
배열, Map, Set을 처리해 보면서 이해를 깊게 하세요.
더 고급 ES6 기능에 도전하여 실력을 한 단계 끌어올리세요.

Prev

2026-01-21
JavaScript Fetch API 가이드: GET, POST, 오류 처리 및 실전 예제
Next
記事がありません

JavaScript for…of 루프 설명: 문법, 예제, 그리고 모범 사례

1. 소개

2. JavaScript의 for…of 문이란? 기본 사용법

2.1 for…of 문의 개요

2.2 for…of 문의 기본 구문

2.3 실용적인 코드 예시

예시 1: 배열 요소를 순서대로 출력

예시 2: 문자열의 각 문자 출력

2.4 지원되는 데이터 타입

3. 다른 반복문 구문과의 차이점 및 비교

3.1 for…of와 for…in의 차이점

예시: for…in 사용

3.2 for…of와 forEach의 차이점

예시: forEach 사용

4. 실용 예시와 고급 기법

4.1 배열 필터링

4.2 Map에서 키와 값 가져오기

4.3 비동기 처리와 결합

5. 참고 사항 및 문제 해결

5.1 객체에서 오류가 발생했을 때

예시: Object.entries()를 이용한 처리

5.2 성능 고려 사항

예시: 인덱스 기반 for 루프

5.3 오류 처리 추가

예시: try…catch을 이용한 오류 처리

6. FAQ 섹션

Q1: for…of 문은 모든 브라우저에서 작동하나요?

Q2: for…of 를 사용할 때 인덱스를 얻으려면 어떻게 해야 하나요?

예시:

Q3: 객체 리터럴에 for…of 를 사용할 수 있나요?

예시:

Q4: 비동기 작업에 for…of 를 사용할 수 있나요?

예시:

Q5: for…of 와 forEach 의 차이점은 무엇인가요?

7. 요약

7.1 for…of 문의 장점

8. 다음에 배울 내용

마무리 생각

JavaScript Fetch API 가이드: GET, POST, 오류 처리 및 실전 예제