for...of 문

for...of 문은 순회 가능한 이터러블(iterable) 객체를 순회하는 반복문입니다.
자바스크립트에서는 이터러블 프로토콜(Iterable Protocol)을 따르는 객체가 이터러블 객체입니다.

for...of 문으로 순회 가능한 이터러블 객체의 개념과, for...of 문의 사용법 및 주의할 점에 대해 알아봅니다.

for...of 문과 이터러블 객체의 개요

for...of 문은 ECMAScript 2015 (ES6)부터 도입된 자바스크립트의 반복문 중 하나입니다.
이 문법은 DOM 컬렉션 객체의 각 요소를 반복하여 작업하는 데 매우 용이한 방법을 제공합니다.

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블 객체입니다.

이 때, "이터러블 객체"라는 개념이 중요한 역할을 합니다.

이터러블 객체란 무엇인가?

for...of 문은 이터러블 객체의 순회를 위해 고안된 것입니다.
for...of 문을 이해하고 사용하기 위해서는 무엇보다도 이터러블 객체에 대한 개념을 이해하고 있어야 합니다.

이터러블 프로토콜(Iterable Protocol)

ES6 이전에는 순회 가능한 객체에 대해 통일된 규약이 없었습니다.
예를 들면 배열, 문자열, 유사 배열, DOM 컬렉션 등은 통일된 규약이 아닌 나름대로의 데이터 구조를 가지고 for 문, for...in 문, 배열의 순회를 위한 메서드인 forEach() 함수 등 나름의 방법으로 순회를 할 수 있었습니다.

그래서, 자바스트립트는 순회 가능한 객체에 대해 통일된 규약을 만들었습니다. 이 규약이 "이터러블 프로토콜"입니다. 이터러블 프로토콜은 자바스크립트에서 이터러블 객체를 정의하고 사용하기 위한 규약을 말합니다. 이터러블 객체는 이터러블 프로토콜을 준수한 객체입니다.

이터러블(iterable) 객체란, 객체 내부에 특별한 메서드인 Symbol.iterator가 정의되어 있고, 이 메서드가 이터레이터(iterator) 를 반환하는 객체를 말합니다.

이터러블 객체는 순회 가능한 데이터 컬렉션, 즉 자바스크립트에서 이터러블 객체를 정의하고 사용하기 위한 규약(프로토콜)입니다.

이터러블 프로토콜은 Symbol.iterator 메서드와 이터레이터(iterator) 객체, 이 두 가지 주요 요소로 이루어져 있습니다. 이것이 for...of 문을 사용할 수 있는 근간입니다.

복잡하게 생각할 수 있으나 내부적인 구조나 기전은 잠시 미루겠습니다. 하지만, 중요한 점이 있습니다.

이터러블 객체는 for...of 문으로 통일되게 순회할 수 있습니다. 이 점이 중요합니다.

이터러블 객체의 종류

  • 배열: 배열의 각 요소를 순회하고 작업을 수행할 수 있습니다.
  • 문자열: 문자열의 각 문자에 접근하여 조작할 수 있습니다.
  • DOM 컬렉션 객체인 HTMLCollection과 NodeList
  • Map과 Set: 키-값 쌍을 가진 Map이나 유일한 값만을 갖는 Set을 순회하여 처리할 수 있습니다.

주의하세요!
객체 리터럴, 클래스는 이터러블 객체가 아닙니다.

for...of 문을 사용면 이터러블 객체를 순회하여 각 요소에 접근하고 데이터 처리할 수 있습니다.

for...of 문 사용법

for...of 문은 자바스크립트에서 이터러블 객체를 순회하는 반복문입니다.

기본 문법과 작동 원리

for...of 문의 기본 문법은 다음과 같습니다.

JavaScript - 구문 
for (variable of iterable) {
    // 반복할 코드
}
  • variable: 반복문 내에서 현재 순회 중인 요소를 저장할 변수의 이름을 지정합니다. 이 변수는 반복문의 각 순회에서 업데이트되어 각 요소에 대한 작업에 사용됩니다.
  • iterable: 반복하고자 하는 이터러블 객체입니다. 배열, 문자열, Map, Set, NodeList 등 다양한 객체를 순회할 수 있습니다.

예시를 통해 이해를 돕겠습니다.

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

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

위의 코드에서 item은 각 순회마다 배열 iterable의 요소로 업데이트되며, console.log(item) 코드가 실행됩니다. 결과적으로 배열의 각 요소가 출력됩니다.

더 자세한 내용을 살펴보겠습니다.

JavaScript 
const iterable = "Hello"; // 문자열을 예시로 사용

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

이번에는 문자열을 이터러블로 사용하여 문자열의 각 문자에 접근하고 출력합니다.

DOM 컬렉션인 NodeList이나 HTMLCollection을 이터러블로 사용하여도 비슷한 방식으로 요소에 접근할 수 있습니다.

HTML 
<div></div>
<div></div>
<div></div>
<div></div>
JavaScript 
const elements = document.querySelectorAll("div"); // NodeList

for (const element of elements) {
    console.log(element);
}
자바스크립트 querySelectorAll() 함수 사용법
console에서 출력된 모습

이처럼 for...of 문은 다양한 이터러블 객체를 순회하고 각 요소에 접근하여 작업을 수행하는데 사용됩니다. for...of 문은 내부적으로 이터레이터 프로토콜을 사용하여 순회하므로, 사용자 정의 이터러블 객체에도 적용할 수 있습니다.

for...of 문 사용 시 주의할 점

  1. 배열의 인덱스 정보 누락
  2. 객체 리터럴에 사용할 수 없음: 이터러블 객체가 아님

배열의 인덱스 정보 누락

for...of 문은 배열 요소에 접근하기 위한 반복 변수만 제공합니다.

배열의 인덱스에 직접적으로 접근하는 방법이 없으므로 인덱스 정보를 필요로 하는 경우에는 for...of 문보다는 전통적인 for...in 문이나 배열의 순회 메서드인 forEach() 함수를 사용하는 것이 좋습니다.

JavaScript 
const myArray = [10, 20, 30, 40, 50];

// "for...of" 문으로 배열 순회 (인덱스 정보 누락)
for (const item of myArray) {
    console.log(item); // 배열의 요소 출력
}

// "for...in" 문으로 배열 순회 (인덱스 정보 포함)
for (const index in myArray) {
    console.log(index, myArray[index]); // 인덱스와 배열의 요소 출력
}

// "forEach" 함수로 배열 순회 (인덱스 정보 누락)
myArray.forEach((item) => {
    console.log(item); // 배열의 요소 출력
});

위의 코드에서 for...in 문을 사용하면 배열의 인덱스와 요소에 접근할 수 있으며, forEach() 함수 역시 마찬가지로 요소에만 접근할 수 있습니다. for...of 문은 각 요소에 대한 접근만 가능하며, 인덱스 정보를 직접적으로 얻을 수는 없습니다.

객체 리터럴에 사용할 수 없음: 이터러블 객체가 아님

객체 리터럴은 이터러블 객체가 아닙니다!

for...of 문은 객체 리터럴 순회에는 사용할 수 없습니다. 객체 리터럴은 이터러블 객체가 아니기 때문입니다. 객체의 프로퍼티 순회에는 for...in 문이 더 적합합니다.

JavaScript 
const myObject = {
    a: 1,
    b: 2,
    c: 3
}

for (const prop of myObject) { // 이 부분에서 에러 발생
    console.log(prop);
}
// TypeError: myObject is not iterable

올바른 방법은 for...in 문이나 Object.keys(), Object.values(), Object.entries() 메서드를 사용하는 것입니다.

JavaScript 
for (const prop in myObject) {
    console.log(myObject[prop]);
}

for (const [key, value] of Object.entries(myObject)) {
    console.log(key, value);
}

명세서

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

참고문헌

같이 보기