JS - for ... of 반복문

for ... of 반복문은 for ... in 문과 달리 이터러블(iterable) 의 값을 가져올 수 있습니다. 이터러블에는 배열, 문자열, DOM 컬렉션, 맵(Map), 셋(Set)에 반복 처리할 수 있지만 키(key)와 원소(value) 를 가지는 객체에는 접근할 수 없습니다.

 // 괄호 문법
 for (val of iterable) {
    console.log(val);
 }

 // 짧은 문법
 for (val of iterable)
    console.log(val);

예제에서 알 수 있듯 인덱스가 아니라 곧바로 값을 가져올 수 있으며 문자열을 나눌때도 유용합니다.

<script>
 var str = "habony php";

 for (var val of str) { 
    document.write(val + ",<br/>\n"); 
 } 
 /* 
  결과: 
  h,
  a,
  b,
  o,
  n,
  y,
  ,
  p,
  h,
  p,
 */ 
</script>

배열에도 아주 유용하게 동작합니다.

<script>
 var arr = [1,2,3,4,5];

 for (const val of arr) { 
    document.write(val + ",<br/>\n"); 
 } 
 /* 
  결과: 
  1,
  2,
  3,
  4,
  5,
 */ 
</script>

그런데, 뭔가 이상한 게 있죠? 변수를 선언할 때 var 나 let 가 아닌 const 를 사용했다는 점입니다. 일반적으로 for 문에는 const 를 사용할 수 없습니다. 그러나 for ... of 문은 Symbol.iterator 를 통해 값을 가져 오기때문에 const 를 사용할 수 있으며, const 로 선언된 변수는 for ... of 문 밖에서는 사용할 수 없습니다.

for ... of 문의 가장 큰 특징은 맵과 셋에 적용할 수 있다는 점입니다. 맵과 셋은 ES6 에 추가된 이터러블 객체입니다.

<script>
 // Set 객체
 // arr = new Set(['a', 'b', 'c', 'a']);
 var arr = new Map([[1,2], ['one', 1], ['two', 2]]);

 for (const val of arr) { 
    document.write(val + ",<br/>\n"); 
 } 
 /* 
  결과: 
  1,2,
  one,1,
  two,2,
 */ 
</script>