ts-for-jsdev
Search…
08 모듈과 네임스페이스
09 실제 프로젝트에서 사용하기
10 유용한 라이브러리 소개
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-inelem에는 각 함수의 인덱스 문자열("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) 프로토콜을 구현한 (즉, 순회 가능한) 객체에 대해서만 사용할 수 있다. 이터러블 프로토콜을 구현한 객체란 이터레이터를 원소로 갖는다. 이 용어들이 어떤 의미를 갖는지 차례로 살펴보자.
Copy link