2.5.2 for-of 문법

ES6에는 어떤 컬렉션(collection)의 각 요소를 순회하며 특정 작업을 반복 수행하기 위한 for-of 문법이 추가되었다.

const languages = ['JavaScript', 'TypeScript', 'Python'];
for (const lang of languages) {
  if (!lang.includes('Script')) {
    break;
  }
  console.log(lang);
}

// JavaScript
// TypeScript

비슷하게 생겼지만, for-of 문법은 기존의 for-in 문법과 비교했을 때 아래와 같은 차이점을 갖고 있다.

• 순회 순서가 항상 같을 것이 보장된다.

• for (const elem in arr) { ... } 의 elem에는 원소의 키에 해당하는 문자열이 바인딩 된다. 한편 for (const elem of arr) { ... } 의 elem에는 원소의 실제 값이 바인딩 된다.

  • 예를 들어, arr가 함수의 배열([ () => 42, () => true])이라면, for-in의 elem에는 각 함수의 인덱스 문자열("0", "1")이 바인딩 된다. for-of 문법의 elem에는 실제 함수값(() => 42, () => true)이 바인딩 된다.

또한 forEach와 달리 break / continue 등의 키워드로 실행 흐름을 제어할 수 있다.

주의할 점은 임의의 Object 인스턴스에 대해 for-of를 사용 가능한 것은 아니라는 것이다.

const obj = { a: 1 };
for (const elem of obj) { 
  console.log(elem);
}
// TypeError: obj is not iterable

에러 메시지를 보면 짐작할 수 있듯이, for-of 문법은 이터러블(iterable) 프로토콜을 구현한 (즉, 순회 가능한) 객체에 대해서만 사용할 수 있다. 이터러블 프로토콜을 구현한 객체란 이터레이터를 원소로 갖는다. 이 용어들이 어떤 의미를 갖는지 차례로 살펴보자.