[Javascript] for ... of

 
 
 
for ... of문은 iterable 객체를 순회하는 반복문이다. ECMAScript 2015(ES6)부터 도입된 자바스크립트의 반복문 중 하나로, DOM 컬렉션 객체의 각 요소를 반복하여 작업하는 데 용이한 방법을 제공한다.
 
cf) DOM 컬렉션 객체인 HTMLCollection과 NodeList 모두 유사 배열 객체이면서 이터러블 객체다.
 
 
for ... of문은 iterable 객체의 순회를 위해 고안된 것으로 이를 사용하기 위해서는 iterable 객체에 대한 이해가 필요하다.
 
 

이터러블 프로토콜

ES6 이전에는 순회 가능한 객체에 대해 통일된 규약이 없었다. 예를 들면 배열, 문자열, 유사 배열, DOM 컬렉션 등은 통일된 규약이 아닌 나름대로의 데이터 구조를 가지고 for문과 for ... in문, forEach() 함수 등 나름의 방법으로 순회할 수 있었다. 그리하여 자바스크립트는 순회 가능한 객체에 대해 통일된 규약을 만들었는데, 이 규약이 '이터러블 프로토콜'인 것이다. 즉, 이터러블 프로토콜은 자바스크립트에서 이터러블 객체를 정의하고 사용하기 위한 규약이며 이터러블 객체는 이러한 이터러블 프로토콜을 준수한 객체이다.

 
 

이터러블 객체의 종류

배열, 문자열, Map, Set

 
cf) 배열이 아닌 객체(객체 리터럴, 클래스 등)는 이터러블 객체가 아님.
 
 
 
 

for ... of문 사용법

for (variable of iterable){ ... }

 
for ... of문의 기본 문법은 위와 같다. variable은 반복문 내에서 현재 순회 중인 요소를 저장할 변수로, 반복문의 각 순회에서 업데이트되어 각 요소에 대한 작업에 사용된다. iterable의 경우 반복하고자 하는 이터러블 객체로 배열, 문자열, Map, Set, NodeList 등 다양한 객체가 될 수 있다.
 

const iterable = [1, 2, 3, 4, 5];

for (const item of iterable){
    console.log(item);
}

/*
  출력 결과
  1
  2
  3
  4
  5
*/

 
위 코드에서 변수 item은 각 순회마다 배열 iterable의 요소로 업데이트되며, console.log(item) 코드가 실행된다. 결과적으로 배열의 각 요소가 출력되는 것이다.
 
뿐만 아니라 문자열이나 DOM 컬렉션인 NodeList나 HTMLCollection을 이터러블로 사용해도 비슷한 방식으로 요소에 접근할 수 있다.

// 문자열
const iterable = "Hello"; 
for (const char of iterable) {
    console.log(char);
}

// NodeList
const elements = document.querySelectorAll("div");
for (const element of elements) {
    console.log(element);
}

 
 
 
 

for ... of 사용 시 주의사항

 

1) 인덱스 정보 누락

for ... of문은 요소에 접근하기 위한 반복 변수만 제공한다. 배열의 인덱스에 직접적으로 접근하는 방법이 없으므로 index 정보를 필요로 하는 경우  for ... of문보다는 for ... in문이나 forEach()를 사용하는 것이 좋다.

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, index) => {
    console.log(index, item); // 인덱스와 배열의 요소 출력
});

 
 
 

2) 객체 순회 시 주의

for ... of문은 객체의 프로퍼티를 순회하는 데에는 사용되지 않는다. 이 경우 for ... in문을 사용하는 것이 더 적합하다. 또는 Object.keys(), Object.values(), Object.entries() 함수를 사용하는 방법도 있다.

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

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


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

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