정의 및 사용 방법

for...of 문은 값(value)으로 순회할 수 있는 객체를 위한 반복문입니다.
값(value)으로 순회할 수 있는 객체라면 어떤 객체든 for...of 문으로 순회할 수 있습니다. 즉, 객체에서 가져온 값(value)으로 작동하는 루프를 실행합니다.

값(value)으로 순회할 수 있는 객체에는 다음과 같은 것들이 있습니다.

예전에는 배열, 객체, 문자열 등 종류별로 반복문 사용법이 달랐습니다.
for...of 문은 이러한 불편함을 해결하고, 일관되게 어떤 객체든 값(value)으로 순회할 수 있다면 적용 가능한 반복문입니다.

주의하세요!
객체 리터럴 등으로 생성한 일반 객체(plain objects)는 값(value)으로 순회할 수 없습니다. for...of 문 대신, 객체의 속성(key)을 순회하는 for...in 문으로 순회할 수 있습니다.

기본 예제

다음은 값(value)으로 순회할 수 있는 대표적인 배열 객체를 for...of 문으로 순회하는 예제입니다.

JavaScript 
const iterable = [1, 2, 3, 4, 5]; // 배열을 예시로 사용

for (const item of iterable) {
    console.log(item);
}
console에서 출력된 모습

구문

JavaScript 
for (variable of iterable) {
    // 반복할 코드
}
  • variable: 반복문 내에서 현재 순회 중인 값(value)을 저장할 변수의 이름입니다.
  • iterable: 반복하고자 하는 값(value)으로 순회할 수 있는 객체입니다.

다양한 예제 – 객체별 순회

다음은 값(value)으로 순회할 수 있는 대표적인 객체 별로 for...of 문으로 순회하는 예제입니다.

배열(Array)

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

문자열(String)

JavaScript 
const str = "abc";
for (const char of str) {
    console.log(char);
}
// 출력: "a" "b" "c"

Map

JavaScript 
const map = new Map([["key1", "value1"], ["key2", "value2"]]);
for (const [key, value] of map) {
    console.log(key, value);
}
// 출력: "key1 value1" "key2 value2"

Set

JavaScript 
const set = new Set([1, 2, 3]);
for (const value of set) {
    console.log(value);
}
// 출력: 1 2 3

HTMLCollection

HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

/* for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

NodeList

HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.querySelectorAll("li"); // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

/* for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
querySelectorAll()로 반환된 NodeList 객체는 유사 배열 객체이면서 Iteration Protocols가 적용된 이터러블 객체입니다.

arguments

JavaScript 
function showArgs() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

showArgs(10, 20, 30);
// 출력: 10 20 30

break, continue 문과 함께 사용

for...of 문에서도 반복문 제어를 위해 break와 continue 문을 사용할 수 있습니다. 다음 예제에서는 조건에 따라 반복을 종료하거나 건너뛰는 방법을 보여드립니다.

JavaScript 
/* break 예제: 3 이상이면 반복 종료 */
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
    if (num >= 3) break;
    console.log(num);
}
// 출력: 1 2

/* continue 예제: 3인 경우 건너뛰기 */
for (const num of numbers) {
    if (num === 3) continue;
    console.log(num);
}
// 출력: 1 2 4 5

주의할 점

for...of 문은 값(value)으로 순회할 수 있는 객체를 위한 반복문입니다.
즉, 객체에서 가져온 값으로 작동하는 루프를 실행한다는 것입니다. 이 점은 편리함을 제공하지만 반면, 몇 가지 제약이 있습니다. 이 점을 알고 사용하면 불필요한 오류나 혼동을 피할 수 있습니다.

인덱스에 직접 접근할 수 없음

for...of 문은 순회하는 객체의 현재 값(value)만 제공합니다. 인덱스(index)는 직접 제공하지 않습니다.

JavaScript 
const numbers = [10, 20, 30];

// 값만 순회
for (const value of numbers) {
  console.log(value); // 10, 20, 30
}

일반 객체에서는 사용 불가

객체 리터럴 등으로 생성한 일반 객체(plain objects)는 값(value)으로 순회할 수 없습니다. for...of 문 대신, 객체의 속성(key)을 순회하는 for...in 문으로 순회할 수 있습니다.

JavaScript 
const obj = {
    a: 1,
    b: 2
}

// 오류 발생!
for (const value of obj) {
  console.log(value);
}
// TypeError: obj is not iterable

일반 객체도 for...of 문으로 순회를 하려면, 일반 객체를 Object.keys(), Object.values(), Object.entries() 같은 메서드를 사용해서 순회를 해야 합니다.

JavaScript 
const obj = {
    a: 1,
    b: 2
}

// 키 순회
for (const key of Object.keys(obj)) {
  console.log(key); // a, b
}

// 값 순회
for (const value of Object.values(obj)) {
  console.log(value); // 1, 2
}

// 키와 값 모두 순회
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value); // a 1, b 2
}

명세서

for...of 문에 대한 명세서
명세서 사양
for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

브라우저 호환성

for...of 문에 대한 브라우저 호환성
문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
for...of 38 12 13 7

참고문헌

같이 보기